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 laying out type on a web site. Many of these factors work together and should be adjusted in proportion to one another for optimal readability.

Usage and Purpose

• Is this for titles and more about looks, or body copy where function comes absolutely first?
• Fancy looking text is great but it still has to be readable, otherwise you defeat the purpose. You can take more liberties with headings and very short phrases of text.
• The serif vs sans-serif debate. Serifs on fonts are designed to help the reader's eye flow more easily. However, lack of resolution (ppi) on screen mediums can actually make serifs more of a hinderance than a help. Sans-serif fonts are slightly more in vogue right now, and are considered more "modern". 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.
• 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. In code this helps to see the alignment of tabbing and white space.

Size

• Studies show that bigger text is often easier to read on screen, but smaller text forces readers to slow down and focus slightly, which can be better for comprehension. 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 probably shouldn't dip below 13px.
• If you're choosing a font for smaller text, think about 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 a smaller size. Many fonts designed primarily for screen usage have a large x-height.

Verdana is a really popular web safe font, but it is also widely criticized for its abnormally large x-height. Since Verdana looks big compared to other fonts at a given size, web designers often make the font size smaller to compensate, and end up with text that's too small if the font is changed or a fallback is used.

Kerning/Tracking (Letter Spacing)

• Condensing letter spacing generally makes text harder to read.
• Expanding letter spacing on larger type and all-caps makes text easier to read.
• For body text, you should generally 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.

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 general practice.

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, math, or just go by feel, you'll probably end up in close to the same range.

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 struggle with. There are a lot of factors to consider here. The bottom line? 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"

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

Try to be efficient when loading web fonts. Only load the font weights you plan to use, and keep the number of font faces to as few as possible. Too many different fonts on a web site is confusing anyway. Loading a lot of fonts, or a lot of variations of a font, can slow down your web site considerably.

Google Fonts

The easiest and best method by far 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 any web fonts you use get loaded before your own style sheet. Usually this just means placing the tags for loading the font before the tag that links to your style sheet. You don't want to reference a font before it's been defined (loaded by the browser).

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

@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 involves hosting the font files on your web site alongside your HTML pages, images, etc. Aside from occasionally finicky browser support, the disadvantage here is that you increase the number of requests the browser has to make to your server. Generally this is not a big deal, but with outside services like Google, you have the advantage of your fonts being hosted on a separate server that's ultra fast and possibly geographically closer. In other words, pointing to fonts hosted elsewhere can mean a small advantage in how fast your site loads.

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!

Adobe Fonts

Adobe Fonts is a paid service (included with certain Adobe CC memberships) that has a huge, amazing collection of fonts. The system works similarly to Google's - you include a code snippet in your HTML and 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.