Public Sans
A free and open source neutral sans-serif typeface, released as part of version two of the design system for the US federal government.
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.
The lessons learned make for good design principles:
- Talk to the people
- Look for duplication of efforts
- Know your values
- Empower your team
- Start small and iterate
- Don’t work in a vacuum
- Reuse and specialize
- Promote your system
- Be flexible
Related links
A Cohesive & Unified Identity for British Government — Paul Robert Lloyd
In search of typographical consistency in government departments.
What’s new in web typography? | Clagnut by Richard Rutter
There have been so many advances in HTML, CSS and browser support over the past few years. These are enabling phenomenal creativity and refinement in web typography, and I’ve got a mere 28 minutes to tell you all about it.
I’ve been talking to Rich about his Web Day Out talk, and let me tell you, you don’t want to miss it!
It’s gonna be a wild ride! Join me at Web Day Out in Brighton on 12 March 2026. Use JOIN_RICH to get 10% off and you’ll also get a free online ticket for State of the Browser.
Don’t judge a book by its cover
Some neat CSS from Tess that’s a great example of progressive enhancement; these book covers look good in all browsers, but they look even better in some.
Responsive Letter Spacing – Cloud Four
Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.
Related posts
CSS snippets
Some styles I re-use when I’m programming with CSS.
Composability in design systems
There’s probably a Pace Layer analogy in here somewhere.
Decision time
Balancing the ledger.
Performative performance
When it comes to sustainable web design, the hard work is invisible.
Declarative design systems
Is your design system really a system …or is it more like a collection of components?