Web Typography

Web Fonts

This paragraph is using a web font call Roboto Light. It’s a little more refined and lends some unique character to the web page.

System Fonts

This paragraph is using a built-in sans-serif font, which is probably Arial or Helvetica. It’s not exactly ugly, but it’s definitely familiar.

Left Alignment

Left-aligned text is the standard because it gives the reader a vertical anchor to jump back to on every line. You should use it for most of your body text (unless you have a very good reason not to).

Center Alignment

Center-aligned text doesn’t have that anchor, so it’s easier for the eye to get lost when it tries to jump to the next line. Reserve it for special kinds of content, like poems, lyrics, and headings.

Right Alignment

Only use right-aligned text when it makes sense for the layout. For example, a caption for an image:

These letters are touching. This is called a ligature.

Of course, if you’re publishing content in a language that’s read right-to-left, that’s another story...

Justified Alignment

Justified text requires a good hyphenation engine. Without an intelligent way to split long words across lines, you get big spaces between words, which makes it harder to scan the text. Most browsers don’t have good built-in hyphenation engines.

Gothic/Blackletter

When Gutenburg invented the printing press in 1440, he wanted to mass-produce the hand-drawn caligraphy of monks. It’s hard to read if you’re not a medieval scholar, so don’t use it unless you’re really trying to recreate the middle ages.

Old Style Serif

Old style fonts were the first “modern” fonts. They’re soft, warm, and still almost feel hand-drawn. They’re built for legibility, which make them fantastic text fonts. Use them when you want to evoke the Renaissance.

Transitional Serif

Make old-style fonts less hand-drawn and chop the serifs off at right angles, and you get transitional fonts. This was the predominant font during the founding of the United States and has strong connotations with neoclassical architecture and art.

Didot Serif

Didot fonts create a stark contrast between thick vertical strokes and very thin horizontal ones. They have an air of elegance about them, which is why they’re popular fonts for luxury brands and fasion magazines. Not so great as text fonts though.

Slab Serif

Take a Didot font, make all the strokes the same width, and you get a slab serif. They’re a font created during the industrial revolution, primarly for titles, not for long runs of text.

Fat Face Serif

The industrial revolution brought about a need to advertise the resulting surplus of goods. Making slab serifs fonts really thick was a good way to stand out. You’ll also recognize fat face serifs in want-ads from the Westward Expansion in the United States.

Grotesque Sans Serif

Slab serif fonts without the serifs don’t have much character, but that makes them really versatile, right? Max Miedinger certainly thought so when he invented Helvetica in 1957.

Geometric Sans Serif

Apply Bauhaus design aesthetics to typography, and you get geometric sans serif fonts. They’re like Grotesque fonts, but have rounder forms. They’re a classically modern font for the 1940s and 50s, but they’re hard to read, making them less suitable as text fonts.

Humanist Sans Serif

Geometric sans serif fonts lost their human character, so why not add a little hint of old-style serif into a sans serif font? You get a modern font that’s easy-to-read and has enough character to stand on its own as a display font.

Display

Now that we have web fonts, the sky’s the limit with how fancy we can get with our fonts. The last decade has seen an explosion in fancy font faces, many of which are best-suited for titles. These are great for adding unique character to a website’s headings.

Monospace

Monospace fonts are a fluke of history. They were designed specifically for the technical limitations of typewriters, ignoring many of the typographic principles that make for legible text. Don’t use them unless you’re marking up code snippets.

Indents

Everything in typography is about being subtle, and styling the separation between paragraphs is no different.

Denoting a new paragraph should hardly be noticable to the reader, and first-line indents are a good way to achieve that. The first paragraph doesn’t need to be indented.

Or Margins

Spacing is the other way to set off a new paragraph. You can do this with the bottom-margin CSS property.

We find that using a bottom margin makes it a little easier to scan a web page, while indents give more of a narrative or newspaper-y feel.

But Never Both

The purpose of a first-line indent or bottom margin is to indicate to the reader that, well, you’re starting a new paragraph.

Readers aren’t stupid, and they don’t need two signs that a new paragraph is happening. That’s redundant.

Manageable Line Length

You should try to limit the length of your lines to approximately 80 characters or less. It reduces strain on the reader’s eyes, since they don’t need to move back and forth as much. It also helps prevent them from jumping to the wrong line when they get to the end of the previous line. The end result is that it’s easier for visitors to digest your content.

Don’t believe us? Try reading Wikipedia with a narrow browser window. It makes a big difference.

Not-So-Manageable Line Length

This section contains the same text as the previous one, but with a line length that always stretches to the size of the browser. It’s more difficult to read when your browser window is wide.

You should try to limit the length of your lines to approximately 80 characters or less. It reduces strain on the reader’s eyes, since they don’t need to move back and forth as much. It also helps prevent them from jumping to the wrong line when they get to the end of the previous line. The end result is that it’s easier for visitors to digest your content.

Don’t believe us? Try reading Wikipedia with a narrow browser window. It makes a big difference.

Give Your Elements Enough Room to Breath

One of the easiest ways to make your web pages look more professional is to add bigger margins or padding between everything.

By everything, we mean the space between headings, paragraphs, images, form controls, the vertical space between lines, the horizontal space between the edge of the page, and pretty much every other margin or padding you can think of.

Consistent Spacing

Using a consistent margin between headings, paragraphs, images, and other elements gives a vertical rhythm to the page. See how this button doesn’t seem to break the flow of the page?

Learn More About Typography

Consistent spacing makes your web page feel more like a cohesive whole, rather than a bunch of unrelated graphical elements.

Without Enough Space, Things Feel Messy

One of the easiest ways to make your web pages look less professional is to reduce margins or padding between everything.