Creating A Design System: Design System Typography

The next part of the system that affects all the other parts is typography. Not only do you have decide which typefaces will become a standard, but also you have to build a consistent scale, which is going to build a predictable information architecture across the product portfolio.

Choose the approved typefaces

Build a consistent typescale

There are different approaches to building a typographic scale (read more). You can optimize the scale to serve existing styles, or you might try to build a harmonious scale using the golden ratio or major second. Ultimately though your goal is to build a scale that will be implemented and will fix the existing and future inconsistencies. When building the scale, don’t forget that you’re not only setting the size of the font, but also weight, line-height and other properties.

  • Organize what you have in a consistent scale
  • Eliminate unnecessary styles
  • Name every step in a scale in a clear and concise manner.
Typographic scale
Our final typographic scale.

If you’re using CSS preprocessors, build Mixins generating text styles

Mixins (in Sass, LESS) can be a terrific tool for managing the typographic scale and generating the right styles in code.

Test the new typographic scale against the text styles in the inventory

Test whether you covered all the existing styles. You should either match, replace or merge existing styles, so the new scale can be implemented across the UI without leaving any text-styles outside of the scale.

Implement the new typographic scale palette in CSS (consider using a preprocessor and building mixins) on a test server

Build a test environment for the new scale.

Test how the new typographic scale affects the interface

Check how the new scale affected the UI. Is everything easily readable? Are all the text styles covered by the new scale? Does the new scale reinforce the right information architecture?

Present the new typographic scale and the UI affected by the scale to all the product designers

Invite product designers to test the interface and suggest changes to the scale

Just like in the case of the color palette - involve product designers in the process. Invite them to review the scale and the UI affected by it. Ask them for feedback.

Finalize the typographic scale

After gathering the feedback, testing and iterating on the scale - finalize it, make part of your design systems documentation and communicate it to the company.

if you’re using mixins, make sure that names of mixins are documented in the documentation of the design system.

Deliver the new typographic scale to the tools used by product designers

Make sure that the scale is reflected in design tools used by your team (UXPin, Sketch….). I used UXPin’s Design System Libraries to save all the text scales for use in Sketch and UXPin.