• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • 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
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Available CSS custom properties
Globals Components Typography
(external link)

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 #