Improve typography of the Design system
The content in our design system should be presented in the best way possible. Reading, scanning, searching for a keyword should be as easy as possible. The guidelines and the documentation that comes with the components should be presented in a form that is attractive and easy-to-read, instead of it looking like a generic wiki or documentation page where content seems dry and hard to get through.
An improved typography can help with that and separate our design system from others when it comes to the visual presentation of text. Right now, our content looks like this:
Paragraphs that are too wide and feel spaced out, text that is too small for a laptop screen, headings that come with lines below them and add to the visual noise on the page... and the following:
This seems like lots of content to get through even though it's nicely distributed into separate paragraphs, bulleted lists and sections. The two headings at the top both have the line below them and when they're together like that, they seem to clash.
The line length is far too long at the moment, there are up to 130 characters per line which is way above the 55 - 75 recommended range. The line height is 28px
and seems to be actually set in pixels in CSS. Transforming the line-height to a ratio (line-height in pixels / font size in pixels) results in 28 / 16 = 1.75 which is too much for body text (usually up to 1.5). The bold is set to font-weight: 600;
which is a semi-bold weight and doesn't exist for Arial (Windows) which probably results in a faux bold style on Windows devices. Font sizes are set in pixels which overwrites user preferences if they set them on their browser (this can be a serious accessibility issue). Headings are too far away from the content below them and seem completely detached from the content that they're referring to.
In the example below I tried to fix most of these things:
- Font size increased to 18px
- line-height remains 28 so the ratio is 1.55 with the new font size
- the paragraphs max-width is limited so that around 80-85 characters fit in one line (still above the recommended range but much better)
- the borders below the headings are removed but I would argue that the visual hierarchy is improved
- the spacing below the headings is reduced to 8px only so it's clear which headings and paragraphs belong together
Another example:
Figures and tables stand out from the text content and gain in prominence on the page. That's good because most of the time it's what people look for.
Another example:
The same page as before but the content seems easier to consume, it doesn't look daunting or dry.
We could even introduce an 'intro' paragraph style that immediately grabs the attention of the reader:
Because of limited line length we could, later on, introduce in-page local navigation for pages that have lots of content and subheadings:
Recommended changes
- increase font size on larger screen sizes
- limit the line length so that 80-85 characters fit per line
- stop using pixels for defining font sizes and line height (we should use REM and ratios instead)
- change the way the headings are presented
- possibly remove the borders below them
- reduce the spacing below them so it results in 8px between a heading and the content below it
- use
font-weight: 700
for the bold style (will prevent faux bold font style on certain OS
Questions:
- Are these text styles used elsewhere? (Markdown)