Skip to content

Instantly share code, notes, and snippets.

@jlr7245
Last active May 26, 2017 14:37
Show Gist options
  • Save jlr7245/c6be2ab910b3036da0a511da96230ee3 to your computer and use it in GitHub Desktop.
Save jlr7245/c6be2ab910b3036da0a511da96230ee3 to your computer and use it in GitHub Desktop.

Web Typography 101

Objectives

  1. Go over how to convert, download, & host your own fonts
  2. Using CSS to make type easier to read
    • The concept of the font stack
    • Serif, sans-serif, cursive, fantasy, monospace
    • Letter-spacing
    • Large fonts in featured places
    • Type and imagery
  3. What is typogrpahy, anyway?
  4. Type Choice 101
    • Choosing typefaces and using them judiciously (mixing serif and sans-serif)
    • Font pairing
    • How to match serifs and sans-serifs
    • When to use decorative fonts & how to choose them judiciously
  5. Some typography examples
    • Healthify vs Northport Nutrition (voice)

What is typography?

At the most basic explanation - typography is the design and use of typefaces as a means of communication.

  • Here is a good article: What is typography?
  • A particularly good part: "Look at each block of text as though it had no words in it. What shapes does the text make on the page? Make sure those shapes carry the entire page design forward."
  • At its base, typography is a way to get across information on the page. But, it's also a design element of the page. The type you choose communicates the design of your product just as much as imagery, color choice, wording, etc.

Type Choice 101

Grid

Print layouts influence web type, as many early designers came from print and started designing for web. Many sites still use the grid layout.

newspaper block

newspaper page

baseline

This is sort of where grid systems like bootstrap and so on came from -- designing in a grid is natural and efficient for typograpers handling presses that are set up for it. Example site

In some ways the web is moving towards a more postmodern understanding of the grid. Instead of saying, "Oh, here is a page, here is the grid we use to arrange the page", the thought process is more along the lines of "Here are elements in a configuration that is assembled and reassembled as needed to account for different screen sizes."

postmodern grid

Describing the web as "an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment." from fantastic article The Web's Grain

Anyway, this is all getting a little abstract.

Scale

One of the ways to manage the grid is with type scales. The most common type scale is 48, 36, 24, 21, 18, 16, 14 -- non-linear.

Pairing 101

Adapted from this article

  • Provides contrast & emphasis without having to add additional elements or change colors & so on
  • Gives options for bdoy & headline depending on what's more appropriate for the situation
  • The tried & tested concept for this is to pick a serif font and a sans-serif font, since pairing those two is easier.
  • Dangers of picking two serifs or two sans -- take a look at adobe lists
  • example one, example two, example three

Anatomy of a Typeface

Here is a detailed resource.

Anatomy of a Typeface

Codepen link

Pairing 201

  • Pairing more than two typefaces
  • go into healthify type choices & the roles for each -- consistency in font roles
  • Creating a visual language for information hierarcy so a viewer can see at a glance what's going on
  • Making sure fonts have similar characteristics -- same x-height, etc. -- even if they have very different looks & feels.
  • Here are some great examples: example one, example 2,
  • Sometimes it can work when there's just one typeface: example one, example two, example three

When to use or not use decorative fonts

  • Decorative fonts should only be used for emphasis when necessary.
  • Show profilepro example
  • But sometimes sites can use decorative type and it fits the voice. For example: http://enchantments.guide/

Talk some about voice in typography here!

third health site

Accessibility

dyslexic friendly typeface

chrome extension

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment