--- title: "Typography | GoodBarber's Design System" description: "Here we will see a set of basic good practices to ensure that a text will be readable, attractive and will guide the user. We will also see how they can customize their fonts. \r\nFinally, in this section we will find a **guide to font sizes** for all" canonical_url: "https://www.goodbarber.com/uxdesign/typography/" lang: nl --- # Typography | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Typography Foundations Typography is the art of arranging type to enhance the legibility, readability, and visual appeal of written texts. It serves as a means to guide and engage readers and users. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/typography.172e1af357a6.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/typography.172e1af357a6.mp4) ## Introduction In this section of the design system, we will see a set of basic good practices to ensure that a text will be readable, attractive and will guide the user. One of the key aspects of creating readable text is selecting appropriate fonts. This can include choosing font families that are easy to read on digital screens, and selecting a range of font sizes and styles that are appropriate for different types of content and contexts. Additionally, users should be able to customize their font selection, by choosing from a variety of options and adjusting the size, weight, and spacing of the text. In addition to guidelines and best practices, this section of the design system also provide a **guide to font sizes** for different devices, such as mobile, tablet, and desktop. This include information on font sizes for different types of content, such as headings, body text, and button labels. ### Principles #### General basic rules - For easy reading, we avoid text blocks that stretch the full width of the screen, especially on **laptops** and **desktops**. - The sizes of **headings** and **body text** follow a scale **calibrated for each device** (mobile, tablet, desktop), which keeps a clear and legible hierarchy. - By default, the line spacing is a **line-height of 1.2 (120%)**. We favor a limited set of **font families**, typically **two**, a practice called **Font Pairing** that keeps an app visually consistent. This practice is called **Font Pairing**, some examples below: ![Font pairing example](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-Principles-General.84882780e7e8.gif) *Font pairing example* #### Flexibility ##### Responsiveness By default, the font size adapts automatically to the devices. We have set one size for **mobiles**, one for **tablets** and one for **wide screens** (laptop & desktop). ![Responsive fonts](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-Principles-Flexibility-Responsiveness.92d9bc54b948.gif) *Responsive fonts* ##### Preset text sizes In addition to this automatic adaptability, the user can choose between 3 preset text sizes: **Small, Medium, Large**. ![Preset fonts in 3 sizes](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-Principles-Flexibility-PresetSizes.5674bc4734a8.gif) *Preset fonts in 3 sizes* ##### Customization In addition to the font families proposed by the predefined themes and sizes, users can choose other **character families** to personalize their app. ![Font customisation](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-Principles-Flexibility-Customization.1a7ded399a56.gif) *Font customisation* ### Text levels #### Classification Here we talk about the hierarchy between the different levels of texts. In the table below: **Left column**: for content elements such as titles or body text, the text size changes depending on the device and the user’s choice. **Right column**: for interface elements (navigation, buttons etc.) the sizes vary only according to the user’s choice, not the device. Indeed, in these cases we are restricted by the size of the components themselves and to ensure a correct display in all circumstances, we must frame the size of the fonts more precisely. *Please refer to the [table](#table) at the bottom of the page to see in detail all font sizes used.* ![Responsive and fixed level of texts](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Classification.7b199b894192.png) *Responsive and fixed level of texts* #### Exemples of uses ##### DH1 - *Display heading 1* This is the largest font size. It can be found in "Headline highlight" templates and sometimes also in Detail sections, in which case it is associated with **B1**. *The examples below are taken from the templates Widget Article Highlight Une Grid (Mobile, Text Medium) and Section Form (Mobile, Text Medium)* ![Example in Article Highlight template and Form section](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-DH1.c0d8f926804d.png) *Example in Article Highlight template and Form section* ##### H1 - *Heading 1* This type of heading is used in the Detail sections, but also in the widgets and Headline lists. It is associated with **B1** and **SB1***. *The example below comes from the template Section Article List Classic Une (Mobile, Text Medium):* ![Example in a content cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-H1.e4fc5d36f8ec.png) *Example in a content cell* ##### H2 - *Heading 2* The **H2 / B2 / SB2** combination is found mainly in list widgets and list sections. *Below: Section Article List Grid (Mobile, Text Medium) and Section Chat List (Mobile, Text Medium):* ![Combination H2 / B2 / SB2 in cells of different content](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-H2.57708b73ef41.png) *Combination H2 / B2 / SB2 in cells of different content* ##### NH1 - *Navbar Heading 1* In the example below the user has chosen the largest navigation size on mobile, he can also vary the font size which will be the same for tablets and screens. ![Size of the title in a big NavBar](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-NH1.de0ec3a3311e.gif) *Size of the title in a big NavBar* ##### NH2 - *Navbar Heading 2* Here the chosen navigation size is MEDIUM: ![Size of the title in a medium NavBar](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-NH2.1fb2f86aa720.gif) *Size of the title in a medium NavBar* ##### NH3 - *Navbar Heading 3* The smallest navigation size ![Size of the title in a small NavBar](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-NH3.30e000db890b.gif) *Size of the title in a small NavBar* ⚠️ In the example above, the "cancel" and "save" actions use the classic SB1 text size that varies depending on the device. Please refer to the [table](#table) at the bottom of the page to see in detail all font sizes used. --- ##### BT1 / BT2 / BT3 - *Buttons* The user can choose between 3 button sizes. For each button size we have a different text size, but this one does not vary according to the devicesFor more information on the buttons, please refer to [Button component](/uxdesign/button/). ![Size of the button component](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-BT.67bb50b50bc6.png) *Size of the button component* ##### BT1 / BT2 / BT3 - *Others* We reuse the text sizes used for the buttons above for elements such as labels, chips, floating action button text. ![Other buttons examples](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-BT-Others.98ef512614eb.gif) *Other buttons examples* --- **The following items only exist in one size:** ##### BT1 - *Infos* Items such as the information contained in the thumbnails will be **one size** : Number of views, Distance, Duration etc. ![Label on thumbnail](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-BT3png.707a24e6f4d8.png) *Label on thumbnail* ##### SBT1 - *Badges* This is the **smallest size** used. On all devices and whatever the user has chosen, the font size of the badges will be the same. ![Badges on icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Typography-TextLevels-Examples-SBT1.15b8bf19b3d4.png) *Badges on icon* ### Font Size Reference Table As we saw, we change size according to the devices, but also according to the user's choice, except for navigation (NH1, NH2, NH3), buttons (BT1, BT2, BT3) and badges (SBT1). **The table below references all font sizes used for all templates:** *Example : B2 TM (Body 2 / Tablet / Medium text size) = 15 pt — Line spacing 18*