Something like 95% of the web is text and yet most web developers don't pay any heed whatsoever to typography -- it's this mysterious esoteric subject reserved for designer geeks and their lattes. You are not "most web developers" so perk up!

Typography is important. It affects everything from the overall visual hierarchy to how effectively the user can consume content. Especially if you've got a content-heavy site, your users' experience will be significantly impacted by the typographical decisions you make.

Typography can also get pretty technical and is littered with jargon like "kerning" and "ligatures" and "cap height". You don't necessarily need to memorize these things but you should gain an appreciation for why they matter.

Your most important takeaways from this lesson should be an understanding of the high level reasons for choosing one font over another and how modifying things like the space between lines or font weights can affect the overall legibility of your site.

First, to get an appreciation of the importance of typography, read The Web Is all About Typography, Period. by Oliver Reichenstein.

The Basics of Typography

It's been said best by others -- Read Typography Basics for Developers by Rachel Shillcock.

For more resources, see the Resources tab.

Vertical Rhythm

"Vertical Rhythm" is the idea that, as you're consuming a long piece of text, you will find it easiest if it allows your eye to scan smoothly downward by using a particular spacing between lines which is related to the height of the text.

Read Improving Layout with Vertical Rhythm by Rachel Shillcock to learn more about it.

Best Practices

Luckily, after a few decades of trying, people have figured out some best practices regarding typography and creating readable text:

Font

1. Serif fonts are typically more formal than sans-serif. You can often use one for headlines and another for content to achieve contrast.
2. Don't go overboard just because you found a great-seeming font out there on the web -- for the most part, this is another one of those situations where it's best to stick with known fonts (like Helvetica, Open Sans, Times New Roman, Arial, Georgia, Lato etc.) until you've got a good reason to stray. And don't touch Comic Sans :)

Size

1. The best size for long sections of web text is usually around 16px -- or even as large as 20px. It may feel a bit large compared to a book but the average distance people view computer screens from is further than they would with a normal book.
2. The optimal number of characters to fit onto a line before breaking to the next line is 55-75, or roughly 65.
3. Size and weight are the first things after graphics that we look at for differentiation in the hierarchy -- make sure different headline priorities (e.g. H1, H2, H3 if you know HTML) are all different sizes and weights. Headlines are usually about 2.5x the size of the body fonts and bolded.
4. Scales are popular for determining font size relationships -- starting with body text and then scaling up to top level headlines, the Fibonacci scale sizes at 16, 24, 40, 64, and 104 pixels.
5. Line heights are usually 1.5x the font size.

Color

1. DON'T put large sections of light text against dark backgrounds
2. DO use dark gray (e.g. #333) instead of black for text on a white background to avoid the sharpness of contrast.
3. DON'T make text too light or users with imperfect eyesight will find it impossible to read.

Inspiration

Sometimes the best way to "get" typography is to experience it when you've got your eyes open -- Read 20 Websites With Beautiful Typography by Kevin Liew via Queness.

Another good way to learn typography on the web is to start asking questions of the websites that are out there -- and the Chrome "WhatFont" addon is perfect for this. Install the Chrome WhatFont Addon. Just activate it and click on a section of the page to see the font family that was used and its characteristics. Tuck away the ones you love in a document somewhere for a rainy day.

Takeaways

• As said above, try to understand the high level reasons for making decisions about typography while avoiding the minute details.
• Expanding the line spacing to build a specific rhythm can increase legibility.
• Increasing or decreasing font size and weight affects visual hierarchy.
• Fonts have personalities that are subtly created by the composition of their letters and spacings and so make sure the tone fits the situation. Just copy fonts from websites that use them effectively when you first start out, then figure out WHY these font selections are so effective.
• Open your eyes -- you won't "get" typography right away but, as long as you start to notice it, you'll gradually absorb what you need to.

• A 20 Minute Introduction to Typography Basics (it gets bit jargon-y towards the end)
• Web Typography provides elements of typographic style as they should be applied to the web.
• A Glossary of Typography Terms from CreativeBloq

On the Web

For those who are already familiar with HTML and CSS:

• Typographic Design Patterns and Best Practices from Smashing Magazine
• Dont Fear Web Typography from Don't Fear the Internet
• Typography from Shay Howe
• A Beginner's Guide to Using Google Web Fonts
• Google Web Fonts

Sorry, comments aren't active just yet!