Skip to content

TRACKER: Audit and standardize Typekit kits across SRCCON repos (freight/sofia && tisa/sofia combos) #425

@tiffehr

Description

@tiffehr

Across OpenNews repos, we currently use multiple Adobe Typekit kits with different font families and available weights/styles. We should consolidate to two: srccon && opennews and properly optimize the two across existing repos.

Summary table

Group Kit Font Families in Kit Font-face variants (weight/style) Group Combo Match
freight-text-pro + sofia-pro mvg8obr freight-text-pro, sofia-pro freight-text-pro: 500 normal, 500 italic; sofia-pro: 400 normal, 400 italic, 500 normal, 700 normal, 700 italic Yes
freight-text-pro + sofia-pro npu3izb freight-text-pro, sofia-pro freight-text-pro: 500 normal, 500 italic, 600 normal, 700 normal, 900 normal; sofia-pro: 400 normal, 400 italic, 700 normal, 700 italic Yes
freight-text-pro + sofia-pro bmm7xbg freight-text-pro, freighttextcmp-pro freight-text-pro: 400 normal, 400 italic, 700 normal, 700 italic, 900 normal; freighttextcmp-pro: 400 normal, 400 italic, 700 normal, 700 italic Partial (has freight-text-pro, no sofia-pro, adds freighttextcmp-pro which is no longer used in our code)
tisa-* + sofia-pro clq2rji ff-tisa-web-pro, ff-tisa-sans-web-pro, sofia-pro ff-tisa-web-pro: 400 normal, 700 normal; ff-tisa-sans-web-pro: 400 normal, 700 normal; sofia-pro: 400 normal, 500 normal Yes
tisa-* + sofia-pro xnh2etj ff-tisa-web-pro, ff-tisa-sans-web-pro ff-tisa-web-pro: 400 normal, 400 italic, 700 normal, 700 italic; ff-tisa-sans-web-pro: 400 normal, 400 italic, 700 normal, 700 italic Partial (has tisa-*, no sofia-pro)

Canonical font stacks

  • SRCCON: freight-text-pro + sofia-pro --- npu3izb
  • OpenNews: tisa-* + sofia-pro --- xnh2etj

Tasks

  • update npu3izb && xnh2etj to use font-display: optional
    (Lighthouse recommends setting font-display to swap or optional; for our .css-import font-display must be configured in the TypeKit project settings)
  • add to npu3izb
    • freight-text-pro 400 normal/italic and 700 italic (opennews-website uses italics more than srccon sites)
    • sofia-pro 500 weight (sofia-pro 500 is used by CSS rules that set font-family: sofia-pro and inherit weight/style from body's 500 normal)
  • add to xnh2etj
    • sofia-pro 400 normal, 500 normal
  • republish
  • rerun Lighthouse and verify the font-display advisory is improved.

Delete

Metadata

Metadata

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions