Foundation Typography
This page is a demonstration of the elements that can be formatted using Monster. It is not intended to be a comprehensive guide to typography, but rather a reference of the styles that are available.
Basic Typography
All the typography of Monster uses rem for sizing. This means that accessibility is maintained for those who change their browser font size. The body element has a size of 1.15rem which makes all the standard font sizes slightly larger. This equates to 14pt for paragraph text, instead of the standard 12pt.
Headings
The heading elements also have an increased top margin to break blocks of text up better.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p class="monster-h1">Heading 1</p>
<p class="monster-h2">Heading 2</p>
<p class="monster-h3">Heading 3</p>
<p class="monster-h4">Heading 4</p>
<p class="monster-h5">Heading 5</p>
<p class="monster-h6">Heading 6</p>
In this example, you can see how the headings are used. Heading 1 is the largest and Heading 6 is the smallest.
You can achieve the size, color and spacing via the HTML tags h1-h6 or via the CSS classes monster-h1 to monster-h6 .
Nevertheless, the structured approach is generally preferable, as structure and appearance go together here. This can improve access to this page, especially for screen readers.
In the example above, we cheated a little and reduced the spacing so that the headings are easier to see together.
Typography elements
There are a number of other typography elements that you can use with Monster. Some of the common ones are:
- All the standard stuff, like bold, italic and underlined text.
- Highlighting text
- Adding
inline codeusing thecodeelement. - Displaying keyboard commands like ALT+F4 using the
kbdelement.
Lists
We all love a perfect list?
- Item 1
- Item 2
- Item 3
- Do this thing
- Do that thing
- Do the other thing
Blockquotes
Sometimes you may want to quote someone else in your HTML. For this we use the blockquote element. Here’s what a quote looks like with Monster:
Friends don’t spy; true friendship is about privacy, too.
– Stephen King
Code blocks
Code blocks are different from the inline code element. Code blocks are used when you want to display a block of code, like this:
<div class="monster">
<p>Hello, World!</p>
</div>
HTML elements
Article
An article is a self-contained piece of content that could theoretically be distributed and reused independently of the rest of the page. This is a good way to structure your content for search engines and screen readers.
This is an article
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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in officia deserunt mollit anim id est laborum.
Section
Sections are good for splitting up a page into multiple…sections.
This is a section
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Images
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. Details and Summary
This ist a simple example of the details and summary elements. This can be used to hide and show content.
Click to open
Yeah!🙂
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.