Skip to content

Instantly share code, notes, and snippets.

@scottkellum

scottkellum/intrinsic-typography-survey.md

Last active November 14, 2020 03:31
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 scottkellum/63c9b2cdfc3bb1fae157f6ace4576721 to your computer and use it in GitHub Desktop.
Save scottkellum/63c9b2cdfc3bb1fae157f6ace4576721 to your computer and use it in GitHub Desktop.
Download ZIP
Intrinsic typography survey.
Raw
intrinsic-typography-survey.md

Website typography audit

Typetura saves you time and money while giving you more typography and layout control. A survey of leading news sites estimated a reduction in typographic styles by 90% while increasing design flexibility.

Calculations and estimates

These are estimates. Typetura styles were estimated by counting the number of text components on the website overall, not just the home page. About 5 styles added in in case of any oversight, more on typographicly rich websites. Multiply that by 3, as each style will need a high and low style for the intrinsic interpolation along with a set of fallback styles. The end result is rounded up again.

To get percentages, the estimated number of Typetura styles is compared to the number of font-size and other text styling declarations in the stylesheet, and the percentage is derrived from that. Note that all declarations within media queries and specific component styles can be deleted, this is where the savings come from.

Bloomberg

Fonts

Font families:

  • 2x — Avenir Next (1x for variable fonts)
  • 3x — BW Haas Grotesk (1x for variable fonts)
  • 1x — Publico Headline

Variable fonts would save about 40% on font load

Type styles

  • 518 font size declarations
  • 247 line height declarations
  • 6 letter spacing declarations

Typetura can cut these numbers by about 91% by moving to a use case first type system, increasing efficiency, and consolidating context based typography into a single style.

  • 45 font size declarations
  • 20 line height declarations
  • 13 letter spacing declarations

Vox

Fonts

Font families:

  • 2x — Balto (1x for variable fonts)
  • 2x — Harriet (1x for variable fonts)

Variable fonts would save about 25% on font load

Type styles

  • 712 font size declarations
  • 270 line height declarations
  • 159 letter spacing declarations

Typetura can cut these numbers by about 92% by moving to a use case first type system and consolidating context based typography into a single style.

  • 60 font size declarations
  • 20 line height declarations
  • 13 letter spacing declarations

Buzzfeed

Fonts

  • 3x — ProximaNova (1x for variable fonts)

Variable fonts would save about 55% on font load

Type styles

  • 132 font size declarations
  • 78 line height declarations
  • 9 letter spacing declarations

Typetura can cut these numbers by about 70% by moving to a use case first type system and consolidating context based typography into a single style.

  • 40 font size declarations
  • 10 line height declarations
  • 6 letter spacing declarations
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment