Understanding And Using Fonts

Even the smallest details matter in the design of a website. Typography is one part of this, and more thought than you may realize goes into it. From the size and weight, feelings it may convey, and effect on the responsiveness of a website, there are many considerations that go into choosing a typeface or making any other typographical decision. Each one of these things may make a big impact on your project. 

Fontgate

Still not so sure about the importance of typography? This surprising font-related scandal might change your mind. That’s right. You may not realize it, but fonts have been at the center of some very high-profile scandals over the years. Probably the most prolific of the font-related scandals of our time, this incident, dubbed “Fontgate”, occurred in 2017 and revolved around the popular font, Calibri.

In 2017, the Prime Minister of Pakistan was under investigation for corruption. His daughter released an email that was meant to prove he wasn’t guilty of the charges. That email was written in Calibri. However, the email supposedly dated from 2006 and Calibri wasn’t widely available until 2007, leading investigators to conclude the email was forged. Eventually, the Prime Minister was removed from office and sentenced to 10 years in prison. If the email that was released had only used a different font, things might have had a very different ending. 

Understanding Fonts

Luckily, the stakes are usually not quite as high when you make a typographical decision. Still, there are many important points to consider when choosing the right font for your project. After all, you want to convey the right message to your audience and all the factors discussed below are part of being able to accomplish this. 

Feeling

The first factor you may want to consider is the emotion that you want to tap into through your design. Typefaces have a psychological effect that is worth considering. Companies know this and that’s why certain choices are made for typefaces, especially in logos or other highly visible places. For example, the cursive script used for the Cadillac logo invites people to think of elegance and luxury, while the Lego logo is made up of bubble letters that feel playful and make it more appealing to children. 

The feelings evoked by a certain typeface should also be considered when designing a website or working on a similar project. Businesses usually want to convey professionalism and stability, so they might choose a well-recognized font like Calibri or Times New Roman. But more creative enterprises might want to shake things up with a font that’s edgy or modern and choose something like Valencia or Century Gothic. When deciding on a font based on the feeling it evokes, consider who your audience is as well as the way you want to present yourself. For a children’s website, you’ll want something friendly, fun, and colorful, but also easily legible. However, if picking a font for a news website, it’s best to go with a Times font or other font with serifs. 

Font Sizes and Weights

The size and weight of the font you choose may not seem like critical components in your design, but they actually are. Fonts have to work with other elements on the page to ensure everything displays correctly across all the various browser types. The line-height of your font will have a huge impact on your design and the readability of the page where it’s displayed. Also, spacing, icons, headings, images, margins, padding, and more will be impacted by the font size, so it’s not a choice that can be easily changed at a later stage in a project. You’ll want to decide on the size and weight early on. 

This is another choice for which you should consider your audience, because it’s all about the user experience. An important factor in UX design is the typographical elements of a website, especially size and weight of the fonts. If the font is too small, it will be too difficult for some people to read. While smaller fonts may be fine for some people, you do want to ensure high readability of your content for the majority of your readers. If the content of the website will attract an older audience, larger fonts will be better to ensure poorer eyesight doesn’t mean low readability. You’ll also want to think about how your audience will access your website. If a majority will come from mobile devices, readability has to be considered with the smaller screens of smartphones in mind. Again, with mobile devices, bigger is usually better. 

Responsiveness

Once you’ve made all these design choices, it’s important that the website is actually responsive enough for people to view it. Having a site that displays correctly across all browsers, including desktop and mobile, is critical is today’s competitive online marketplace. If your website doesn’t display quickly and correctly, most users will just move on to the next result in their search. So, while choosing a font that is aesthetically pleasing is important to great design, it’s also critical to have a font that doesn’t hurt performance and displays well universally. 

Custom fonts require a longer loading time because it takes extra time for the browser to load the custom font files. If using multiple custom fonts, this delay will be even greater and could significantly affect the responsiveness of the website. So, what’s the solution to this problem? Variable fonts. 

Variable fonts are a single file font that still allows for the weights of the characters to be adjusted. Using these fonts allows multiple styles to be shown on the page while the browser only has to load a single font file. This significantly reduces delays and improves responsiveness. Since not all browsers embrace variable fonts, some users may still not be able to get the full benefits. So, for these users, you’ll also want to serve non-variable fonts to these browsers. 

Applying Typography Knowledge

All users should be able to fully appreciate your website. Typography is an important part of this. By considering the feelings different typefaces may evoke, the size and weight for fonts, and the effect typographical choices have on responsiveness, your design can effectively enhance the site.