- Make an adjustment to all the font size across all breakpoints
- Second recommendation
- Third recommendation
- 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 Lens system.
- Our typography is considered as large comparing our benchmark. According to this wiki page finding.
It is understandable that a website that is required to convey a large amount of message to audience will need a good typography hierarchy. Looking at the headings, the h1, h2 and h3 styles that editors can use in markdown buckets is a different size to the equivalent CMS heading tags in, for example, in a section heading, a h1 tag is 32px while a markdown-h1 is 28px.
However, there is no usage scenario where:
- Editors add markdown-h1 or markdown-h2 underneath a CMS h3 tag.
Editors add markdown-h2 underneath a CMS h2 tag
. In most cases, the headings markdown bucket sits within a section which means there is no real need to set up a different levels for both sets of headings. They are the same levels of h1, h2, h3 which sits within section heading.
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 https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align. 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, okay?
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.
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
** p.summary can be
Information that supports the discovery work.