Responsive Type & Typography @ Scale

designing Quahog, a government web platform for all

Illustration of a Quahog

Quahog: a Rhode Island story

A thoughtful design system:

  • Represents the State visual identity
  • Brings sophisticated, robust design
  • Uses typography to unify the system

A platform to build websites:

  • Any kind of content
  • Any content length
  • Any screen size

Repeat, then repeat again (70 times)

Design, in layers

Design, in technicolor

  • Five color themes
  • Limitless layouts
  • Dynamically updated design elements

... and one strong unifying tie

Typography

Roboto Slab (static and variable)

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

Work Sans (static and variable)

Imagine that you have before you a flagon of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine.

For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than hide the beautiful thing which it was meant to contain.

The quick brown fox

Imagine that you have...

The quick brown fox

Imagine that you have before you a flagon of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine.

The 27 quick brown foxes

Imagine that you have before you 196 flagons of wine. You may choose your own favourite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour.

Goblet cost $17.91
Wine cost (per gallon) $25.88

Performance, Access, & Accessibility

One of the biggest contributors to CLS is poorly managed font loading

(that is no excuse to ditch the fonts)

NYT screen showing poor font loading
COVID.ri.gov screen showing better font loading
COVID.ri.gov core web vitals

Why this matters

  • 1/3 of the population has no broadband
  • 2/3 of the population is on mobile
  • 100% of the population has had to access services online during the pandemic

 

Equal access is a basic civil right

  • 75% reduction in data downloads
  • 3-400% increase in page load speeds
  • 14wk average timeline for new sites
  • Accessibility is built-in from the start

 

Massive improvement to the citizen experience

By Rhode Islanders, for Rhode Islanders

  • The State has a fast, accessible, comprehensive platform
  • New sites can be created & ready for content entry in minutes
  • Color themes & layout flexibility allow for unique combinations
  • Typography & user settings create unified experience
  • Average site performance is 3-4x faster, in part due to file savings with variable fonts
Illustration of a Quahog

Resources

Illustration of a Quahog

thank you

Jason Pamental | @jpamental

Principal Designer, Chewy.com

https://noti.st/jpamental/63Cpfa