Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

TitleDiscovery title
GoalThe discovery goal
Pivotal story


  1. Make an adjustment to all the font size across all breakpoints
  2. Second recommendation
  3. Third recommendation
  4. And so on...


The actual discovery work, split into clear subsections where necessary.

There are many factors involved in typography set up decision making. i.e. Modular scale, line height, letter spacing, breakpoints, lead paragraph or p.summary in our system and even implementation. This page will unfold the processes I took to finalise the recommendation for our Lens Design System typography.

Before we begins looking at the recommended solution, let's try to understand why we need to make changes to our current system. 

First thing we want to look at is to bench mark with the others to see if we are really being a bit large on our typography? Here is out finding: 

Secondly, we want to look at proposing some new set of typography that would still work well with out live pages but at the same time a lot smaller for the ease to read. 

According to a several typography decisions in the past, there has be a lot of research put into it, Several meaningful ratios have been rooted in geometry, music, history, and nature through time. One such ratio is the famous proportion of 1:1.618. However, every single font family has various height even if we give the same font height : Different font-families, same font-size, give various heights As a result, we need to take in consideration of these details specifically for each project and for each font family. 

The good thing is we have got variety of direct and indirect users behaviours that can help us make a better judgement on it, we realised our font sizes are too large for our direct user's devices and the font hierarchy mysterious for our indirect users - CMS editor users. 

Issue with direct users

issue with indirect users 

Let's try to do some Math to help my design eyes make more sense? 

What is modular scale?

Have you heard about the so-called golden ratio or golden mean? In ancient Greek philosophy, it was also known as the golden middle and was representing the desirable middle between two extremes.

Several meaningful ratios have been rooted in geometry, music, history, and nature through time. One such ratio is the famous proportion of 1:1.618.

If put into a sequence of numbers, ratios can form a modular scale. So, basically, a modular scale is a series of numbers that are harmoniously proportional to each other.

Using a modular scale on the web means choosing numbers from the scale for font sizes, line height, line length, margins, column widths, and more. Thus, modular scales are most effective when the inputs are relevant for the given project’s design and messaging.

Line height!

140% for heading as Aim for about 140%-180% for optimal readability and accessibility. Any smaller and the text will be cramped and difficult to read. Go much larger and the eye can get lost.

150% for body as Small fonts need more spacing. Line spacing as a % should actually increase with

proposed fonts 

** p.summary can be 


Information that supports the discovery work.

  • No labels