Typography
Table of Contents
Font stack
Simple Material defines three different font stacks for different types of text elements.
Default
By default, all text which is not either a heading or source code is rendered using the following sans-serif font stack:
"Source Sans Pro", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
A quick brown fox jumps over the lazy dog.
This can be overridden through the variable $base-font.
Titles
All headings and titles defined with the CSS classes .title and .subtitle use the following font stack:
"Lato", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
Title
Subtitle
Title
{: .title}
Subtitle
{: .subtitle}
This can be overridden through the variable $head-font.
Source Code
For monospace type, like code snippets or the <pre> element, Simple Material uses the following stack of monospace fonts:
"Source Code Pro", "SFMono-Regular", Menlo, Consolas, Monospace
System.out.println(“Hello, world!”);
This can be overridden through the variable $mono-font.
Headings
Headings are rendered like this:
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Body text
Default body text is rendered like this:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text can also be rendered bold, italic, or strikethrough using only Markdown.
Text can be **bold**, _italic_, or ~~strikethrough~~.
Inline elements
Hyperlinks are rendered using markdown syntax like this:
[Link to another page](#).
For subscripts and superscripts, inline HTML can be used.
log273
log<sub>2</sub>7<sup>3</sup>