Typography

Font stacks

Carbon contains several text utilites for font stacks, that are either directly coded or aliased from three default font families. These are set in our custom properties.

--c6-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--c6-font-family-serif: ui-serif, serif;
--c6-font-family-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;

Default font stacks

Base font stack (sans-serif)

The HTML <body> tag has --c6-font-family-base that aliases --c6-font-family-sans, a common sans-serif font stack. This is what most of Carbon looks like, by default.

--c6-font-family-sans

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif

--c6-font-family-sans is also available via the utility class font-sans.

Monospaced font stack

A few elements such as <code> have a monospaced font stack, --c6-font-family-mono.

--c6-font-family-mono

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace

--c6-font-family-mono is also available via the utility class font-mono.

Serif font stack

There is also a default serif --c6-font-family-serif but we don't (yet) apply it to any classless HTML elements.

--c6-font-family-serif

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim. Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

--c6-font-family-serif is also available via the utility class font-serif.

ui-serif, serif

User interface (UI) font stack

User interface elements (form inputs, labels, buttons, etc.) have --c6-font-family-sans applied, but it is aliased from --c6-font-family-base.

Other aliased font stacks

--c6-font-family-prose is also available, but by default it is aliased to --c6-font-family-serif.