Full Typography

Paragraph tags lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel augue viverra, porttitor neque vel, porttitor ante. Phasellus dictum molestie ante quis imperdiet. Sed viverra, quam sit amet iaculis ornare, sem dui mollis enim, nec ullamcorper libero ligula a dui. Ut auctor sagittis mollis. Duis tempus elementum ante vitae luctus. Morbi porta sem diam, at lacinia augue pretium a. Vestibulum sit amet congue urna. Praesent mattis viverra lacus at feugiat. Pellentesque porta convallis consequat.

Suspendisse ornare hendrerit sagittis. Ut ut tincidunt leo, a ullamcorper sem. Nulla facilisi. Quisque velit ante, facilisis sit amet enim ut, mollis semper urna. Quisque varius, augue ut congue interdum, ante justo ultricies tortor, at sollicitudin dui ligula sed sem.

Big Heading 1, dominating the page and setting the tone

Praesent erat ex, maximus vitae mattis sed, aliquam nec lacus. Ut a pharetra elit. Nullam porttitor convallis tellus ac tempus. Aliquam erat volutpat. Phasellus lobortis nunc ut placerat varius. Aliquam gravida iaculis tortor. In a arcu consectetur, bibendum dolor sed, tincidunt justo.

Headline 2, separating content sections

Suspendisse ornare hendrerit sagittis. Ut ut tincidunt leo, a ullamcorper sem. Nulla facilisi. Quisque velit ante, facilisis sit amet enim ut, mollis semper urna. Quisque varius, augue ut congue interdum, ante justo ultricies tortor, at sollicitudin dui ligula sed sem.

Showing off smaller headlines with 3

Aliquam erat volutpat. Phasellus lobortis nunc ut placerat varius. Aliquam gravida iaculis tortor. In a arcu consectetur, bibendum dolor sed, tincidunt justo. Quisque tortor nulla, dapibus sed justo id, fringilla aliquet nisi. Morbi a dolor hendrerit, feugiat nibh at, dignissim ex. Suspendisse sit amet augue sed purus scelerisque aliquet.

Even smaller still with the headline 4 showing off

Suspendisse ornare hendrerit sagittis. Ut ut tincidunt leo, a ullamcorper sem. Nulla facilisi. Quisque velit ante, facilisis sit amet enim ut, mollis semper urna. Quisque tortor nulla, dapibus sed justo id, fringilla aliquet nisi. Morbi a dolor hendrerit, feugiat nibh at, dignissim ex. Suspendisse sit amet augue sed purus scelerisque aliquet.

I hope that I won’t need a headline 5, but i have it anyways

I don’t play on ever using an H6. Ut ut tincidunt leo, a ullamcorper sem. Nulla facilisi. Quisque velit ante, facilisis sit amet enim ut, mollis semper urna. Quisque varius, augue ut congue interdum, ante justo ultricies tortor, at sollicitudin dui ligula sed sem. Praesent erat ex, maximus vitae mattis sed, aliquam nec lacus. Ut a pharetra elit. Nullam porttitor convallis tellus ac tempus. Aliquam erat volutpat. Phasellus lobortis nunc ut placerat varius. Aliquam gravida iaculis tortor. In a arcu consectetur, bibendum dolor sed, tincidunt justo. Quisque tortor nulla, dapibus sed justo id, fringilla aliquet nisi. Morbi a dolor hendrerit, feugiat nibh at, dignissim ex. Suspendisse sit amet augue sed purus scelerisque aliquet.

Font Variants

There’s small things such as italics, bolds, and super/sub texts.

Horizontal Rule


Code Snippets

this is what a 'pre' tag looks like

Then there’s code tags which are great for showing off things like CSS Properties.

Margin Annotations

This is probably the feature I’m happiest about typographically: the option to make aside comments tied to main-body copy. They’re great for providing more insight, linking out to relevant resources, and just making anecdotal jokes. It frees up the main body of copy to remain clear, while still providing an outlet for side comments.

At least that’s what I tell myself.