Typography Styles & Element Examples

Font Sizes

A	A	A	A	A	A	A	A
6rem (96px)	5rem (80px)	3rem (48px)	2.25rem (36px)	1.5rem (24px)	1.25rem (20px)	1rem (16px)	.875rem (14px)

Type Samples

Headline

Subheadline

Level 1 Heading

One page to rule them all...well, not really. This page displays sample typography and page elements to illustrate their style. Things like headings and paragraphs showing the beautiful type scale, form elements, tabular data, and image layouts just to name a few.

Level 2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla tortor mauris condimentum nibh.

Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet.

Level 3 Heading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo.

Level 4 Heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur.

More Type Samples

Discipline in typography is a prime virtue. Individuality must be secured by means that are rational. Distinction needs to be won by simplicity and restraint. It is equally true that these qualities need to be infused wiht a certain spirit and vitality, or they degenerate into dullness and mediocrity.
―Stanley Morison

The first unordered list item
The second unordered list item
The third unordered list item
The fourth unordered list item

The first ordered list item
The second ordered list item
The third ordered list item
The fourth ordered list item

Definition Term: The first definition description; The second definition description; The third definition description; The fourth definition description

Sample Forms

Sample Table

Name	Rating
The Big Lebowski	★★★★★
Pulp Fiction	★★★★★
Fargo	★★★★★
Intersellar	★★★★☆
Dumb & Dumber	★★★★☆
The Big White	★★★★☆

Sample Highlight Shortcode

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: dense;
  grid-gap: 0px;
  margin: 0px auto;
  max-width: 1440px;
}