adbr.css

Clean, classless typography for reading-first sites.

Drop in one stylesheet, write semantic HTML, and get baseline-driven spacing, readable measure, and sensible defaults for the elements you actually use.

Want to see everything styled? Open the demo page.

Features

Readable measure - defaults to 68ch, in the commonly recommended 45 to 75 characters-per-line range (see line length).
Fully configurable, modern CSS - built with CSS custom properties so you can override design tokens (colours, spacing, measure) in plain CSS.
Reading-first type pairing - serif body text, with sans-serif headings for clear contrast (see Butterick's Practical Typography on body text and mixing fonts).
Baseline rhythm for predictable vertical spacing.
Light and dark using prefers-color-scheme, with an optional override.
Real HTML coverage - forms, tables, code, media, details, blockquotes.
One file, no classes required, no build step.
Themes as optional palette files layered on top.

Getting started

For a quick test (please do not hotlink in production):

<link rel="stylesheet" href="https://css.adbr.dev/adbr.min.css">

Download:

Full CSS - readable source
Minified CSS - small and fast

Package manager (recommended):

npm i @adbr/adbr.css

Use it like this:

<link rel="stylesheet" href="/adbr.min.css" />

Customise

adbr.css follows system light/dark by default. To force a theme, set data-theme="light" or data-theme="dark" on <html>.

<html lang="en" data-theme="dark">

Themes

Themes are optional colour palettes. Include adbr.min.css first, then a theme file.

<link rel="stylesheet" href="/adbr.min.css" />
<link rel="stylesheet" href="/themes/cool-grey-indigo.css" />

Available themes:

Create your own theme

A theme is just a small CSS file that overrides the design tokens. Start by copying one of the existing theme files in /themes, then tweak colours and spacing to match your site.

/* my-theme.css */
:root {
  --bg: #ffffff;
  --fg: #1f2937;
  --muted: #6b7280;
  --rule: #e5e7eb;

  --accent: #0ea5e9;
  --accent-hover: #0284c7;
}

Styling

Here are a few examples with their matching snippets.

Typography

This is strong, this is emphasis, this is marked, and this is small text. Links look like this.

<p>
  This is <strong>strong</strong>, this is <em>emphasis</em>,
  this is <mark>marked</mark>, and this is <small>small text</small>.
  Links look like <a href="#">this</a>.
</p>

Headings (h1-h6)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Code

Inline code like printf, and a code block:

#!/usr/bin/env bash
set -euo pipefail

echo "hello"

<p>Inline code like <code>printf</code>...</p>
<pre><code>echo "hello"</code></pre>

Tables

A small table - use real `<caption>`, `<thead>`, and `<tbody>`.
Thing	Default	Notes
Measure	68ch	Readable line length
Baseline	1.5rem	Consistent vertical rhythm

<table>
  <caption>A small table...</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Forms

<form>
  <label for="email">Email</label>
  <input id="email" type="email" />
  ...
  <button type="submit">Send</button>
</form>

For the full surface area (details, media, quotes, and more), use the demo page.