---
title: "Font atom | GoodBarber's Design System"
description: "This atom describes a font. It has a color, a type (font family) and a [size](#size) depending on the device on which it is displayed.\r\n\r\nFor more information on the use of typography in templates and text levels, see: [Foundation Font](/uxdesign/typ"
canonical_url: "https://www.goodbarber.com/uxdesign/atom-font/"
lang: nl
---

# Font atom | 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/)

# Font atom

Atomic Components

This atom describes all characteristics of a font, such as the font family, color, and size. It contributes to the legibility and visual appearance of an app.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_font.6e1438773573.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_font.6e1438773573.mp4)

![](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Font.e2b0ca8ff8d3.gif)

#### JSON

Here’s the JSON format of this object:

```
{

  "color": COLOR OBJECT,

  "desktopSize": INT, // Size of the font on desktop devices, default value is size prop

  "fontType": STRING, // Name of the font

  "size": "16", // Size of the font

  "tabletSize": "18", // Size of the font on tablet devices, default value is size prop

  "urlFont": URL // Url to download the font, optional if the font is already in the project,

  "localFont": URL // Url to download the font, used by Android platform

  "lineHeight": "1.2" // Multiplier value of line-height for the font

  "letterSpacing": "0" // Letter Spacing of the font in PX

}
```

*urlFont* & *localFont* urls are preloaded by the compiler.

#### Documentation

##### Font Level Classification

|     |                   |      |                  |
| --- | ----------------- | ---- | ---------------- |
| DH1 | Display Heading 1 | NH1  | Navbar Heading 1 |
| H1  | Heading 1         | NH2  | Navbar Heading 2 |
| H2  | Heading 2         | NH3  | Navbar Heading 3 |
| B1  | Body 1            | NB1  | Navbar Body 1    |
| B2  | Body 2            | BT1  | Button 1         |
| SB1 | Small Body 1      | BT2  | Button 1         |
| SB2 | Small Body 2      | BT3  | Button 3         |
|     |                   | SBT1 | Badges           |

##### Font Size Reference Table

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*