Before the modern web and mobile development, the world of graphic design was pretty cut and dry. With print being the dominant medium, designs (and the fonts used within them) were viewed exactly how a designer intended them to be viewed. Print gave designers full control over layouts, fonts, proportions, and format.
In the world of web and mobile design, however, things get a little trickier. There are more things for web designers to consider when creating a website or mobile app’s design, such as:
- Consistency: People view designs on different devices, screens, and browsers, so there’s a need to ensure sites and apps look the same across the board.
- Performance: File sizes of web page designs can slow the load time of a page, which can lead to higher bounce rates. If elements of a design are loaded as individual image files instead of as text, that can also increase a site’s payload.
- Resolution: Some designs and fonts don’t scale or respond well to the different screen sizes and pinch-and-zoom functionality of modern mobile browsing.
- Availability: If a designer is using a font other than a basic, web-safe font, chances are it isn’t installed on every computer out there. This means a design might have to default to a different, available font, and look different than you intended it to.
- Search engine rank: Some designers convert type into an image to ensure it displays the way they want, which can affect SEO. If more aspects of your site’s design are loaded as images/logos, they’re less readable to search engines than text, which can affect rank.
To address all of these pain points, web fonts were developed, allowing designers to use custom fonts that aren’t available on computers while still ensuring their design (and overall branding) remains consistent no matter who’s viewing it, or where.
Currently, around 65% of sites use a custom font—and using custom web fonts takes some skill to ensure. Let’s dig a little deeper into web fonts and how they work.
What are web fonts?
Computers come with standard fonts locally installed—common “web-safe” “system fonts” like Arial, Times New Roman, and Garamond. When a website or application is called upon that device using one of those system fonts, that computer recognizes it and renders it no problem. But what happens when a designer wants to create a design with a custom or lesser-known font that’s not locally installed—say, one available on Typography.com, Google Fonts, Fontsquirrel, or Adobe Typekit? If that font isn’t installed on a computer, there’s a chance it won’t display—and you’ll lose the carefully designed branding and graphic design you put into your site.
When a designer wants to use one of these custom fonts, they can use a web font—a font that doesn’t have to be installed on a computer because it’s accessible via a server where the file is hosted. From there, that font gets called up and loaded into the browser where it can be viewed how the designer intended.
Over the years, fonts have been reformatted and optimized for use on web pages, with improved compression (for smaller file sizes and faster load times) and metadata. There are four main types of web fonts to know: the first and most common, TrueType Font (TTF); Web Open Font Format (WOFF), developed specifically for use on webpages; WOFF2, with improved compression, and Embedded OpenType (EOT).
Once you have downloaded or purchased a font to use in design (some are open-source, but some require a license to use online), you can reformat it to be any of the above types of web fonts, e.g. WOFF or WOFF2. This can be done through a site that requires proof of license, then provides a font package with those formats.
All of this is coded into the site’s CSS, but it isn’t foolproof and there are a few things to consider—like browser compatibility, rendering speeds, and availability.
How do web fonts work?
All websites are styled with CSS (cascading style sheets) that tell a browser how to display all the visual elements like spacing, colors, textures, and fonts. Typically, a font is indicated with a font tag right in the CSS, so a browser knows how to treat headers and different sections of text. A designer can code CSS to have a hierarchy of fonts in the event that one font isn’t available so another one displays instead, always ending in sans-serif, shown below.
font-family: "Source Sans Pro","Helvetica Neue", sans-serif;
In this hierarchy, if a font isn’t available on a computer, the browser will default the next font in line, on and on, to the lowest-level available font on that computer, sans-serif. For example, below is the Hiring Headquarters homepage as it was designed, with Gotham Bold. If Gotham Bold isn’t available, it will appear in Gotham Light. If that font isn’t available, it will default to Helvetica, then Arial, then sans-serif.
With web fonts, which can either be hosted locally, on a third-party server or accessed through a provider like Google Fonts or Typekit, designers use a “@font-face” declaration in the CSS to call up a web font. Each font file will include all the options, from light, italic, normal, bold and extra bold, etc. and additional sets to accommodate foreign languages.
A few things to consider when using web fonts
Web fonts are great in that they can boost performance, search rank, and create brand consistency. But there are a few things to keep in mind when using this technology.
You want to indicate a fallback web safe font in your CSS. In CSS, creating a font stack will assign a font to different blocks of text, but will also indicate inheritances and backup fonts. In case a browser doesn’t support your chosen font or the font provider’s server is down, including a web-safe font in your CSS font stack will ensure your text always appears. The dreaded flash of invisible text (FOIT) can last anywhere from 3 to 30 seconds, depending on the browser, which means your site may display no text at all until the browser calls in a default font. (That’s not good for bounce rates.) The Filament Group has covered how to optimize web fonts extensively; check out this article from them to learn more about their approach to loading web fonts for faster page load times.
Not all browsers support all web fonts. Rolling the dice with which font format you choose will largely depend on your audience, and who is using which browser to view your site. You may opt for a WOFF or WOFF2 font because a majority of browsers support them, but to prevent anyone from seeing nothing at all, add in a web-safe font as well.
Pay attention to rendering speeds. Using multiple web fonts may require more HTTP requests to the server where that web font resides, and you want as few HTTP requests as possible to keep your site from running slowly. File size can also affect load times, so it’s important to only use the options listed above that you really need (whether it’s italic but not bold, etc.).
Know that third-party font hosting sites can always go down. When their servers go down, your font isn’t available—and that text won’t appear unless you have a web-safe font as a backup.
Double-check your CSS to make sure it’s correctly pathing to the font. If you’ve downloaded or purchased a font, ensure your CSS is pointing to the correct location of that font, whether it’s to a folder on your own server or through a line of JavaScript code provided by a third-party font host.
This just scratches the surface of how to use this technology but is a good thing for both designers and clients alike to know when it comes to both site design and performance. Are you a CSS programmer or designer interested in the more technical aspects of optimizing web fonts?