Skip to content

Instantly share code, notes, and snippets.

@paleite

paleite/general-typography-cheatsheet.md

Created June 26, 2023 10:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paleite/f130a360a152f3b1fc2b994d3e3ef904 to your computer and use it in GitHub Desktop.
Save paleite/f130a360a152f3b1fc2b994d3e3ef904 to your computer and use it in GitHub Desktop.
Download ZIP
General Typograph Cheatsheet
Raw
general-typography-cheatsheet.md

General Typography Cheatsheet

Body Text (p tag, li tag)

  • Default style: Font size of 16px, font weight of 400 (normal), line height of 1.5, and a letter spacing of normal.

Subheadings (h2, h3 tag)

  • Default style: Font size of 24px for h2 and 20px for h3, font weight of 600 (semi-bold), line height of 1.4, and a letter spacing of normal.

Main Headings (<h1> tag)

  • Default style: Font size of 32px, font weight of 700 (bold), line height of 1.2, and a letter spacing of normal.

General Guidelines

  • Text meant for reading (body text, paragraphs, etc.) should be between 15-25px, typically around 16px.
  • Line height (leading) should typically be about 1.5 times the font size for body text to ensure good readability.
  • Use font weight to create hierarchy and guide the reader's eye. Body text should typically be normal (400), subheadings semi-bold (600), and headings bold (700).
  • Letter spacing (kerning) can vary, but 'normal' is a good default for most text. Increasing letter spacing can improve legibility for uppercase and small text.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment