Fundamentals – typography By Frederick Brummer

In traditional graphic design, content and format are crucial inputs that inform the process. By contrast, digital design typically starts without these inputs and therefore requires a systems approach to accommodate a wide range of possible content and formats.

In order to take a systems approach to graphic design, it’s extremely useful to leverage typography. It can be argued that all UI design is based on text. Because typography deals with the optimal design and display of text, it plays a critical role in defining the underlying structure for any design system.

Design is typography

• Text is the primary mode of communication in UI design, with other elements serving to support or enhance the text.
• Text is often the first thing users interact with on a page or screen, making it crucial for establishing the tone and purpose of the design.
• Text can be used to guide users through the UI and provide feedback on their actions.
• Even when non-text elements like color, imagery, or decoration are used, they should be used in service of the text.
• Typography provides the underlying structure and organization for UI design.
• The legibility and readability of text is crucial for ensuring that the design is accessible to all users.

How to leverage typography in UI design?

1. Define a type scale. To maintain consistency throughout your designs, establish a type scale by defining a consistent set of type sizes and weights to use. A type scale is especially effective when it limits the number of sizes used, typically to just one or two sizes in design best practices. However, in web and UI design, it may be necessary to use a few more sizes, though fewer is generally better. In practice, I tend to use about five different type sizes at max.
2. Responsive dynamics in type scales. When designing type scales for digital interfaces, it’s important to consider how the scale will respond to different screen sizes and viewports. The dynamic range of a type scale refers to the difference between the smallest and largest font sizes used within the scale. On small viewports, such as those found on mobile devices, the dynamic range is typically more limited due to constraints on legibility and readability. For example, the WCAG standard sets a minimum font size of 16px for accessible content, and fitting more than a word or two per line may require a maximum font size of around 24px. As a result, the dynamic range for mobile interfaces may be around 1.5, calculated by dividing the largest font size by the smallest. It’s important to design type scales that can adapt and maintain legibility across a range of viewports and device types. This means that the dynamic range of your system needs to be defined responsively.
3. Use a baseline grid. This is part of the type scale, but it’s worth calling out: a baseline grid ensures consistent layout and greatly simplifies both the act of design and of development.
4. Typographically defined layout. As mentioned above, design is for text. This means that when working on layout – that is, deciding the size and location of different elements on the page – it is crucial to keep the dimensions and behaviour of text in mind.
5. Use a layout grid. I’m recommending 20 columns. For reasons which are good.