Typography
Vivid defines a set of typefaces presets that are used by the components.
--vvd-typography-headline
--vvd-typography-subtitle
--vvd-typography-heading-1
--vvd-typography-heading-2
--vvd-typography-heading-3
--vvd-typography-heading-4
--vvd-typography-base
--vvd-typography-base-bold
--vvd-typography-base-code
--vvd-typography-base-condensed
--vvd-typography-base-condensed-bold
--vvd-typography-base-extended
--vvd-typography-base-extended-bold
Vivid provides an optional core typography stylesheet that applies the Vivid typography presets to HTML elements such as h1, h2, p etc. and adds utility classes (e.g. font-base) to apply the typography to any element.
All headings and p elements also receive a margin-block. Use the tight class to remove it.
Use --vvd-size-font-scale-base to define the base font size which all typefaces sizes are based on.
- Default:
'16px'
Note that when using the core typography styles with the vvd-root class set on the <html> element, the font-size is unset and the --vvd-size-font-scale-base custom property is set to '1rem' to ensure the end user's font size preferences are respected.
Set the font custom properties of your choice (or all) to override the default typography styles with your own.