Web Typography

Typography is the visual display of language in type form. Typography incorporates the design and selection of typefaces, sizes, line length, leading (line spacing), tracking (letter spacing), and kerning (the adjustment of pairs of letters) with the goal of making written language legible, readable, and aesthetically pleasing.

Typography plays an important role in crafting user experiences and promoting usability in our web designs. As you create your wireframes, consider typography in the context of your design. Here are a few resources to get you started.

Resources:

Font Repositories:

Like any creative asset, fonts need to be licensed. Some licenses cover desktop and/or web. Font repositories like Google Fonts and Adobe Edge Fonts provide access to free open source design web fonts that are available for use on your websites. On Google Fonts, you can download the font to your computer and use in your wireframe. Just remember that if you’re sharing your wireframe in native form (like XD), whoever you send the file to will also need access to the font file. While there are many different font repositories that you can use, here are three of the most popular:

Using Fonts:

There are a couple of different ways to use the fonts in your website:

  • Within the <head> section of your HTML document as <link href=”https://fonts.googleapis.com/css?family=Open+Sans” rel=”stylesheet”> (example using Open Sans)
  • Within the <style> section of your HTML document or in your CSS file as @import url(‘https://fonts.googleapis.com/css?family=Open+Sans‘);

Font Performance:

Any time you’re using web fonts, keep in mind performance considerations. Some fonts can increase your page load time. The browser downloads the font after parsing your CSS code and web text. This can result in a display lag called FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text), where the browser displays the web safe fallback font. Different browsers handle font loading differently. Check out the article Optimizing Web Fonts for Performance for additional discussion on this topic.

Web Safe Fonts:

Web safe fonts are pre-installed by most operating systems and browsers. This means that when you select one of these fonts, it will generally display in a consistent manner. As a best practice, include a web safe font as a fall back in case your primary font won’t load. Your CSS font-family property should include several font names to ensure compatibility across browsers and operating systems.

In this example, we’ve selected Times New Roman as the primary font, Times as the primary fallback, and the generic serif family as the second fallback. Select a generic family that aligns with your font type: sans serif, serif, monospace, cursive, or fantasy.

H1 { font-family: "Times New Roman", Times, serif; }