Typography

Function over Form

While their intelligence is (arguably) higher, bear in mind that most of your viewers' attention span is comparable to a drunk goldfish.

Ok maybe that's a slight exaggeration. It is true however that reading online is generally slower than print, and most visitors only read a fraction of the text on your web site. Most of the time they're just skimming, and are quickly turned off by large blocks of text. For all of the work that goes into a well designed web site, the amount of undivided attention you actually get from your viewers is incredibly, disappointingly, small.

Typography plays a large role in how long you retain viewers' attention. Even a subtle hinderance in the readability of text on a web site can affect viewer retention.

Text that's hard to read makes your eyes work harder, which makes your brain work harder, which often makes you give up trying to read it. Sometimes a viewer isn't even consciously aware of why they've lost interest.

Before you get too depressed, know that beautiful, delightful, readable text is entirely possible on digital mediums. It's just slightly different. Here are some things to keep in mind when choosing fonts and typesetting on the web. Many of these factors work together and should be adjusted in proportion to one another for optimal readability.

Usage and Purpose

• Readability is critical for body copy (paragraph text), so function comes over form here. Choose a font and settings that optimize for easy reading, and don't try to be too "fancy".
• You can take a lot more liberties with larger text like headings, pull quotes, short phrases, and other forms of display text. This is where you can exercise a bit more creativity.
• The serif vs sans-serif debate. Serifs on fonts are designed to help the reader's eye flow more easily from letter to letter and word to word. Historically, computer monitors haven't had enough resolution (ppi) to adequately render serifs, making them more of a hinderance than a help. For this reason, sans-serif fonts have generally been recommended for use on screen based mediums like the web. There really is no hard-and-fast rule here though. High resolution retina displays are challenging this canon, and all of these other readability factors can make serif fonts quite beautiful on screen, and perfectly usable. Design trends over the last several years have also gradually shifted toward larger base font sizes, which allows serifs to render with better detail.
• The default CSS sans-serif font on Macs is Helvetica; on Windows it's Arial.
• Monotype fonts are designed primarily for coding and applications that need a grid. Every character in a monotype font takes up the same amount of space - even punctuation. This is great for code because it helps us to see the alignment of tabbing and white space. In general, monospace fonts aren't designed for body copy.

Size

• Studies show that bigger text is often easier to read on screen, while smaller text forces readers to slow down and focus a bit more. This means that smaller text may lead to better comprehension in certain circumstances. In other words, the ideal size is not necessarily the fastest to read.
• The default font size in most browsers is 16px (12pt). This is the result of a great deal of research on monitors, resolution, average font size appearance, and reading distance. For body text, you should never dip below 13px.
• If you're choosing a font for smaller text, consider a font with a relatively large x-height. X-height is the height of the letters not including ascenders and descenders. ("k" has an ascender, "q" has a descender). A larger x-height is often easier to read when the font is being used at smaller sizes.
• Many modern fonts designed primarily for use on screens have a large x-height. Roboto, Open Sans, Inter, Manrope, and Montserrat are a few common choices in addition to web safe options like Helvetica and Arial.

Measure (Line Length)

• ~40 characters is a short, newspaper style column. It's fast to read.
• ~90 characters is on the longer end. It may be a little slower, but comprehension can improve. Be careful though. If the line is too long then the reader's eye will have trouble sweeping to the next line, which is subtly jarring and counterproductive.
• 45-75 letters per line is a good rule of thumb.

Leading (Line Height)

• The density of the text will affect how many characters fit on a line, and everything else in the balance. Keep this in mind especially with narrower fonts.
• Longer lines need more space between them. Whether you use the golden ratio, some other math, or just go by feel, you'll probably end up in close to the same distance.

Kerning/Tracking (Letter Spacing)

• For body text—again where readability is most important—you should leave the letter spacing alone. Kerning is a large part of font design, so there's rarely a reason to fix what's not broken.
• Headings and larger display text is one area where you may decide to experiment with the letter spacing. It's not uncommon to slightly condense the letter spacing on larger headings.

Contrast, Hierarchy, Paragraph Spacing

• Negative space is easily as important as the density of the text itself. This means not only the space between lines of text but also the space between paragraphs, headings and sections.
• Use white space and margins to create a clear visual hierarchy of headings, paragraphs and sections.
• Color comes back into play here for visually separating things. Judicious use of separators (lines) is sometimes helpful here too. Emphasize the important elements so readers know exactly where they are at all times.
• Most of the time you'll look to use links, emphasized text, and images where appropriate to highlight key points and phrases. This makes text much easier to skim.
• Lists are a great tool for helping the brain comprehend information in manageable chunks.

Choosing fonts and laying out type is something both beginners and seasoned typographers can struggle with. There are a lot of factors to consider here. The bottom line? Don't overthink it, especially if you're a beginner. The defaults for line height, letter spacing, etc are often fine. Don't feel boring for leaving them alone! Just read your own text. Have others read it too, with fresh eyes. If you find it difficult to read, others surely will too.

CSS Fonts: Beyond "Web Safe"

When setting fonts in CSS, there are basically two places the browser will look for the font you're telling it to use.

1. Packaged with or linked from your website.
2. On the user's computer among the fonts they already have installed.

Beyond web safe fonts, we can't count on users having any particular font installed. If we want to use a specific font that's not among the web safe options, we need to include it with our website.

This often trips up beginners. If you set a font in CSS and it's installed on your computer, it'll work! ...until you view the page on another device.

There are a few ways to add custom fonts to a web site, outlined below. All of them require the browser to download the necessary font files. You can then reference them just like you would a font that's already installed.

Try to be efficient when loading web fonts. If possible, only load the font weights you plan to use, and keep the number of font faces to as few as possible. Loading a lot of different fonts, or a lot of variations of a font, can affect your website's load time considerably.

Google Fonts

One of the easiest methods for using a custom font is to use Google Fonts.

Google hosts a large collection of royalty-free web fonts that anyone can use. The instructions are easy to follow. Once you customize the font you want to use, the site will generate a <link> tag that you simply paste in your <head> before you load your own style sheet.

Make sure that any web fonts you use get loaded before your own style sheet. Usually this just means placing the <link> tag for the font before the <link> tag to your style sheet. You don't want to reference a font before it's loaded by the browser.

<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<link rel="stylesheet" href="style/style.css">

Adobe Fonts

Adobe Fonts (formerly Adobe Typekit) is a paid service included with most Adobe CC memberships that has a huge, amazing collection of fonts. The system works similarly to Google's. You create a "project", select the font(s) you'd like to use, and copy the code snippet into your HTML. Adobe serves up the fonts on your behalf every time your site is loaded. All of the fonts are licensed for both print and web use.

@font-face

Another method you can use to load web fonts is @font-face. This is a declaration (similar to @charset) for defining custom fonts. Current instructions on the syntax are below in the footer.

This method is a little more work, and it involves hosting the font files on your web server alongside your HTML pages, images, etc.

• This is the only option if the font you want to use isn't hosted by Google or Adobe
• While regular OpenType and TrueType font files can be used, woff and woff2 formats are optimized for the best load times
• Performance of hosting fonts yourself as opposed to using a service like Google is debatable. If your server is fast, getting everything from the same source might be faster for the browser. On the other hand, Google and Adobe fonts are used on many websites, so it's possible the browser already has the font downloaded and cached, avoiding the need to download anything at all. Either way we're splitting hairs, and the number of fonts you're loading will have a much bigger impact.

Any time you plan to use a web font, regardless of where you're getting it, be sure you have the proper license to use the font on the web!