This page shows all the style elements that define the design of this site. You are now reading an intro paragraph: it opens an article or page, is slightly larger than the running text and has a small green stroke as an accent.

Colour

One warm paper colour, three shades of ink and one green accent. The green is reserved for what you can click or what lights up: links, note numbers and the note under your mouse.

Dark mode follows the setting of your system. You can also choose it yourself, here or at the bottom of the menu. Your choice is remembered.

Typefaces

Two families that clearly differ from each other. The serif is for everything you read, the sans-serif for everything you use: menu, metadata, labels and tables. Both are hosted locally via Fontsource, without requests to Google.

The iI1l test

Hopefully these letterforms differ enough, so that you don’t mistake a 1 for an l, or an i and an I for an l.

• iI1l 0ONewsreader
• iI1l 0OCabin
• iI1l 0OMono

Headings

Headings are set in Newsreader. The page title is the largest and the lightest; the smaller the heading, the heavier, so that every heading stays equally clear.

Paragraphs

Intro paragraph

The paragraph at the top of this page. Give a p the class lead and it becomes larger and lighter, with a stroke in the accent colour below it.

Line length

A line reads most comfortably at 45 to 75 characters; 66 is considered ideal.¹²³

I take that into account in the max-width of the text column. It is set in --measure to 40 rem: about seventy characters in this typeface.

Wide

A block with the class bleed runs on wide screens all the way up to and including the notes column. Useful for images, tables and the odd passage that deserves more room.⁴

Divider

An hr becomes an Asterism. I sometimes like old-fashioned habits and I'd like to preserve this dinkus.

Text formatting

Italic

The element i is for words in a different voice, mood or language, such as technical terms or an expression from another language.

The quick brown fox jumps over the lazy dog.

Emphasis

With em you place stress: something you would pronounce differently. If italics are only a stylistic choice, use i.

You really must try that new twelve-year-old Aultmore!

Strong

With strong you indicate that something is important. For bold without that meaning there is b.

Do not put nails in the power socket.

Links

Butterscotch squares that do things right. A link is green with a thin, light underline. Point at it and the line becomes solid.

In secondary text, such as sources, notes and the footer, a link keeps the colour of the text around it, with the same thin underline, and turns green when you point at it. That way it doesn’t compete with the text it belongs to. You can see it in the source of the quote below.

Abbreviations

Abbreviations such as HTML get an abbr, with a title for the full name. The dotted line shows that there is an explanation; point at the abbreviation to read it.

Titles of works

Titles of books, films and articles go in a cite, such as The Elements of Typographic Style by Robert Bringhurst.

Deleted and inserted

Deleted text goes in del, inserted text in ins.

Superscript and subscript

Superscript uses ^sup and subscript _sub, as in m² and H₂O.

Keys

The keys ⌘ and Shift are important.

And now everything mixed together: an abbr. here, a ^sup there and a _sub in between. See how ⌘, Shift, F4 and Caps Lock behave in the middle of a paragraph, next to old new text, bold, italic and code. The line spacing should stay the same everywhere, even when there is all sorts of things between the lines.

Boxes and quotes

Aside

An aside is for a side path that is just too big for a note.

Information

With class="information" the box turns green and gets a small sign. For something the reader really needs to know, such as a correction or an update.

Quote

A quote is indented slightly, with a line next to it. The source goes below it, smaller and in the sans-serif.Name of the source, an explanation

Lists

Numbered

1. Write a first draft
2. Let it rest for a night
   1. read it out loud
   2. cut what is not needed
3. Publish

Unnumbered

• Paper
  • lined
  • blank
• Pencil
• Eraser

Code

Code in the text gets a light background, such as font-optical-sizing. Code blocks follow the light or dark theme and scroll sideways if a line is too long.

function showError(error) {
  if(error.code==0) {
    alert('An unknown error occurred.');
  } else if(error.code==1) {
    alert('No permission to locate your position.');
  } else if(error.code==2) {
    alert('The location could not be retrieved.');
  } else {
    alert('There was a timeout.');
  }
}

.ninja {
    visibility: hidden;
    animation-duration: 0.000001s;
}

Images

In the text column

An image is as wide as the text. On wide screens the caption is in the margin, just like a note, aligned with the bottom of the photo.

Wide

In a bleed the image runs into the margin. The caption then goes below it.

Enlarge

Put images in a figure with the class lightbox and they can be viewed larger: click or tap an image and it opens full screen, on the paper colour. One image is as wide as the text; two or three stand side by side at the same height, whatever their proportions. With more than one, you browse with the arrows, the arrow keys or by swiping. The title of an image becomes its caption in the large view.

<figure class="lightbox">

![A macro shot of a nib](../../assets/nib.jpg "The nib, up close")

<figcaption>An optional caption.</figcaption>
</figure>

Tables

Tables are set in the sans-serif. A wide table sits in a bleed and scrolls sideways on smaller screens. On a phone every row becomes a small block, with the column name in front of it.

Margin line, notes and menu

Margin line

To the left of the text runs a line that fills up as you read, with a tick for every h2 and h3, at the height where that chapter is. Move your mouse to the left edge and the titles appear. It also works with Tab, and on a tablet you tap the margin line. On a phone the contents are in the menu and a green bar runs under the header.

Notes

You simply write footnotes in Markdown. From 1120 pixels wide they are in the right margin, on the same baseline as their number. Point at the number or the note and they light up together. On narrower screens the note appears in a small window when you point at the number, and all notes are at the bottom.

Header

The header is semi-transparent and blurs what is underneath it, so that the text slides underneath it, blurred. It disappears when you scroll down and comes back as soon as you scroll up.

Menu button

Three lines that turn into a cross when the menu opens. The menu slides in from the left, the items come in shortly after each other.

Components

Topics

At the top of a piece, above the title. Small and calm, in the sans-serif.

• Typography
• Reading
• Web

Article header

Topics, title and a line with author, date and reading time. The header of this page is an example of it.

Overview

On the overview page the newest post is shown large at the top. Below it follows the archive per year; the description of each post is in the margin, just like a note, and lights up when you point at the line.

Below a piece

Links to the previous and the next piece, below a thin line.

Preview

A block in which a piece of HTML, CSS and JavaScript renders, shielded from the rest of the page: the styles inside and outside the preview don’t affect each other, but tokens such as var(--accent) do work. Write it straight into Markdown, without blank lines. In a script, use root instead of document. Give it a label of its own with data-label.

Optionally, add data-replay for a Replay button next to the label. It rebuilds the preview from its original content and runs its scripts again, so animations play again and the example starts over. Click the button below a few times, then press Replay.

<div class="preview">
<template shadowrootmode="open">
<style>
  p { color: var(--accent); }
</style>
<p>Hello from inside the preview.</p>
<script>
  root.querySelector('p').textContent += ' JavaScript works too.';
</script>
</template>
</div>