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.
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.
