Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply consistent typography #3

jeddy3 opened this issue Jan 20, 2018 · 2 comments


2 participants
Copy link

commented Jan 20, 2018

As a user of the design system
I want to know what typography to use
So that there is a consistent experience across sites


Typography is a key aspect of creating a consistent experience. There are some considerations when developing a typographic system, some of which are specific to typography on the web:

  • Performance: fonts (and weights) eat into the performance budget. The aim to strike a balance between brand and performance. One option is to use the system font for body text and a custom font (in a single weight) for display text.
  • Accessibility: certain fonts styles and weights can be difficult to read. Contrast is important in typography, as is the font size.
  • Intuitive and easier to master (and document) e.g. consistent baseline, and sizing based on a scale.

Links and resources

Acceptance Criteria

  • Document the typographic system

@jeddy3 jeddy3 added the type: story label Jan 20, 2018


This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2018

@kelliewellingtons I think you said you were going to tackle #2 and #1 on Monday? I've created this issue now so it's on your radar for then. I looked at the transformation website on my phone over the weekend and I found the body text difficult to read (and I have good vision). It also felt slow to load, and I suspect the number of font weights and styles has some part to play in that.

@jeddy3 jeddy3 added this to In progress in Board Feb 8, 2018

@jeddy3 jeddy3 changed the title Site author can learn how to apply consistent typography Apply consistent typography Feb 8, 2018

@jeddy3 jeddy3 closed this in #22 Feb 13, 2018

Board automation moved this from In progress to Done Feb 13, 2018

@kelliedesigner kelliedesigner referenced this issue Nov 20, 2018


Update typeface using open source fonts #414

2 of 2 tasks complete

This comment has been minimized.

Copy link
Contributor Author

commented Jan 12, 2019

Findings from prototypr:

There are several that work well for web UI because of the flow between type levels. The Major Third, Major Second or Perfect Fourth scales can be a good place to start...

Pixels are for designers, don’t use them to define a web app type scale.
A REM is a unit of typography equal to the root font-size. This means 1rem is always equal to the font-size defined in the . Therefore, creating a scale based on a base rem (I will explain more later) will define the entire harmonious scale for the web UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.