Typography Specimen
Font stack: Lato, Arial, Helvetica, sans-serif. Weights loaded: 100, 300, 400, 700, 900 (+ italics).
Colors
#3A7D7B$color-link#f6c844$yellow#fec600$yellow-deep#ffd013$yellow-light#ffe064$yellow-pale#2c2419$maroon#dee8ef$gray-light#e7f1f7$gray-lightest--accent-colorHeadings
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Heading utility classes
Body text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Small text within a paragraph for captions or fine print.
Font weights
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Links & buttons
Lists
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
Rich text (Ghost content)
A heading inside rich-text
This simulates how Ghost post content renders. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
- Rich text list item
- Another list item
Another paragraph following a list to check spacing.
This is a blockquote inside rich text content.
Final paragraph after blockquote.
Vertical rhythm test
Heading 1
Paragraph after h1. Check the spacing between the heading and this text.
Heading 2
Paragraph after h2. Check the spacing between the heading and this text.
Heading 3
Paragraph after h3. Check the spacing between the heading and this text.
Consecutive paragraph. The gap here should feel consistent with the rest of the page rhythm.
Another consecutive paragraph to verify paragraph-to-paragraph spacing.
Heading 4
Paragraph after h4.