Text Patterns

Ratio light normal

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Ratio light italic

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Ratio regular normal

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Ratio regular italic

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Ratio medium normal

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Ratio medium italic

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

Menlo (or fallback) regular normal

The five bad quacking zephyrs officiously jolt my floating waxen effigy. This sentence makes the paragraph long enough to break.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 {[(“‘-!?@&$#*–,.;:—’”)]}

$ratio: 'ratio', 'Seravek', 'Helvetica Neue', sans-serif;
$weight-light: 300;
$weight-regular: 400;
$weight-medium: 500;
// default smallest size: 1rem

$monospace: 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
$weight-regular: 400;
// default smallest size: .75rem
HTML

Usage: Ratio is used everywhere on the site, from headings to body text. Menlo (or a fallback) is used for code samples and other monospace needs.

Restrictions: Typically, monospace should be used only for code.

Specification: Three weights of Ratio are used: 300 (light), 400 (regular) and 500 (medium). One 400 (regular) weight and style of Menlo is specified. Because of a difference in scale, monospace is specified to be at three quarters size to make it match the x-height of Ratio.

Level one heading for pages

Markdown
HTML

Usage: Site-wide heading level 1, primarily for page headings.

Restrictions: Should not be used inline in pages. Hierarchy after the page title starts with h2.

Specification: 500 weight, narrower letter spacing, 2em.

Level two heading for pages

Markdown
HTML

Usage: Site-wide heading level 2, used for page sub-headings to organize sections of prose.

Restrictions: It should be used before any h3 or lower headings, making it the most common heading used in prose.

Specification: 400 weight, narrower letter spacing, 1.75em.

Level three heading for pages

Markdown
HTML

Usage: Site-wide heading level 3, used within sections of prose.

Restrictions: Always after an h2 in hierarchy.

Specification: 300 weight, 1.5em.

Level four heading for pages

Markdown
HTML

Usage: Site-wide heading level 4, used (rarely) within sections of prose.

Restrictions: Always after an h3 in hierarchy.

Specification: 300 weight, italic, 1.25em.

Level five heading for pages
Markdown
HTML

Usage: Site-wide heading level 5, used (very rarely) within sections of prose.

Restrictions: Always after an h4 in hierarchy.

Specification: 300 weight, italic, 1.125em.

I am Oliver Pattison, a designer focused on the future of the web.

Markdown
HTML

Usage: Body text. The Markdown conversion process makes standard blocks of text paragraphs quite often.

Specification: Default top margin of 1em; line height set between 1.4375 and 1.5. Default typography used as the baseline for the entire site’s design.

A hyperlink, also known as an anchor, which links to a target URL. This is an example of an internal link.

Markdown
HTML

Usage: Anchor element – for inline hyperlinking. Use with relative paths such as /path/ for internal links.

Restrictions: Keep punctuation out of a hyperlink.

Specification: High contrast color (typically red) differentiated from body text. Underlined with border-bottom.

This technique prioritizes readability on small screens for the web ahead of any other concerns.

Markdown
HTML

Usage: Stress emphasized inline text.

Specification: Italic style.

Content and distribution are independent from each other – that is, a separation of concerns.

Markdown
HTML

Usage: Heavily emphasized inline text.

Specification: Use 500 weight for Ratio depending on screen density (as opposed to 700, which is typical for bold/strong styles).

A bit of inline <code> in a paragraph.

Markdown
HTML

Usage: Inline code in a paragraph

Specification: Light, low-contrast rounded border.

  1. The first list item
  2. The second item in the list
  3. And a third item in this list of items
    1. The first nested sub-item in the list
    2. The second nested sub-item
      1. A third layer of list items
      2. A second sub-sub-item
  4. A fourth item in the list
Markdown
HTML

Usage: An ordered list for a collection of items with numbered values and a specific sequence.

Specification: Sub-items use contents-style hierarchy like x.1, x.2 and so on.

  • A list item
  • Another item in the list
  • Yet another item in this list of items
    • A nested sub-item in the list
    • Another nested sub-item
Markdown
HTML

Usage: An unordered list for a collection of items without a numbered value or required sequence.

Specification: Square bullets aligned to body text (not outside set).

So HTML is not the best format, but it may just be the longest lasting format, because of its ubiquity, because it’s taken off so much at this point.

HTML

Usage: Quoted text. Made as an HTML block (with a <footer> and <cite>) or with the > Markdown syntax. Can be generated with {% include block/blockquote.html %} block which takes a blockquote capture and arguments for author, source, source_url, and date.

Specification: Indented slightly right, accented with a blue bar.

I’m Oliver Pattison, a designer who makes responsive, forward-thinking websites.

Markdown
HTML

Usage: Heavy emphasis for paragraph text.

Restrictions: Only can be used for unique text, not pull quotes. Not an alternative to headings.

Specification: High contrast color text with heavy font weight and increased size proportional to body text. Offset block at certain breakpoints.