- Make an adjustment to all the font sizes across all breakpoints
- Use a modular scale to define the font size to make sure that they harmoniously work together
- Change the base font size for small and medium breakpoints to 16px
- Change the base font size for large breakpoints to 18px
- Set the CMS (system defined) headings and markdown headings to the same size across each heading size
- Create a new typeset to implement in our selected components, and slowly work our way through all the components
There are many factors to consider before changing the typography set-up 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 begin 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 compared to our benchmark. According to the findings of this wiki page..
2. Unused headings
It is understandable that a website which is required to convey frequent and varied messages to mixed audiences, will need a good typography hierarchy. Looking at the headings we have, the h1, h2 and h3 styles that editors can use in markdown buckets is a different size to the equivalent CMS heading tags. For example, when examining a section heading on the small breakpoint of a course page, the h1 tag is 32px while a markdown h1 tag is 28px.
There are main two issues with the inconsistencies of the current typography in Typecase for Courses:
Editors often misuse markdown headings because of the inconsistent size between CMS headings and markdown headings.
- Markdown h3 text, a <strong> paragraph and a regular paragraph all currently have the same font size.
As a result, markdown headings and CMS headings should be semantic. This will decrease the number of headings in our heading modular scale, which will solve issue b.
3. The famous ratio scaling (myth)
Lots of research and discussion went into the current typography system. Several meaningful ratios have been used i.e. music, history, geometry and nature. The most famous ratios being used are pi (π) and the golden ratio 1:1.618. Although, these can work very well with some font families they don't necessarily work with all. We need to remind ourselves that although you may 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 maths to support the design theory, shall we?
If you are wondering, "how anyone could use ratios to create a typography system that would be harmoniously proportional to each other and the content?"
Well, a ratio can form a modular scale if put into a sequence of numbers. A 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 chose to tweak the Major Second scale from 1.125 to 1.15. This will allow us to use the same harmonious ratio 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 have a larger percentage than large text, otherwise the smaller text can seem a lot more cramped together.
I chose 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 have used 175% to give readers more white space, for long paragraphs.
Can you summarise that, please ?!
Note: Setting the h1 tag to the same size as section heading will make it clearer to editors that h1 should not be used underneath a section heading.
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 will help us to control where the font size is changed to integrate the change gradually. 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 used an Excel spreadsheet to help me to calculate this typeset as well. Hopefully, it can wrap things up in one small place for you.
- The 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