• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Available CSS custom properties
Globals Components Typography

Typography #

The typography globals consist of CSS custom properties, which you can use to either apply a font-family or a font value (combining font-size, line-height and font-familily) and a text-rendering setting.

text-rendering is set to geometricPrecision by default. If you run into performance issues on text-heavy pages, set the CSS custom property --ld-text-rendering to auto on the body tag.

In most cases you will probably want to simply use components though, which themselves make use of global typography CSS custom properties, such as the ld-typo component.

The list below shows you all available typography related CSS custom properties available after importing Liquid stylesheets and the effect they have on text.

Please be aware of our brand guidelines regarding typography.
For more information visit Brand Hub: Typography. Using one of the properties listed below alone does not guarantee typography as intended by the Liquid Design System. For instance, you need to combine all --ld-typo-b* and --ld-typo-xb* fonts with text-transform: uppercase;, use a color other than black and apply an aria-label in order to conform with the Liquid Design System and its accessibility requirements. The examples below have been altered accordingly.

Available CSS custom properties #