Typography

Documentation and examples for boodoo typography, including global settings, headings, display headings, body text, and more.

Global settings

boodoo sets basic global display, typography, and link styles.

Uses a native font stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif.
Removes the default font-size and font-weight on <h1>–<h6> margin-bottom of .625rem.
Sets $boodoo-font-weight-base to 400, $boodoo-line-height-base to 1.5.
Link color inherits the --boodoo-link-color token and underlines on hover.

All HTML headings are available. Use the associated classes .h1 through .h6 if you want to match the font styling without the semantic element.

Traditional heading elements are designed to work best in the meat of your page content.

Make a paragraph stand out by adding .lead.

This is a lead paragraph. It stands out from ordinary paragraphs.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

A well-known quote, contained in a blockquote element.

Add .blockquote-footer for identifying the source.

A well-known quote, contained in a blockquote element.

Use .font-sans-serif, .font-serif, or .font-monospace to switch between boodoo's font stacks.

<p class="font-monospace">Monospace text</p>

boodoo also ships fluid type helpers .fs-fluid-1 … .fs-fluid-6 built on clamp() for scales that breathe with the viewport.