Design Concept: Typography

[arcticicestudio]

This issue documents Nord typography design concept and serves as a plan for the initial launch.
It defines the process steps to decide about all typography aspects like the font face, base sizes, usage within components/themes and the modular scale(s).

All implementation details and requirements are documented and tracked in the corresponding issues:

• Typefaces #54 “Typefaces”

🚧 This is a living document which means it is work in progress, not completed yet and will be extended!

Font Face

To achieve a uniform design across Nord and its brand the main font face and font stack will be friendly and warm for visual elements while being simple and allow users to stay focused on the actual content, e.g. documentations or blog posts.
All fonts that will be used are open source like Nord itself.

Stylistic & Visualization

The main stylistic and visualization sans-serif type will be Rubik. With its slightly rounded corners it conveys a smooth appearance which matches the overall design of Nord visual elements. Nunito was also a possible choice, but Rubik provides a bit more strength due to its thicker glyphs which improves the mode of expression and the better recognizability.

Clear & Factual

For documentations, technical and factual content a more straight and clear font will be used. This led to the brilliant open source font family Inter UI, a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.

The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

The font is well designed and thought out to provide a consistent and clear typographic feel.

Other types in the shortlist that were considered as font families:

• Nunito Sans ‒ a well balanced typeface superfamily arose from Nunito.
• Roboto ‒ a well-designed and widely used font by Google used by Android which provides a kind of mechanical skeleton with largely geometric forms while also being friendly with open curves.

Monospace & Code

The main mono spaced type will be Source Code Pro. It is also a well-designed and popular font proven to be easy-on-the-eyes with slightly rounded glyphs while keeping a good feeling of a consistent and uniform character baseline with a balanced spacing.

Font Sizes

In order to provide easy legibility, without the need to zoom or increase the font size manually, the browser's default root font size of 16px will be kept, but the main font size will be scaled to 18px using the modular scale factor like documented in the section below. All other values will be calculated based on this size using the rem and em units. There are some exceptions where the px unit will be used, e.g. small and static sizes.

Modular Scale

The modular scale that Nord Docs will use is “major second”. It stands for a ratio of 1.125. There will only be one base of 1em which depends on the used root HTML font size of 16px.

Resources

Thanks to Google Design for their great and well-written Typography Library. Good starting points are the articles “Choosing Web Fonts: A Beginner’s Guide” and “Space Mono's Retro-Future Voice”.
Not to forget the awesome Google Fonts library to crawl through for inspirations.

Another fantastic information and inspiration origin is Material Design. It provides an extensive knowledge base for almost all details for UI and web design. Their Material Studies also makes use of the Rubik font within the Shrine and Owl studies.

The Inter UI font family website provides a great interactive collection of samples to see how the font works in production and also a lab to test various font settings and features.