Future Imperfect's typography
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
- Numbered lists use the same rules
- The number doesn’t change the indent or spacing
- 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.