Future Imperfect's typography

Mara Solis

Future Imperfect is the HTML5 UP magazine blog adapted for Dune. This post dogfoods the markdown surfaces the vendored stylesheet paints.

Headings

This is an h2 — section headings sit a size below the post title, with enough margin above to read as a break, not a continuation.

And this is an h3

One size down again, for a subsection within a section.

Lists

  • Ordered and unordered lists share the same line height as body text
  • Nested items indent without changing size
    • Like this nested item
  • A list is still just paragraphs, visually
  1. Numbered lists use the same rules
  2. The number doesn’t change the indent or spacing
  3. Mix ordered and unordered as needed

Blockquotes get a left border and slightly muted text — enough to read as “someone else said this” without looking like an alert box.

Code

Inline code uses the same monospace stack as fenced blocks:

function formatDate(ms: number, lang: string) {
  return new Intl.DateTimeFormat(lang, { dateStyle: "long" }).format(ms);
}

Tables

Option Type Default
author_name text Author
show_html5up_credit toggle true
footer_text text (empty)

Links

Bold, italic, and links all read at the same weight as the rest of the paragraph.


That horizontal rule is the divider Future Imperfect’s stylesheet defines.