Typography. Design System • Yellow

∴​​​​​​​ 30 days of Design System • Yellow ∴​​​​​​​ Day 2 ∴

Just let me share with you my vision of some of the key parts of DS·Y.

Today it's a Typography section.

Main font

The project uses one main font. If necessary, you can add a second additional font. The ideal combination would be to use two different fonts for headings and body text. Right now it's Inter. Inter is a variable font family carefully crafted & designed for computer screens.

Font name

The project uses a conditionally independent type of naming of components and fonts in particular. List of names in ascending order of their option value:

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

....

The is no link between SEO title and the visual title size. The text style demonstrates only a visual hierarchy of content.

Line height

To place content in a 4 px grid, a font line height that is a multiple of 4 is used.

Font grid

REMs provide a more flexible and accessible browsing experience compared to pixels. It allows users to change their default browser font size, and all font sizes will scale accordingly based on the root font size. This sizing chart illustrates font size only. Has nothing to do with SEO!

Title

For greater flexibility, we use separate types of titles for the mobile and desktop. By default the mobile version titles use a grid with one step back compared to the desktop version.

Text

The font size for text doesn’t change and remains the same for mobile and desktop versions.

You can find Design System • Yellow file in Figma here 👉 https://www.figma.com/community/file/1312130033201614801/design-system-yellow

I would love to hear your feedback.

Please share your thoughts with me.