- Make an adjustment to all the font size across all breakpoints
- Use modular scale to define the font size to make sure they harmoniously work together
- Change base font size for small and medium breakpoints to 16px
- Change base font size for large breakpoints to 18px
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.
Why do we need to change?
Before we begins looking at the recommended solution, let's try to understand why we need to make changes to our Lens system.
1. Large typography
Our typography is considered as large comparing our benchmark. According to this wiki page finding.
2. Unused headings
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.
The usage scenarios are (in Actual Usage column)
- CMS h1, h2, h3 sit underneath section heading
- markdown bucket sits underneath section heading
- markdown-h3 sits underneath CMS h2 tag.
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
As a result, it is safe to set markdown h1,h2,h3 the same size as CMS h1, h2, h3 tags. This will help allow heading ration scaling spread wider in smaller heading range.
3. Famous ratio scaling (myth)
Many research and discussion were included in the typography system, several meaningful ratios have been used i.e. music, history, geometry and nature. A few of the most famous ratios being used includes pi and golden ratio 1:1.618. Although, these could work very well with some font family but not all. We need to remind ourselves that although you programmatically set up two different font families with the same height, you would still get different outcomes. That is because each font size has their own height. As a result, it is very much down to personal judgement of what ratio to use for each font family.
So.. what to do next?
1. Let's use some Math to support the design theory, shall we?
If you are wondering, so how could anyone used some ration to create a typography system that would harmoniously proportional to each other and the content then?
Well, a ratio can form a modular scale if put into a sequence of numbers. Modular scale is a series of numbers that are harmoniously proportional to each other. However, as I stated before not all the famous ratios work straight away. Therefore, I choose to tweak the Major Second scale from 1.125 to 1.12. This will allow us to use the same harmonious ration scale across all our breakpoints.
2. What is line height?
Line height is simply the white space between lines. We should aim to use about 140%-180% for optimal readability and accessibility. However, smaller text should be have a large percentage than large text as they can be seen a lot of more cramped together.
I choose to use 140% for large font sizes including, page-headings and section headings. I am using 150% for our body copy.
Let's see what you have explained, please ?!
- Tool I used to help me calculate the ratio: Archetype
- Five simple steps to better typography - Part 4
- Deep dive CSS: font metrics, line-height and vertical-align