{"id":70141,"date":"2018-03-28T08:02:00","date_gmt":"2018-03-27T21:02:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=1003"},"modified":"2025-11-11T17:56:18","modified_gmt":"2025-11-11T06:56:18","slug":"what-makes-a-good-font","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/what-makes-a-good-font","title":{"rendered":"What Makes a Good Font?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">It\u2019s not enough to make a statement with words alone. You must also use bold visuals that steal your audience\u2019s attention. That\u2019s exactly why UX and modern design are such integral parts of web development these days.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"What is a &quot;Good Font&quot;?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Ohe_JzKksvA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">But it\u2019s not just the visual elements, like photos, accents and icons, that make a difference \u2014 typography is just as important. If you choose an ugly or hard-to-read font, your audience is going to lose interest fast.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019re going to take a look at a handful of guidelines and tips that can help you choose the right font for your next design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"stick\">1. Stick with Typefaces That Match Your Personality<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Quite a few designers feel every new design should have a unique <a href=\"https:\/\/hipfonts.com\/typeface-vs-font\/\" target=\"_blank\" rel=\"noopener\">typeface<\/a>. This is somewhat true. You don\u2019t want to choose a typeface that goes against the style, theme and colors you have set up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, the typefaces you use should follow the same theme, as well. Think of your collective works as something of a modern signature. By sticking with six to ten typefaces total \u2014 even fewer is better \u2014 the fonts you use can make you instantly recognizable. Plus, fewer fonts mean you can build a more intimate relationship with each style, so you know what suits a particular element best.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills-1024x507.jpg\" alt=\"Graphic designer Ade Mills' choice of typeface\" class=\"wp-image-77918\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills-1024x507.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills-300x148.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills-768x380.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills-1536x760.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ade-mills.jpg 1837w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The trick is initially choosing versatile fonts that match a variety of styles and themes. Graphic designer, Ade Mills, did an excellent job <a href=\"https:\/\/ademills.com\/\" target=\"_blank\" rel=\"noopener\">choosing a typeface that matches her personality<\/a>, sense of style and site theme.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"weight\">2. Weight, or No Weight?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Quite a few fonts are only available in one weight, which sets strict limitations on how your text can be displayed. We recommend staying away from these font styles if you can help it. Some of the more common offenders include Roman capitals, as well as stencil and pixel styles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Outside of choosing one of the aforementioned fonts, you\u2019ll want to double-check the weight types before settling on one. This is especially true if you\u2019re designing for a content-heavy or collaborative site. You may not be using certain weight types, but others in the community will. The final product can end up looking shoddy if you don\u2019t take weight into consideration when choosing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"519\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto-1024x519.jpg\" alt=\"Ditto a eyewear company's website with balanced weight of fonts\" class=\"wp-image-77919\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto-1024x519.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto-300x152.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto-768x389.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto-1536x779.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/ditto.jpg 1860w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pay attention to how the eyewear company Ditto <a href=\"https:\/\/www.ditto.com\/\" target=\"_blank\" rel=\"noopener\">balances the weight of fonts on their landing page<\/a>. The larger titles pull just enough attention away from the visuals, so you know what\u2019s happening, but not so much that it takes away from the overall design. The subtitle also uses a lighter weight, but still stands out.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"application\">3. Application Matters<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Are you deploying a print or web font? Are you using a combination of them? It matters, and it may completely alter how your design turns out.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You see, web fonts are designed from the ground up for screen reading. They tend to be sharper, more vivid and easier to read on a computer or display, such as a mobile phone. Often, they employ sans serif, although there are serif variants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Print fonts, on the other hand, were designed for use with traditional print materials such as paper, cardstock and more. They often follow a more <a href=\"https:\/\/elements.envato.com\/learn\/classic-serif-fonts\">classic appearance<\/a> and tend to be a bit heavier in weight, with more curves and wider spacing. Some look great on modern displays in their native form, while others need a few tweaks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pay attention to this trait when choosing a font and stick with something that matches the medium you\u2019re using.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"outliers\">4. Mind the Outliers<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Typically, when you choose a font, you pay the most attention to the standard content \u2014 letters, numerals and some of the more common symbols. You should never forget to preview and consider the outliers, too. These can include anything you wouldn\u2019t normally use, like symbols, ligatures, wingdings and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">More importantly, some fonts are incomplete in this regard and do not include all the necessary elements. You\u2019ll be kicking yourself if you choose a font that doesn\u2019t have something you need, only to discover it later.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"mood\">5. What\u2019s the Mood of Your Design?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Mood and tone are exceptionally important when putting your design together. You want everything to be seamless, and you want your visuals to evoke the right emotions. Are you going for a silly, more comedic approach, or do you want your design to be professional?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some of the more gimmicky fonts can look great for upbeat, personal designs, but when you get into the enterprise and business territory, it\u2019s better to stick with something bland.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/wing-tactical-1024x491.jpg\" alt=\"Wing Tactical uses strong, modern font\" class=\"wp-image-77920\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/wing-tactical-1024x491.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/wing-tactical-300x144.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/wing-tactical-768x368.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/wing-tactical.jpg 1176w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Take a look at how Wing Tactical has <a href=\"https:\/\/www.wingtactical.com\/\" target=\"_blank\" rel=\"noopener\">used their strong, modern font<\/a> to provide a more authoritative voice to their site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"audience\">6. Consider the Audience<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Who is your design for, in the end? If you\u2019re speaking to a professional and authoritative audience, it\u2019s no time to experiment and use something quirky. Serif fonts tend to look more traditional, so it\u2019s probably best to opt for one of those with a professional design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your font ties into the color and visual style you choose for your overall design, as well. Professional and enterprise sites tend to use more common, structured colors like white, black and blue. Color choice can alter the appearance of your font and design, believe it or not, because some fonts are harder to read in bright colors, and vice versa for dark colors.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"496\" src=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches-1024x496.jpg\" alt=\"Void Watches uses elegant and sophisticated style typeface\" class=\"wp-image-77921\" srcset=\"https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches-1024x496.jpg 1024w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches-300x145.jpg 300w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches-768x372.jpg 768w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches-1536x744.jpg 1536w, https:\/\/elements.envato.com\/learn\/wp-content\/uploads\/2020\/03\/void-watches.jpg 1852w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Can you imagine if Void Watches used a more colorful or cartoony typeface for their site? It would detract from the <a href=\"https:\/\/voidwatches.com\/\" target=\"_blank\" rel=\"noopener\">elegant and sophisticated style the brand exudes<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"test\">7. Test Extensively<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Most designs incorporate multiple fonts, but even when they don\u2019t, there are elements that may not mesh with your existing theme. That\u2019s why it\u2019s important to test your typefaces rigorously. If you are using more than one font, pair them together to see the result. You may find the fonts you chose don\u2019t mesh well.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll also want to test using different sizes, colors, layers and more.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"leading\">8. Check the Leading<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Leading, as you may know, is the distance between lines of type. It has a direct impact on how readable and attractive your typeface is. Bad leading, or spaces that are too big or too small, can create an ugly appearance, ruining an otherwise beautiful design. Conversely, good leading can sometimes make even bad fonts look good.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes, you can alter and set the leading using CSS, but many fonts come with pre-designated settings.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Pen Is Mightier\u2026<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">With modern web design, the age-old saying is only relevant if you choose the appropriate font and typeface for your design. This is important, especially when considering the personality, style and mood of the site you\u2019re trying to match. So long as you follow the tips discussed here, you should have no problem creating something truly unique and captivating.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typography can affect everything from capturing attention to ease of use. These guidelines can help you choose the right font for your next design.<\/p>\n","protected":false},"author":11,"featured_media":77687,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[157,168,176,163],"tags":[],"class_list":["post-70141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-trends","category-fonts","category-typography"],"acf":[],"_links":{"self":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/70141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/comments?post=70141"}],"version-history":[{"count":0,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/posts\/70141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media\/77687"}],"wp:attachment":[{"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/media?parent=70141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/categories?post=70141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elements.envato.com\/learn\/wp-json\/wp\/v2\/tags?post=70141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}