{"id":628,"date":"2022-09-07T14:28:03","date_gmt":"2022-09-07T07:28:03","guid":{"rendered":"https:\/\/bnsd.binus.ac.id\/graphic-design\/?p=628"},"modified":"2022-09-07T14:28:03","modified_gmt":"2022-09-07T07:28:03","slug":"tips-for-combining-fonts-in-your-web-design","status":"publish","type":"post","link":"https:\/\/international.binus.ac.id\/graphic-design\/2022\/09\/07\/tips-for-combining-fonts-in-your-web-design\/","title":{"rendered":"Tips for combining fonts in your web design"},"content":{"rendered":"

1. Use fonts that have different tones<\/h3>\n

Writing can express emotion. The letterforms we use to display words also influence our perceptions. Some fonts are stern and businesslike, while others are upbeat and informal. Typefaces have distinct identities that can add meaning to the words they display. When choosing web fonts, combining typography with different tones adds visually pleasing contrasts.<\/p>\n

When picking out the best font pairings, first consider the spirit of who or what a website will be representing. A bubbly typeface might work for a toy company but will look out of place on a law firm\u2019s website. On the flip side, a web design for something lighthearted will get bogged down by the most serious of serifs.<\/p>\n

One of the biggest considerations is what typography you\u2019re going to use for the headers and the body copy. Headings offer more freedom in using stylized typefaces due to their larger scale. For body copy, you need a font that\u2019s easy on the eyes in smaller text sizes.<\/p>\n

This template built wit\u00a0Webflow<\/a>\u00a0for a fictional candy company uses the typeface Lovelace and the fanciful and modern typeface Erotique for its headers. Supporting body content uses the more conventional Megabyte typeface. The fonts have different personalities but work together in harmony.<\/p>\n

\"An<\/p>\n

Don\u2019t be afraid to use tonally opposing typography in your web designs \u2014 sometimes the juxtaposition can make your content pop.<\/p>\n

2. Create contrast \u2014 but not too much contrast \u2014\u00a0 with typeface pairs<\/h3>\n

Font pairs should be noticeably different \u2014 for example, don\u2019t use a sans serif typeface in a header that\u2019s strikingly similar to a sans serif that you\u2019re using in the body copy. You want distinct combinations with typefaces that are visually different but still complement each other.<\/p>\n

What happens if we take a typeface with calligraphic flourishes such as Great Vibes and combine it with a serif like Merriweather? We end up with a sense of contrast that\u2019s not very eye-pleasing.<\/p>\n

\"An<\/p>\n

The flourishes and loops of Great Vibes have a softness and a sense of sophistication, while Merriweather is a no-nonsense typeface with a formality conveyed by its serif letterforms. Here, the contrast is too great for the combination to work.<\/p>\n

Let\u2019s shift to a more satisfying font pairing. Here in the header, we\u2019re using\u00a0Vollkorn<\/a>, a subtly playful serif typeface. We\u2019ve paired it with\u00a0Open Sans<\/a>, a more neutral and plain sans serif. This pairing works well because though there is contrast, the subtleness of both of the typefaces make them visually complimentary.<\/p>\n

\"An<\/p>\n

3. Limit different typefaces to three or less<\/h3>\n

In most designs, you\u2019ll be using one web typeface for the headline and another for the body. You might also have places in the layout where you use hand lettering or more stylized typography for decorative purposes. No matter how tempted you are by all the free fonts out there, you don\u2019t need more than three typefaces for a single website.<\/p>\n

Many designers opt for using a typeface superfamily for their work. A superfamily is a group of typefaces that are all related. It may contain stylistic variations like italics, light to heavyweights, serif and sans serif versions, as well as other variations. The best thing about superfamilies is that they take the guesswork out of finding complementary fonts because they were designed with compatibility in mind.<\/p>\n

Superfamilies make it possible to use a single typeface in multiple ways. Take a look at these selections from the Roboto superfamily. There\u2019s a huge difference between the subtleness of Thin 100 Italic and the strong declaration made by Regular 400.
\n\"An<\/p>\n

Typeface superfamilies give you plenty of font options to play with while still sticking to a single typeface style.<\/p>\n

4. Communicate visual hierarchy through font pairing<\/h3>\n

\"An<\/p>\n

The Equitist<\/a>, a healthcare website built with\u00a0Webflow<\/a>, communicates its hierarchy through different typeface styles, sizing, and colors.<\/p>\n

You can use typography to send visual signals about the importance of different sections of content. Headlines should pack the heaviest visual punch, followed by subheadings, and then body copy. Use your font combinations to give your content an obvious sense of structure.<\/p>\n

Use font size to imply order<\/h4>\n

This is an easy one. The biggest typeface represents what takes priority, with descending sizes representing the hierarchy of content. Using all uppercase also works well in making important elements like calls to action stand out. But make sure to use all caps in moderation \u2014 no one wants to feel like a website is yelling at them.<\/p>\n

Integrating different sizes of typography is the go-to for most beginner designers, but there are other ways to denote visual hierarchy.<\/p>\n

Experiment with different weights<\/h4>\n

Built with\u00a0Webflow<\/a>, this website for the agency\u00a0Babel<\/a>\u00a0mixes things up with lighter and heavier typeface weights.
\n\"An<\/p>\n

Heavier weights indicate importance, while lighter weights represent a lower rung in the content hierarchy. You can do a lot with a single typeface by varying its weight, as we saw with the Roboto superfamily.<\/p>\n

Vary font colors<\/h4>\n

While you don\u2019t want to fill your design with a kaleidoscope of clashing hues, varying the shades of text can help certain words stand out. Lighter and darker variations create a nice sense of contrast, with darker shades indicating copy that should be read first. When experimenting with font colors, make sure that they don\u2019t get lost in the background.<\/p>\n

Typefaces to consider when coming up with font combinations<\/h2>\n

Now that we\u2019ve covered the typographic principles you should keep in mind, let\u2019s take a look at the major categories of typefaces and some combinations you can use in your design work.<\/p>\n

Serifs<\/h3>\n

Serif typefaces were developed for readability in print and can be traced back to the late 1700s.<\/p>\n

A serif is a tiny line or stroke that\u2019s been added to a letter. Serifs provide visual cues that make it easy for someone\u2019s eyes to follow. Serif typefaces make scanning text more efficient, especially when it comes to large chunks of writing, like in the pages of books.<\/p>\n

In the early days of computing, primitive monitor resolutions did not work well with serif-based typefaces. But today\u2019s high-resolution monitors give graphic designers a wealth of serifs they can work with.<\/p>\n

When using a serif, always pair it with a sans serif font. Serif typefaces are generally too similar, making for an awkward font pairing.<\/p>\n

Serifs provide a lot of flexibility. They\u2019re easy to read in small and large font sizes, making them ideal for both body copy and headers.<\/p>\n

Font pairing idea: EB Garamond and Montserrat<\/h4>\n

Here we\u2019ve taken the serif EB Garamond at a smaller size in the body copy and combined it with Montserrat at a larger scale in the headline. Serif fonts work better for big chunks of copy when they\u2019re at a smaller font size.<\/p>\n

\"An<\/p>\n

Sans serifs<\/h3>\n

This is straightforward enough \u2014 san serifs lack the extra lines that adorn serifs. Sans serifs can be used at a smaller scale for paragraph or body text, or they can be combined with a serif in the headers.<\/p>\n

Font pairing idea: Open Sans and Lato<\/h4>\n

Some designers out there may scoff at fonts like Open Sans and Helvetica due to their overuse, but they\u2019re popular for a reason.\u00a0Open Sans<\/a>\u00a0is a plain yet welcoming font, which means it combines well with many other fonts. Think of it like vanilla ice cream \u2014 it\u2019s a solid base to build upon.<\/p>\n

Here we\u2019re using Open Sans in the header, along with\u00a0Lato<\/a>\u00a0in the body copy, another sans serif typeface.<\/p>\n

\"An<\/p>\n

Display fonts<\/h3>\n

Display fonts work well when you need to get people\u2019s attention. They often have sophisticated letterforms that range from big and bold to sparse and thin. Display fonts offer an amount of stylization that makes them best for headlines and other places in a design where you need to make a big impression with a little bit of text.<\/p>\n

Font pairing idea: Bubblegum Sans and Open Sans<\/h4>\n

Bubblegum Sans<\/a>\u00a0has joyful stylized letters that make for a great pairing with the neutrality of\u00a0Open Sans<\/a>.<\/p>\n

\"An<\/p>\n

Font pairing idea: Poiret One and Lato<\/h4>\n

Poiret One<\/a>\u2019<\/strong>s nuanced art deco-inspired lettering and thin linework make it an excellent\u00a0modern font<\/a>\u00a0if you\u2019re looking for a bit of sophistication. Pairing this typeface with a subtler typeface like\u00a0Lato<\/a>\u00a0creates a sense of contrast that still works well together.<\/p>\n

\"An<\/p>\n

Monospaced typefaces<\/h3>\n

Every character in a monospaced typeface has the same width. This fixed horizontal measurement sets them apart from typefaces that have variable widths, giving them a strong sense of consistency. In the early days of computing, monospaced fonts were widely used due to their simplicity and ability to look good on early low-resolution displays.<\/p>\n

Font pairing idea: IBM Plex Mono and PT Sans<\/h4>\n

Designed as an homage to IBM,\u00a0IBM Plex Mono<\/a>\u00a0is a modern typeface with a visual identity perfect for startups and others in the tech realm. Pairing this monospaced typeface with\u00a0PT Sans<\/a>\u00a0\u2014 which has a sharper geometry \u2014 creates a nice sense of contrast and visual hierarchy.<\/p>\n

\"An<\/p>\n

Typography is essential for web design<\/h2>\n

There are so many aspects of effective web design. Approach your font pairings with the same level of consideration you apply to choosing a color palette. The tone of the typefaces you pick, the way that you style them, and their legibility are all a huge part of a user\u2019s experience with a web design. Find those\u00a0cool fonts<\/a>\u00a0that speak to the personality of what you\u2019re creating and give your visitors the best possible way to experience its content.<\/p>\n

 <\/p>\n

source:Font pairing: How to find the right combinations for your web designs (webflow.com)<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

1. Use fonts that have different tones Writing can express emotion. The letterforms we use to display words also influence our perceptions. Some fonts are stern and businesslike, while others are upbeat and informal. Typefaces have distinct identities that can add meaning to the words they display. When choosing web fonts, combining typography with different […]<\/p>\n","protected":false},"author":41,"featured_media":629,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/628"}],"collection":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":0,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/posts\/628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media\/629"}],"wp:attachment":[{"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/media?parent=628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/categories?post=628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/international.binus.ac.id\/graphic-design\/wp-json\/wp\/v2\/tags?post=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}