The typography globals consist of CSS custom properties, which you can use to either apply a
font-family or a
font value (combining
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
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.
Note: 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
text-transform: uppercase;, use a color other than black and apply an
aria-labelin order to conform with the Liquid Design System and its accessibility requirements.