- 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
- Set CMS headings and markdown headings the same size
- Create a new typeset to implement in our selected components and slowly work our way through all the components
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.
There are main two issues from the current typography:
- On course pages, editors often misuse markdown headings because the inconsistent size between CMS headings and markdown headings.
- Same font size between markdown h3, strong paragraph and regular paragraph
As a result, markdown headings and CMS headings should be semantical. This will decrease the number of headings in our heading modular scale, which will solve issue b.
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.15. 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 and h1 while using 150% for smaller headings and 170% for body-copy. On mobile body copy, I use 175% to give readers more white space for long paragraph.
Can you summarise that, please ?!
note : Although, on a large breakpoint h1 size is smaller than the Secction-heading, editors should not use h1 below section-heading as screenreaders will pick them both up by h1 tag.
Let's see them in action, shall we?
1. Small breakpoint
2. Large breakpoint
How should we implement this then?
Our current typography has been set with a typeset function. To implement the new typography set, we can simply start off by creating a new typeset and use them in our selected components. This way will help us control where the font size has been changed. We can, later on, implement the new typeset across all of our components. Once that is done we can safely remove the old typeset that is no longer used anywhere else.
I have also made an excel to help me calculate this typeset as well. Hopefully, it can wrap things up in one small place for you.
- 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