Skip to main content

Codebase 6 Typography

Font stacks

A few native font stacks are set in the root-vars.css file.

:root {
  --t-sans: ui-sans-serif, sans-serif;
  --t-serif: ui-serif, serif;
  --t-mono: ui-monospace, monospace;

  --t-base-ff: var(--t-sans);
  --hd-ff: inherit; /* headings */
  --t-form-ff: inherit;
}

Everything here is an example, a place to start. Your own --base and --prose don’t need to be both sans-serif and serif.

Font stack usage in Codebase:

  • The --t-sans font stack is set in the <body> tag (via --t-base-ff) and is inherited on forms (via --t-form-ff) and headings (via --hd-ff), so that you can override and set a different typefaces if you prefer.
  • The --t-serif font stack is only available via the t-prose utility class. But you can employ it directly on your <article> tag, or wherever you need.
  • The --t-mono font stack is available via the <code>, <kbd>, and <samp> HTML tags, and in the t-mono utility class.

Base font size

The default font size in Codebase is 100% for small viewports. This sets the value of 1rem—that is 16px on most browsers (in 2025).

:root {
  --t-base-fs: 100%;
}

Typographic block elements

All typographic block elements have zero top margin, and a bottom margin of var(--t-mb) (which is 1rem by default). This includes paragraphs, headings, blockquotes, lists, and definition lists.

Headings

Heading sizes are set using the classic typographic scale (but set in em, not pt or px). The font size for h6 and utility class .h6 is not increased by this scale (remains the same as the base font size).

Example headings (using heading-size utility classes):

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

:root {
  --h1: 2.5em;
  --h2: 1.875em;
  --h3: 1.5em;
  --h4: 1.25em;
  --h5: 1.125em;
  --h6: 1em;
}

All headings <h1> to <h6> and matching heading size utility classes h1 to h6 have:

  • Headings font sizes set in the variables file (see above).
  • Heading-size utility classes h1 to h6 are available for use on any element, e.g. <div class="h1">. These utilities only affect font-size. They do not include margin or font-weight styling.
  • Headings font family set using --h-ff: inherit. This has been done so that you can use the variable to override it — your headings don’t need to be the same typeface as your paragraphs.
  • Headings font weight is set using --h-fw: var(--t-semibold) — which you can also override.
  • Headings line heights set using the formula 1em + 0.5rem.
  • Headings have their bottom margin set the same as for paragraphs, var(t--mb).
:root {
  --h-ff: inherit; /* headings font-family */
  --h-fw: var(--t-semibold);
  --h-lh: calc(1em + 0.5rem);
  --h-mb: var(--t-mb);
}

Tip: In some contexts (e.g. in card components) you may not want any built-in spacing for typographic block elements. Then, you can remove margins by using the mb-0 utility class.

Block quotes

Codebase styles <blockquote> tags with some inline (x-axis) padding, to give the effect of indentation. This inline padding is set using the responsive spacing variable --s-4 so that it increases if there is more available width.

Otherwise, blockquotes have the same as paragraph styling.

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. Nullam ridens deterruisset an duo. Cum harum insolens ei, cum probo placerat praesent et.

Lists

In Codebase ordered <ol> and unordered <ul> have a small amount of left padding. But Codebase separates list items <li> to make them more obvious by setting a small top margin between list items (smaller than the top margin between paragraphs), and the same amount above nested <ol> and <ul>. This makes ordered and unordered lists have an even spacing like this:

  1. Ordered item one
  2. Ordered item two
    1. Ordered item two child one
    2. Ordered item two child two
  3. Ordered item three
<ol>
  <li>Ordered item one</li>
  <li>Ordered item two
    <ol>
      <li>Ordered item two child one</li>
      <li>Ordered item two child two</li>
    </ol>
  </li>
  <li>Ordered item three</li>
</ol>
  • Unordered item
  • Unordered item
    • Unordered item child
    • Unordered item child
  • Unordered item
<ul>
  <li>Unordered item</li>
  <li>Unordered item
    <ul>
      <li>Unordered item child</li>
      <li>Unordered item child</li>
    </ul>
  </li>
  <li>Unordered item</li>
</ul>

For definition lists, the title is bold and the definition data item is indented with the same left padding as for the lists (see above).

Definition list title
Definition list data
Definition list title
Definition list data
<dl>
  <dt>Definition list title</dt>
  <dd>Definition list data</dd>
  <dt>Definition list title</dt>
  <dd>Definition list data</dd>
</dl>

Links and menus

In Codebase, links are styled with a color and an underline. The underline is set using the text-decoration property, and the color is set using the color property. The color of links is set to the --tc-link variable, which is defined in the root-vars.css file. On :hover, the link text color becomes slightly darker.

Example:

Link utilities

Then there are the following two classes that apply to links, that may be handy in some situations:

The browser default, and the best practice for accessability, is to have links indicated by an underline (and the browser default color of links is blue). But in the context of menus it is permissible to deviate from the best practice, provided there are other visual and non-visual indicators. This is the reason why we should use semantic HTML tags on menus, and and why we should place navigation menus in their expected locations (in sitewide menu-bars, sidebars, and footers).

Panel links

There may be situations where you have a link that contains some accompanying text that you don’t want to receive the <a href=""> (link) underline. Examples where this may be used: media object, card or hero component, where you want the whole thing to behave like a “big button”. for these, you need the panel-link and panel-link-title combo classes.

You will also want to style the outer <a href=""> e.g. with the block utility (for display:block), and add more styles to this inner element text, so that it is not the same color as the link label.

Y0u will also want to style the other element(s) text that’s not the panel-link-title with a different color, e.g. t-gray t-900.

Link label (title)

Lorem ipsum dolor sit amet ...

 
<a class="panel-link" href="">
    <p class="panel-link-title">Link label (title)</p>
    <p class="mb-0 t-gray t-900">Lorem ipsum dolor sit amet ...</p>
</a>

Another example: here t-underline-hover-only has also been added to the <a href="">:

Link label (title)

Lorem ipsum dolor sit amet ...

 
<a class="panel-link t-underline-hover-only" href="">
    <p class="panel-link-title">Link label (title)</p>
    <p class="mb-0 t-gray t-900">Lorem ipsum dolor sit amet ...</p>
</a>

Semantic menu tags

  • nav / <menu> / <menuitem>

The semantic <nav> tag has no styling of its own, other than its being a block element (similar to a div). Use it to organize your major navigation blocks of links (whether to other pages in your website, or “on this page”).

Semantic <menu> tags are treated by the browser as no different to an <ul>, but they are announced as a menu by screen readers. Codebase gives <menu>, <ul>, and <ol> the same styling: some left padding and bottom margin (and you can remove these you don't require them, using spacing utility classes: margins and/or paddings).

Using an <li> within a <menu> will give you bulletpoint block items. This will be OK for sidebars and dropdown menus, for example, but there’s also the semantic <menuitem> tag. This is an inline tag (like a <span>), and it doesn’t come with a bulletpoint.

This is what you get if you add no styling, other than the Codebase defaults (but of course you will want to add more styling):

<nav>
  <menu>
    <menuitem><a href="">Menu item 1</a></menuitem>
    <menuitem><a href="">Menu item 2</a></menuitem>
    <menuitem><a href="">Menu item 3</a></menuitem>
  </menu>
</nav>

Notes:

  1. Use <nav> to encapsulate your main navigation and “on this page” navigation. Navs can contain more than one menu, e.g. in dropdowns. The website or brand logo (with a link to the homepage) can be situated within the top <nav> but outside of the menu.
  2. The <menu> tag can be used in other contexts, e.g. for a list of related links to other websites, or for a set of user interface controls in a web application.
  3. Inside a <menuitem> can be a link, a button, or other interactive element.

If you want a group of links (in a menu) to not have underlines, or to have underlines only when hovered, the following wrapper classes are available in Codebase:

  • links-underline-none
  • links-underline-hover-only

And now, with a few other Codebase utilities, you have a menubar:

<nav>
  <menu class="p-cell flex flex-wrap gap-3 bg-gray bg-100 links-underline-hover-only">
    <menuitem><a class="t-semibold t-gray t-700" href="">Menu item 1</a></menuitem>
    <menuitem><a class="t-semibold t-gray t-700" href="">Menu item 2</a></menuitem>
    <menuitem><a class="t-semibold t-gray t-700" href="">Menu item 3</a></menuitem>
  </menu>
</nav>

Or a menu for a sidebar or footer buffet:

<nav>
  <menu class="pl-0 flex flex-column gap-2 links-underline-hover-only">
    <menuitem><a href="">Menu item 1</a></menuitem>
    <menuitem><a href="">Menu item 2</a></menuitem>
    <menuitem><a href="">Menu item 3</a></menuitem>
  </menu>
</nav>

Text alignment

  • t-right, t-center, and t-left

In addition to the three simple text alignment classes above, Codebase also has several container-query responsive variants, for xs:, sm:, md: and lg: viewport breakpoints widths.

Example: The hearing in the card below is left aligned by default, but becomes center aligned when its wrapper is xs (320px) wide and above, using xs:t-center:

A title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Tables

Codebase tables are set using the .table class.

  • Table headers <th> are bold.
  • Table cells <th> and <td> have a border set by var(--b-1) – the same detail as <hr> and border utility classes.
  • Table cell paddings are set by --p-cell
  • All cell content is left-aligned. You can change that on the whole <table> or on a per-cell basis using the text alignment classes.
  • Codebase tables ordinarily are grid-lined, with cell content left-aligned, and cell widths dependant on the amoint of content in cells. Optional modifiers:
    • table-fixed will force cells to have the same (fixed) width.
    • table-borderless removes border lines (but keeps padding).
    • table-lines removes vertical lines but keeps horizontal lines.
    • table-compact reduced padding, good for large tables.
    • table-striped alternate rows have backgrounds semi-transparent white and pale gray
  • Cell or whole table alignments can be handled by t-center etc. and vertical-align-middle etc.
This is a Table Caption
Table Header 1 Table Header 2 Table Header 3
Table content 1.1 Table content 2.1 Table content 3.1
Table content 1.2 Table content 2.2 Table content 3.2
Table content 1.3 Table content 2.3 Table content 3.3
Table content 1.4 Table content 2.4 Table content 3.4 
<table class="table">
  <caption>This is a Table Caption</caption>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table content 1.1</td>
      <td>Table content 2.1</td>
      <td>Table content 3.1</td>
    </tr>
    <tr>
      <td>Table content 1.2</td>
      <td>Table content 2.2</td>
      <td>Table content 3.2</td>
    </tr>
    ...
  </tbody>
</table>

Example with table table-lined table-striped:

Table Header 1 Table Header 2 Table Header 3
Table content 1.1 Table content 2.1 Table content 3.1
Table content 1.2 Table content 2.2 Table content 3.2
Table content 1.3 Table content 2.3 Table content 3.3
Table content 1.4 Table content 2.4 Table content 3.4

Making wide tables responsive

If you have a lot of content in your table, it will probably break your page layout on small viewports (e.g. phones). The simplest way to make a table “responsive” is to wrap your table in a DIV with the overflow-x class to make it horizontally scrollable.

Column title Column title Column title Column title Column title Column title Column title Column title Column title Column title
Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content Tabel cell content 
<div class="overflow-x">
  <table class="table">
    ...
  </table>
</div>

Controlling text size

The base font size is 100% (16px default). Additionally:

Font size multipliers

t-xs, t-sm, t-md, t-lg, t-xl

Starting from your base font size, these multipliers will either increase or decrease the font size.

Notes:

  • The t-md class is the same as the base font size, and is set in REM. Use it to override other styles to return to the base font size.
  • All other font size multipliers are set in EM, so that they will scale up or down depending on the parent element’s font size.
  • Font size multipliers can be used on any element, but they are generally used on inline elements, e.g. <span>.

Example uses: smaller for footnotes or “small print”; larger for lead (intro) paragraphs.

Class Font size multiplier Pixel size (px) if base size is 16px Example
t-xs 0.625em 10px Extra-small text
t-sm 0.8125em 13px Small text
(Base) or t-md 1rem 16px Base text
t-lg 1.1875em 19px Large text
t-xl 1.375em 22px Extra-large text

Heading font-size utilities

.h1, .h2, .h3, .h4, .h5, .h6

These are generally used on block (wrapper) elements, and they will resize text the same amount as for their respective heading tag sizes.

Example use: when you want to make text bigger (or large text smaller) without adversely affecting accessibility/ SEO heading hierarchy.

Responsive font size multipliers

t-long-read, t-comfort, t-display

These responsive font size multipliers can be used to make text even larger, but in a way that is not initially too large for phones and small tablet devices. These classes are applied to a wrapping element, and they will affect all text within that element. The font size will ramp up from 1× to a maximum value depending on the viewport width.

  1. The t-long-read wrapping class ramps text up from 1× to 1.25× depending on viewport size.
  2. The t-comfort wrapping class ramps text up from 1× to 1.625× depending on viewport size.
  3. The t-display wrapping class ramps text up from 1× to 2× depending on viewport size.

The calculated max pixel sizes are as follows:

Type size Paragraph max font size (px) H1 max font size (px)
Base 16px 40px
t-long-read 20px 50px
t-comfort 26px 65px
t-display 32px 80px

Demo:

t-long-read wrapper t-comfort wrapper t-display wrapper

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Code

<code> tags have monospaced text (set by --t-mono), with a thin border and a little padding to improve readability.

If the <code> tag is wrapped in a <pre> tag, then it becomes a block level element with more padding, a max-width of 100%, and y-axis overflow scrolling.

Other typographic utility classes

Besides those already introduced, Codebase also has utility classes for:

  • t-lg — increase font size by 1.5em. Use it directly on a <p> to enlarge the font (e.g. for a lead paragraph).
  • t-sm (or use the <small> HTML tag) — decrease font-size to 0.8em
  • t-thin, t-normal, t-semibold, t-bold, t-heavy — font weights
  • t-italic — font style italic
  • t-balance — balances word-wrap, so that e.g. long headings don't have orphans
  • t-uppercase — text transform to capitals
  • t-nowrap — prevents text wrapping (spaces behave as non-breaking spaces)

Note: links can also be styled as though they are buttons using the btn utility class. See components: buttons.

Docs