Typography

Rules for readability.

At first glance, it seems like a dry discipline, filled with rather boring rules about line-widths and parargraph spacings.

But the effect that a simple font change can have is oft-underrated, and the first step in my process usually involves finding one that fits the vibe of the project. The idea that good typography should be “invisible” is a flawed one.

In moments of doubt, I simply return to the question: “does this look like I want it to?”.

General rules

There’s nothing stopping from laying text carelessly across a screen, but . Rules are meant to be broken, but only when there’s good reason to.

1. Point size for body text should be 10–12 points in printed documents, 15-25 pixels on the web.
2. Line spacing should be 120–150% of the point size. I default to 1.5em for paragraphs.
3. The average line length should be 45–90 characters (including spaces). In CSS, this is approximately 38rem.
4. Put only one space between sentences.
5. Never choose Times New Roman or Arial, as those fonts are favored only by the apathetic and sloppy.
6. Don’t use Lorem Ipsum to typeset a page, it makes it impossible to gauge whether a paragraph of text is easy to read or not.

Useful Font Collections

There are thousands of fonts out there,

Type on the Web

Specify your character encoding

You ought to read Joel’s post about Unicode and character sets. But if you choose not to, you still ought to add <meta charset="utf-8"/> tags to all your webpages.

Because Firefox and Safari both have their encoding set to “Default”, not UTF-8. For some users, their default encoding is Western, that is, ISO-8859-1, which renders the characters differently. The most common consequence of this is apostrophes rendering as random symbols, such as “é «”, “’”, “—, and more.

Kerning and spacing

https://css-tricks.com/methods-controlling-spacing-web-typography/

Fluid type

https://set.studio/some-simple-ways-to-make-content-look-good/

Further Reading