Use One Font
Believe it or not, you can do a lot with just a single font. Choose a well designed font and explore all of its weights, this works best with variable fonts. If a font you like does not have multiple weights, you could utilize colors to create contrast between headings and body text.
This manual is set in Archivo 300, 600, and 900.
Use Traditional Point Sizes
You can’t learn typography overnight. As a beginner, it could feel daunting to set up a type scale. If you are at a loss, it would be safe to utilize the set of traditional point sizes.
Remember to convert the point value to rem
when designing for the web.
Double Canon
Canon
Double Great Primer
Double English
Double Pica
Paragon
English
Pica
Small Pica
Bourgeois
| Text Style | Point Size | Rem Size |
|---|---|---|
| Display | Double Canon | 4.666 |
| Heading 1 | Canon | 3.999 |
| Heading 2 | Double Great Primer | 2.999 |
| Heading 3 | Double English | 2.333 |
| Heading 4 | Double Pica | 2.000 |
| Heading 5 | Paragon | 1.666 |
| Heading 6 | English | 1.166 |
| Body | Pica | 1.000 |
| Fine Print 1 | Small Pica | 0.916 |
| Fine Print 2 | Bourgeois | 0.750 |
Redefine Point Sizes for CJK Characters
CJK (Chinese, Japanese, Korean) characters are wildly different than Latin characters. Make sure to pick point sizes that would look good with CJK characters.
初号
小初号
一号
二号
小二号
三号
四号
小四号
五号
小五号
| Text Style | Point Size | Rem Size |
|---|---|---|
| Display | 初号 | 3.499 |
| Heading 1 | 小初号 | 2.999 |
| Heading 2 | 一号 | 2.166 |
| Heading 3 | 二号 | 1.833 |
| Heading 4 | 小二号 | 1.500 |
| Heading 5 | 三号 | 1.333 |
| Heading 6 | 四号 | 1.166 |
| Body | 小四号 | 1.000 |
| Fine Print 1 | 五号 | 0.875 |
| Fine Print 2 | 小五号 | 0.750 |
Use Serif for Italic Text
Chances are that italic sans-serif is ugly. Why? Because the style is not available for certain sans-serif fonts and you end up with forced italics. Even if it is available, it is usually poorly designed. Inspect carefully when using italic sans-serif, or substitute a serif font for italic text—it’s worth it, trust me.
Use En Dash & Em Dash
Did you know dashes have different widths?
The em dash—the long dash—is for indicating a break in the sentence. The en dash is slightly wider than the hyphen and narrower than the em dash, and it should be used for span or range of numbers. Hyphen is for hyphenation, duh!
Hang Quotes & Bullets
- Because
- text
- should
- align
to ensure the flow of reading.
When letters align with letters, text blocks are uniform. Avoid distracting the eye with indents.
Use One Space after a Period
Unless you are still using a typewriter or you still think your professor was right. Hint, you are not and they were not. Digital typefaces are designed with proper kerning. Let obsolete practices stay in the past.
Reduce Heading Spacing
Humans always look for patterns. When elements are close to each other, we consciously group them as related information.
The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.
Use Thin Space
Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.
The HTML code is  . You can go even further with Hair Space  .
Use Paragraph Indent or Paragraph Spacing, Never Both
Do you wear suspenders while you are already wearing a belt? I didn’t think so.
Don’t Use Helvetica, Inter, & Roboto
You might enjoy eating McDonald’s but you know that is not healthy for you. Pick a font that is not so ubiquitous, YOLO!