Top Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Second Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Third Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Fourth Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Fifth Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

This is a Primary Title

Supercalifragilisticexpialidocious

Pneumonoultramicroscopicsilicovolcanoconiosis

Normal paragraph text.

Progressive enhancement is a touchy subject. It can be hard to discuss dispassionately because, like accessibility, it’s often framed as an issue of empathy and compassion.

Normal paragraph text.

This is a Top Level Header that wraps to multiple lines to show how the background color wraps too.

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

This is a simple code element. It’s usually alongside some other text.

This is a simple pre element.

This is pre > code.

This is pre > code with a really long line length. It should wrap smartly without a scrollbar.

.my-class {
	this: is;
	some: css;
}

.my-class {
	this: is;
	some: css;
	this: line-is-highlighted;
}

.my-class {
	this: is;
	some: css;
	this: line-is-added;
	this: line-is-removed;
}

Using Prism.js and eleventy-plugin-syntaxhighlight for line highlights.

1. Ordered list item.
2. Ordered list item.
3. Ordered list item.
4. Ordered list item.

• Unordered list item.
• Unordered list item.
• Unordered list item.
• Unordered list item.

Description Term

Description Definition

Description Term

Description Definition

• Inline List Item
• Inline List Item
• Inline List Item
• Inline List Item

1. Year
2. Blog post entry.
3. Blog post entry.
4. Blog post entry.

1. Sub-header
2. Blog post entry.
3. Blog post entry.
4. Blog post entry.

1. Year
2. Blog post entry.
3. Blog post entry.
4. Year
5. Blog post entry.

This is paragraph text with an addendum note attached1.

Appendix

1. Jump to the reference. FOUC also refers to the scenario when your page renders before your CSS has successfully applied so I think it’d be better to stick with FOUT to avoid confusion.