The actual discovery work, split into clear subsections where necessary.
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 begins 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.
However, there is no usage scenario where
There are main two issues with the inconsistencies of the current typography in Typecase for Courses:
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.
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. 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.
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.
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.
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. Any However, 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.
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 ?!
- 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.
Good content should not need to use h5 or h6 for headings. If editors are required to use them for a piece of information, they might want to consider creating a new section for it. That being said, I have set the appearance of h4, h5 and h6 to be the same in case of the misuse of h5 or h6 in a markdown bucket
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 and remove the .compressed class that is used on Y2020 project. 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