PSI Software SE Design Library

Typography

Component: Typography

Missing font in Figma

The italic variants of the “Noto Serif” font used in the Design Library unfortunately cannot be directly selected in Figma, although they are part of the Google Fonts library. To use the fonts in Figma, they must be installed locally (see also Access local fonts on your computer).

The required font files are located under /01-base/typography/static/Noto-Serif.zip (Download font files).

<!-- Default -->



<!-- Documentation only -->
<section class="doc-section">

    <h2 class="doc-section-title">Schriftfamilien</h2>

    <div class="doc-fonts">

        <div class="doc-fonts-list">

            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Noto Serif Regular
                </div>

                <div class="doc-fonts-item-description">

                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: 'Noto Serif'; font-weight: 400; font-style: normal;">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Noto Serif Italic
                </div>

                <div class="doc-fonts-item-description">

                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: 'Noto Serif'; font-weight: 400; font-style: italic;">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>

        </div>

    </div>
    <div class="doc-fonts">

        <div class="doc-fonts-list">

            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Noto Sans Bold
                </div>

                <div class="doc-fonts-item-description">

                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: 'Noto Sans'; font-weight: 700; font-style: normal;">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Noto Sans SemiBold
                </div>

                <div class="doc-fonts-item-description">

                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: 'Noto Sans'; font-weight: 600; font-style: normal;">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Noto Sans Regular
                </div>

                <div class="doc-fonts-item-description">

                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: 'Noto Sans'; font-weight: 400; font-style: normal;">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>

        </div>

    </div>

</section>

<section class="doc-section">

    <h2 class="doc-section-title">Schriftgrößen und -Zeilenabstände</h2>

    <div class="doc-notes">

        <p>Alle Schriftgrößen werden basierend auf einer Basisschriftgröße (in rem) definiert:</p>

        <ul>
            <li>Basisschriftgröße Desktop: 18 Pixel</li>
            <li>Basisschriftgröße Mobile: 16 Pixel</li>
        </ul>

    </div>

    <div class="doc-fonts">

        <div class="doc-fonts-list">

            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 6X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 65px/1.08
                    Mobile: 36px/1.08
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-6x-large, 65px); line-height: var(--lh-6x-large, 1.08); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 5X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 54px/1.15
                    Mobile: 32px/1.16
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-5x-large, 54px); line-height: var(--lh-5x-large, 1.15); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 4X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 45px/1.22
                    Mobile: 29px/1.24
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-4x-large, 45px); line-height: var(--lh-4x-large, 1.22); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 3X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 38px/1.26
                    Mobile: 26px/1.31
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-3x-large, 38px); line-height: var(--lh-3x-large, 1.26); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 2X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 32px/1.38
                    Mobile: 23px/1.39
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-2x-large, 32px); line-height: var(--lh-2x-large, 1.38); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe X-Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 26px/1.46
                    Mobile: 20px/1.45
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-largest, 26px); line-height: var(--lh-largest, 1.46); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe Large
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 22px/1.55
                    Mobile: 18px/1.5
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-large, 22px); line-height: var(--lh-large, 1.55); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe Medium
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 18px/1.61
                    Mobile: 16px/1.63
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs, 18px); line-height: var(--lh, 1.61); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe Small
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 16px/1.56
                    Mobile: 14px/1.57
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-small, 16px); line-height: var(--lh-small, 1.56); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe X-Small
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 14px/1.57
                    Mobile: 12px/1.67
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-smallest, 14px); line-height: var(--lh-smallest, 1.57); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    Größe 2X-Small
                </div>

                <div class="doc-fonts-item-description">
                    Desktop: 12px/1.58
                    Mobile: 11px/1.64
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-size: var(--fs-2x-small, 12px); line-height: var(--lh-2x-small, 1.58); max-height: 3.1lh; overflow: hidden;">
                        Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.

                    </div>
                </div>

            </div>

        </div>

    </div>

</section>


<!-- Default -->


<!-- Documentation only -->
{{#errorMessage}}
<div class="doc-notes is-error">
    {{{.}}}
</div>
    {{/errorMessage}}

    {{#font-families}}
<section class="doc-section">

    {{#title}}<h2 class="doc-section-title">{{{.}}}</h2>{{/title}}

        {{#items}}
    <div class="doc-fonts">

        <div class="doc-fonts-list">

                {{#font-faces}}
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    {{{label}}}
                </div>

                <div class="doc-fonts-item-description">
                    {{{description}}}
                </div>

                <div class="doc-fonts-item-specimen">
                    <div style="font-family: '{{font-family}}'; font-weight: {{font-weight}};{{#font-style}} font-style: {{.}};{{/font-style}}">Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich!</div>
                </div>

            </div>
                {{/font-faces}}

        </div>

    </div>
        {{/items}}

</section>
    {{/font-families}}

    {{#text-sizes}}
<section class="doc-section">

    {{#title}}<h2 class="doc-section-title">{{{.}}}</h2>{{/title}}

        {{#if root-sizes}}
    <div class="doc-notes">

        <p>Alle Schriftgrößen werden basierend auf einer Basisschriftgröße (in rem) definiert:</p>

        <ul>
                {{#root-sizes}}
            <li>Basisschriftgröße {{{label}}}: {{{value}}} Pixel</li>
                {{/root-sizes}}
        </ul>

    </div>
        {{/if}}

    <div class="doc-fonts">

        <div class="doc-fonts-list">

                {{#sizes}}
            <div class="doc-fonts-list-item">

                <div class="doc-fonts-item-label">
                    {{#title}}Größe {{{.}}}{{/title}}
                </div>

                    {{#description}}
                <div class="doc-fonts-item-description">
                    {{{.}}}
                </div>
                    {{/description}}
                    {{#if values}}
                <div class="doc-fonts-item-description">
                    {{#each values}}
                        {{@key}}: {{{this.font-size}}}{{#this.line-height}}/{{{.}}}{{/this.line-height}}
                    {{/each}}
                </div>
                    {{/if}}

                <div class="doc-fonts-item-specimen">
                    <div style="{{#if properties}}{{#with properties}}{{#font-size}}font-size: {{.}};{{/font-size}}{{#line-height}} line-height: {{.}};{{/line-height}}{{/with}}{{else}}font-size: {{font-size}}; line-height: {{line-height}};{{/if}} max-height: 3.1lh; overflow: hidden;">
                        {{render '@snippet--lorem-ipsum'}}
                    </div>
                </div>

            </div>
                {{/sizes}}

        </div>

    </div>

</section>
    {{/text-sizes}}
 
/* Default */
{
  "font-families": {
    "title": "Schriftfamilien",
    "items": [
      {
        "label": "Noto Serif",
        "font-faces": [
          {
            "label": "Noto Serif Regular",
            "font-family": "Noto Serif",
            "font-weight": "400",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Serif Italic",
            "font-family": "Noto Serif",
            "font-weight": "400",
            "description": null,
            "font-style": "italic"
          }
        ]
      },
      {
        "label": "Noto Sans",
        "font-faces": [
          {
            "label": "Noto Sans Bold",
            "font-family": "Noto Sans",
            "font-weight": "700",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Sans SemiBold",
            "font-family": "Noto Sans",
            "font-weight": "600",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Sans Regular",
            "font-family": "Noto Sans",
            "font-weight": "400",
            "description": null,
            "font-style": "normal"
          }
        ]
      }
    ]
  },
  "text-sizes": {
    "title": "Schriftgrößen und -Zeilenabstände",
    "root-sizes": [
      {
        "label": "Desktop",
        "value": 18
      },
      {
        "label": "Mobile",
        "value": 16
      }
    ],
    "sizes": [
      {
        "title": "6X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-6x-large, 65px)",
          "line-height": "var(--lh-6x-large, 1.08)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "65px",
            "line-height": 1.08
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "36px",
            "line-height": 1.08
          }
        }
      },
      {
        "title": "5X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-5x-large, 54px)",
          "line-height": "var(--lh-5x-large, 1.15)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "54px",
            "line-height": 1.15
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "32px",
            "line-height": 1.16
          }
        }
      },
      {
        "title": "4X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-4x-large, 45px)",
          "line-height": "var(--lh-4x-large, 1.22)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "45px",
            "line-height": 1.22
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "29px",
            "line-height": 1.24
          }
        }
      },
      {
        "title": "3X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-3x-large, 38px)",
          "line-height": "var(--lh-3x-large, 1.26)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "38px",
            "line-height": 1.26
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "26px",
            "line-height": 1.31
          }
        }
      },
      {
        "title": "2X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-2x-large, 32px)",
          "line-height": "var(--lh-2x-large, 1.38)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "32px",
            "line-height": 1.38
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "23px",
            "line-height": 1.39
          }
        }
      },
      {
        "title": "X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-largest, 26px)",
          "line-height": "var(--lh-largest, 1.46)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "26px",
            "line-height": 1.46
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "20px",
            "line-height": 1.45
          }
        }
      },
      {
        "title": "Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-large, 22px)",
          "line-height": "var(--lh-large, 1.55)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "22px",
            "line-height": 1.55
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "18px",
            "line-height": 1.5
          }
        }
      },
      {
        "title": "Medium",
        "description": null,
        "properties": {
          "font-size": "var(--fs, 18px)",
          "line-height": "var(--lh, 1.61)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "18px",
            "line-height": 1.61
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "16px",
            "line-height": 1.63
          }
        }
      },
      {
        "title": "Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-small, 16px)",
          "line-height": "var(--lh-small, 1.56)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "16px",
            "line-height": 1.56
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "14px",
            "line-height": 1.57
          }
        }
      },
      {
        "title": "X-Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-smallest, 14px)",
          "line-height": "var(--lh-smallest, 1.57)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "14px",
            "line-height": 1.57
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "12px",
            "line-height": 1.67
          }
        }
      },
      {
        "title": "2X-Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-2x-small, 12px)",
          "line-height": "var(--lh-2x-small, 1.58)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "12px",
            "line-height": 1.58
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "11px",
            "line-height": 1.64
          }
        }
      }
    ]
  }
}


/* Documentation only */
{
  "font-families": {
    "title": "Schriftfamilien",
    "items": [
      {
        "label": "Noto Serif",
        "font-faces": [
          {
            "label": "Noto Serif Regular",
            "font-family": "Noto Serif",
            "font-weight": "400",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Serif Italic",
            "font-family": "Noto Serif",
            "font-weight": "400",
            "description": null,
            "font-style": "italic"
          }
        ]
      },
      {
        "label": "Noto Sans",
        "font-faces": [
          {
            "label": "Noto Sans Bold",
            "font-family": "Noto Sans",
            "font-weight": "700",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Sans SemiBold",
            "font-family": "Noto Sans",
            "font-weight": "600",
            "description": null,
            "font-style": "normal"
          },
          {
            "label": "Noto Sans Regular",
            "font-family": "Noto Sans",
            "font-weight": "400",
            "description": null,
            "font-style": "normal"
          }
        ]
      }
    ]
  },
  "text-sizes": {
    "title": "Schriftgrößen und -Zeilenabstände",
    "root-sizes": [
      {
        "label": "Desktop",
        "value": 18
      },
      {
        "label": "Mobile",
        "value": 16
      }
    ],
    "sizes": [
      {
        "title": "6X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-6x-large, 65px)",
          "line-height": "var(--lh-6x-large, 1.08)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "65px",
            "line-height": 1.08
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "36px",
            "line-height": 1.08
          }
        }
      },
      {
        "title": "5X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-5x-large, 54px)",
          "line-height": "var(--lh-5x-large, 1.15)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "54px",
            "line-height": 1.15
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "32px",
            "line-height": 1.16
          }
        }
      },
      {
        "title": "4X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-4x-large, 45px)",
          "line-height": "var(--lh-4x-large, 1.22)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "45px",
            "line-height": 1.22
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "29px",
            "line-height": 1.24
          }
        }
      },
      {
        "title": "3X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-3x-large, 38px)",
          "line-height": "var(--lh-3x-large, 1.26)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "38px",
            "line-height": 1.26
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "26px",
            "line-height": 1.31
          }
        }
      },
      {
        "title": "2X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-2x-large, 32px)",
          "line-height": "var(--lh-2x-large, 1.38)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "32px",
            "line-height": 1.38
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "23px",
            "line-height": 1.39
          }
        }
      },
      {
        "title": "X-Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-largest, 26px)",
          "line-height": "var(--lh-largest, 1.46)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "26px",
            "line-height": 1.46
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "20px",
            "line-height": 1.45
          }
        }
      },
      {
        "title": "Large",
        "description": null,
        "properties": {
          "font-size": "var(--fs-large, 22px)",
          "line-height": "var(--lh-large, 1.55)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "22px",
            "line-height": 1.55
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "18px",
            "line-height": 1.5
          }
        }
      },
      {
        "title": "Medium",
        "description": null,
        "properties": {
          "font-size": "var(--fs, 18px)",
          "line-height": "var(--lh, 1.61)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "18px",
            "line-height": 1.61
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "16px",
            "line-height": 1.63
          }
        }
      },
      {
        "title": "Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-small, 16px)",
          "line-height": "var(--lh-small, 1.56)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "16px",
            "line-height": 1.56
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "14px",
            "line-height": 1.57
          }
        }
      },
      {
        "title": "X-Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-smallest, 14px)",
          "line-height": "var(--lh-smallest, 1.57)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "14px",
            "line-height": 1.57
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "12px",
            "line-height": 1.67
          }
        }
      },
      {
        "title": "2X-Small",
        "description": null,
        "properties": {
          "font-size": "var(--fs-2x-small, 12px)",
          "line-height": "var(--lh-2x-small, 1.58)"
        },
        "values": {
          "Desktop": {
            "device": "Desktop",
            "font-size": "12px",
            "line-height": 1.58
          },
          "Mobile": {
            "device": "Mobile",
            "font-size": "11px",
            "line-height": 1.64
          }
        }
      }
    ]
  }
}
  • Content: 
    @mixin font-size(
    $variant: default,
    $property: font-size,
    $factor: 1,
    $sizes: $_font-sizes
){

    @include responsive-variable(
        $variant: $variant,
        $property: $property,
        $factor: $factor,
        $variables: $sizes,
        $prefix: "--fs",
    );

}

@function get-static-font-size(
    $variant: "",
){

    @return get-static-value(
        $variant: $variant,
        $variables: $_font-sizes,
    );

}

@mixin line-height(
    $variant: default,
    $property: line-height,
    $factor: 1,
    $sizes: $_line-heights
){

    @include responsive-variable(
        $variant: $variant,
        $property: $property,
        $factor: $factor,
        $variables: $sizes,
        $prefix: "--lh",
    );

}

@function get-static-line-height(
    $variant: "",
){

    @return get-static-value(
        $variant: $variant,
        $variables: $_line-heights,
    );

}

@mixin text-size(
    $variant: default,
    $factor: 1,
) {

    @include font-size(
        $variant: $variant,
        $factor: 1,
    );

    @include line-height(
        $variant: $variant,
        $factor: 1,
    );

}

@mixin font-face(
    $font-face
){

    @font-face {
        font-family: map.get($font-face, font-family);

        @include font-files(
            map.get($font-face, font-file),
            $root: map.get($font-face, root)
        );

        font-weight: map.get($font-face, font-weight);
        font-style: map.get($font-face, font-style);
    }

}

@mixin font-faces(
    $font-faces: $_font-faces
){

    // Convert single item into list
    @if meta.type-of($font-faces) == map {
        $font-faces: ($font-faces, );
    }

    @each $font-face in $font-faces {
        @include font-face($font-face);
    }


}

@mixin font-files(
    $name,
    $root: $_font-faces_root,
    $formats: $_font-faces_formats,
){
    $sources: "";

    $formats_include_eot: false;

    @if string.slice($root, -1) != "/" {
        $root: $root + "/";
    }

    @each $format in $formats {

        $suffix: $format;

        @if ($format == "eot"){
            $formats_include_eot: true;

            $suffix: "#{$suffix}?#iefix";
            $format: "embedded-opentype";
        }

        $source: url("#{$root}#{$name}.#{$suffix}") format("#{$format}");

        @if ($sources == ""){
            $sources: $source;
        } @else {
            $sources: $sources, $source;
        }

    }

    @if ($formats_include_eot) {
        src: url("#{$root}#{$name}.eot");
    }

    src: $sources;

}

@mixin special-font-smoothing(
    $thin: true
){

    @if ($thin){
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    } @else {
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
    }

}

@mixin hide-text(){
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}

@function add-fallback-fonts(
    $styles: (),
    $fallback: $_font-family_fallback,
) {

    @if map.get($styles, font-family) == null {
        @return $styles;
    }

    @return map.merge(
        $styles,
        (
            font-family: #{map.get($styles, font-family), $fallback}
        )
    );

}
  • URL: /components/raw/typography/_typography.helpers.scss
  • Filesystem Path: components/01-base/typography/_typography.helpers.scss
  • Size: 3.2 KB
  • Content: 
    $_font-faces_root: "../fonts/" !default;
$_font-faces_formats: "ttf", "woff", "woff2" !default;

$_font-faces: (
    (
        font-family: "Noto Sans",
        font-file: "noto-sans-v36-latin+latin-ext-regular",
        root: "#{$_font-faces_root}noto-sans-v36-latin+latin-ext/",
        font-weight: 400,
        font-style: normal
    ),
    (
        font-family: "Noto Sans",
        font-file: "noto-sans-v36-latin+latin-ext-600",
        root: "#{$_font-faces_root}noto-sans-v36-latin+latin-ext/",
        font-weight: 600,
        font-style: normal
    ),
    (
        font-family: "Noto Sans",
        font-file: "noto-sans-v36-latin+latin-ext-700",
        root: "#{$_font-faces_root}noto-sans-v36-latin+latin-ext/",
        font-weight: 700,
        font-style: normal
    ),
    (
        font-family: "Noto Serif",
        font-file: "noto-serif-v23-latin+latin-ext-regular",
        root: "#{$_font-faces_root}noto-serif-v23-latin+latin-ext/",
        font-weight: 400,
        font-style: normal
    ),
    (
        font-family: "Noto Serif",
        font-file: "noto-serif-v23-latin+latin-ext-italic",
        root: "#{$_font-faces_root}noto-serif-v23-latin+latin-ext/",
        font-weight: 400,
        font-style: italic
    ),
) !default;

$_font-family_fallback: 'SF UI Text', 'Segoe UI Symbol', Helvetica, Arial, sans-serif !default;
$_font-family_fallback--secondary: Georgia, "Times New Roman", Times, serif !default;

$_font-family: 'Noto Sans', #{$_font-family_fallback} !default;
$_font-family--secondary: 'Noto Serif', #{$_font-family_fallback--secondary} !default;

$_font-weight--semibold: 600 !default;

@import "_typography.helpers";
@import "_typography.settings";
@import "_typography.styles";

sup,
sub {
    font-size: calc(0.5em + 4px);
    font-weight: bolder;
}

sub {
    vertical-align: baseline;
    position: relative;
    top: .25em;
}
  • URL: /components/raw/typography/_typography.scss
  • Filesystem Path: components/01-base/typography/_typography.scss
  • Size: 1.9 KB
  • Content: 
    $_root-font-size: 18px !default;
$_root-font-size__mobile: 16px !default;

$_font-size: 1rem !default;
$_line-height: 1.5 !default;

$_font-size--large: 1.2rem !default;
$_line-height--large: 1.4 !default;

$_font-size--largest: 1.4rem !default;
$_line-height--largest: $_line-height--large !default;

$_font-size--small: .875rem !default;
$_line-height--small: $_line-height !default;

$_font-size--smallest: .75rem !default;
$_line-height--smallest: $_line-height--small !default;

$_font-size--mobile: 1rem !default;
$_line-height--mobile: $_line-height !default;

$_font-size--large--mobile: $_font-size--large !default;
$_line-height--large--mobile: $_line-height !default;

$_font-size--largest--mobile: $_font-size--largest !default;
$_line-height--largest--mobile: $_line-height--large--mobile !default;

$_font-size--small--mobile: $_font-size--small !default;
$_line-height--small--mobile: $_line-height !default;

$_font-size--smallest--mobile: $_font-size--smallest !default;
$_line-height--smallest--mobile: $_line-height--small--mobile !default;

$_root-font-sizes: (
    default: $_font-size,
    mobile: $_font-size--mobile,
) !default;

$_font-sizes: (
    default: (
        default: 1rem,
        smallest: $_font-size--smallest,
        small: $_font-size--small,
        large: $_font-size--large,
        largest: $_font-size--largest,
    ),
    mobile: (
        default: 1rem,
        smallest: $_font-size--smallest--mobile,
        small: $_font-size--small--mobile,
        large: $_font-size--large--mobile,
        largest: $_font-size--largest--mobile,
    ),
) !default;

$_line-heights: (
    default: (
        default: $_line-height,
        smallest: $_line-height--smallest,
        small: $_line-height--small,
        large: $_line-height--large,
        largest: $_line-height--largest,
    ),
    mobile: (
        default: $_line-height--mobile,
        smallest: $_line-height--smallest--mobile,
        small: $_line-height--small--mobile,
        large: $_line-height--large--mobile,
        largest: $_line-height--largest--mobile,
    ),
) !default;

    // Font-faces

$_font-faces_root: "../fonts/" !default;
$_font-faces_formats: "ttf", "woff", "woff2" !default;

//* $_font-faces: (
//*   List of font-faces to be imported.
//*   Every entry have to be a map with the following keys:
//*   (
//*       font-family: "Comic Sans",
//*       font-file: "comic-sans",
//*       root: "#{$_font-faces_root}",
//*       font-weight: 400,
//*       font-style: normal
//*   ),
//* ) !default;

$_font-faces: (
) !default;

$_font-family_fallback: 'SF UI Text', 'Segoe Ul Symbol', Helvetica, Arial, sans-serif !default;
$_font-family: 'Helvetica Neue', #{$_font-family_fallback} !default;

$_font-weight: 400 !default;
$_font-weight--bold: 700 !default;
  • URL: /components/raw/typography/_typography.settings.scss
  • Filesystem Path: components/01-base/typography/_typography.settings.scss
  • Size: 2.8 KB
  • Content: 
    @include font-faces($_font-faces);

:root {

    & {
        @include responsive-variables(
            $set: $_font-sizes,
            $prefix: --fs
        );
    }

    & {
        @include responsive-variables(
            $set: $_line-heights,
            $prefix: --lh
        );
    }

}

:root,
html {
    font-family: $_font-family;

    font-size: rem($_base-font-size, 16px);
    line-height: $_line-height;

    font-weight: $_font-weight;

    @include special-font-smoothing();

    @include not-on-desktop() {
        font-size: rem($_base-font-size--mobile, 16px);
        line-height: $_line-height--mobile;
    }

}

body {
    font-size: 1rem;
}

// Misc

p,
li {
    text-wrap: pretty;
}

%strong {
    font-weight: $_font-weight--bold;
}

.strong {
    @extend %strong;
}

%sup {
    font-size: .5em;
    vertical-align: super;
}

.sup {
    @extend %sup;
}

// Helper classes

.nowrap {
    white-space: nowrap;
}
  • URL: /components/raw/typography/_typography.styles.scss
  • Filesystem Path: components/01-base/typography/_typography.styles.scss
  • Size: 936 Bytes