0.03 Design Guide: Typography

The James and Anne Duderstadt Center/x-DESIGN GUIDE FOR EDITORS/0.03 Design Guide: Typography

Text: Sizing

CSS permits font sizing to be expressed in multiple measurements:

  • pixels
  • point sizes (as in desktop publishing)
  • rem – are computed values based on the height of the “root element” – the root element typically means the default font size specified in the site’s theme. In the DC site, the theme is named “Renovation” and the default text size is 16 pixels.
  • percentages (written as %) are also computed based also on the default font size – same as the rem above

The value of computed sizes (% and rem) are that when text is rendered by changes in the theme, CSS settings, or the browser rendering, text sizes change proportionately, preserving the relative sizes of the fonts displayed .

As of 2020.10.01, In the DC site we’ll use the “Default” text size, also shown as “Normal,” for most information in the DC site.

On the DC site: default font size, also called “Normal” = 16 pixels = 12 points = 1 rem = 100% CSS

Standard Paragraph Block Settings

Other text size selections in the right-hand column under: Block > Paragraph > Typography > Preset Size convert to:

  • Small: 13 px = 10 pt
  • Normal (Default): 16px = 12 pt
  • Medium: 20px =14.5 pt
  • Large: 36px = 27pt
  • Huge: 48px = 36 pt

You can set custom sizes too, but you have to reset it for every new paragraph.

Note: Pixels x 0.75 = Points. Points x 1.33 = Pixels
Here is handy conversion table.

You cannot mix type sizes in a Paragraph block, but…

Classic Paragraph Block Settings

You can mix type sizes (and styles) in a single paragraph using the “Classic Paragraph” block.” NOTE: CP uses point sizes to scale text (not pixels “px”). All-in-all it works more like a word processor environment. Here are the available CP selections and equivalents in pixels:

  • 8pt = 11px
  • 10Pt = 13px
  • 12Pt = 16px
  • 14pt = 19px
  • 18pt = 24px
  • 24pt = 32px
  • 36pt = 48px

Text on a Background

There are both standard readability success criteria and accessibility considerations for text that appears either on solid or image/pattern backgrounds. See this section on Readability and Contrast Notes.