/awesome-typography

MIT LicenseMIT

Awesome Typography

Tips how to use web typography. I am a beginner and I am just learning.

Key concepts

Web typography has 3 main concepts:

  • Tone: It is the mood or feeling that your typography conveys visually, which is distinct from the tone of the content itself. Tone ranges across a spectrum from informal to formal, and you’ll want to make sure your typography sets the right tone for the message and brand.
  • Legibility: It defines how easy it is to distinguish between individual letterforms (the shapes of the letters), and is a vital consideration for setting type in user interfaces.
  • Readability: It defines how easy it is to read paragraph content. It’s determined by the font's design and your own design choices, including sizing, spacing, and color.

Font types

  • Serif: It is used for printed content. It has "terminals" (or serifs) at the end of each letter.
    • Examples: Times New Roman, Georgia, Droid Serif
  • Sans Serif: It lacks serifs. It is a standard for the web.
    • Examples: Arial, Verdana, Droid Sans
  • Monospaced: Every character takes the same width and they are often used in text editors.
    • Example: Inconsolata
  • Cursive: Cursive fonts mimic handwriting. They tend to emphasize visual interest over legibility. They are good for titles and headings.
    • Examples: Indie Flower, Great Vibes
  • Display: Display fonts tend to be either big and bold or hairline thin, and they often have highly complex letterforms.
    • Examples: Changa One

Digital typography rules

Choosing the font

Mixing fonts

Setting text

Line height

Paragraphs

  • Flush left: If you are not sure, just range left.
  • Avoid hyphenation: Hyphenation should be avoided whenever possible
  • Don't indent: Don't indent first line if the paragraph is preceded by title and subtitle
  • Captions:If text needs to be set narrow consider using condensed typeface
  • Hanging punctuation: Hang the punctuation marks outside the measure.
  • Windows and orphans: A widow is a single word or a very short line of text at the end of the paragraph. Orphan is a widow that appears on the top line of the following column or page.
  • Don't overuse word space: Shift+enter is sufficient to start a new line. Press Enter to start a new paragraph

Words

  • Kerning: If you are not experienced, don't kern manually. Kerning is manually adjusting the spacing between a pair of letters when the digital typeface itself does not do it adequately, common in letters with diagonal stroke such as W or Y
  • Tracking: When you enlarge fonts size, spacing between letters grows. When setting up large titles, it's advisable to reduce font tracking proportionally
  • Tracking versus Kerning: Tracking (letter-spacing) differs from kerning in that tracking sets a single distance between all letters, while kerning allows for custom spacing between different letters.
  • Word spacing dictates the distance between words in a sentence: The best word spacing clearly distinguishes different words without forcing the eye to travel too far between them
  • Emphasis in text: Try using a bold version of the typeface. Don't upper case.
  • Don't letter space the lower case: Letter spacing lower case hampers legibility
  • Letter space upper case: Add more letter space between capitals. Readability always benefits from more space between upper case letters.
  • Don't use all caps: Don't use all caps in text blocks longer than one line of text
  • Pass on small caps

Letters

Numbers

Constrast

Articles

Units

Font resources

Find fonts

  • Typegenius: Find the perfect font combo for your next project
  • Typekit: This service hosts and serves a vast collection of premium fonts for websites
  • Google Web Fonts: Massive collection of free fonts
  • Behance: Many designers release their font for free.
  • Dribbble: Many designers release their font for free.
  • Modular Scale: Handy tool for creating type hierarchies with a little more mathematical rigor

Courses

  • Tuts+: Course about web typography
  • HackDesign: Newsletter course about design (also about typography!)

Books

Font inspiration

Tools

Performance

CDN

References