Mike Mai’s Typography

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


Double Great Primer

Double English

Double Pica




Small Pica


Type Scale with Traditional Point Sizes
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.











Type Scale with CJK Point Sizes
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 hyphen­ation, duh!

Hang Quotes & Bullets

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  .

A demo on Thin 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!