Codebase contains several text utilites for font stacks, that are either directly coded or aliased from three default font families. These are set in the SCSS default-variables file.
Since v.5.3.0, Codebase has had three simple modern font stacks.
Default font stacks
Base font stack (sans-serif)
The HTML <body> tag has the CSS variable --font-base that sets a common sans-serif font stack. This is what most of Codebase looks like, by default.
:root {
--font-base: ui-sans-serif, system-ui, sans-serif;
}--font-base
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.
Codebase also carries a sans-serif font stack in the SCSS variable --font-sans-serif. But by default, it is aliased from --font-base – it’s the same.
Unless you change things in your design, --font-sans-serif is only available via the text utility class t-sans-serif.
Monospaced font stack
A few elements such as <code> have a monospaced font stack, --font-mono.
:root {
--font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace;
}--font-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.
Unless you change things in your design, --font-mono is only available via the text utility class t-mono.
Serif font stack
There is also a default serif --font-serif but Codebase does not apply it to any classless HTML elements.
Unless you change things in your design, --font-serif is only available via the text utility class t-serif.
:root {
--font-serif: ui-serif, Cambria, "Times New Roman", Times, serif;
}--font-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.
User interface (UI) font stack
User interface elements (form inputs, labels, buttons, etc.) have --font-ui applied, but it is aliased from --font-base.
Only when you diverge from the Codebase default, applying different font-stacks for --font-ui and --font-base, will you see a difference.
Besides HTML tags for buttons, form elements and labels, --font-ui is available via the text utility class t-ui.
Other aliased font stacks
--font-sans-serif and --font-brand are available in the default variables, but by default these are aliased to --font-base. So at the start, these look no different. They are ready for you to customize in your design.
--font-prose is also available, but by default it is aliased to --font-serif.
Unless you change things in your design, these last three font stacks are only available through using the following three text utility classes. So, they don’t add much at all to the default codebase.css payload:
t-sans-serift-brandt-prose
How the font stacks are used in Codebase
| SCSS variable | Font family (defaults) | Applied to HTML tags (classless basics) | Text utility class |
|---|---|---|---|
--font-base |
ui-sans-serif, system-ui, sans-serif |
<body> Therefore everything gets this by default. |
None. |
--font-mono |
ui-monospace, Menlo, Consolas, "Courier New", monospace |
<code> <kbd> <samp> |
t-mono |
--font-serif
| |||
--font-ui
| |||
--font-sans-serif |
Aliased from --font-base |
None | t-sans-serif |
--font-brand
| |||
--font-prose
|