Type
This is an H1. Stout, bold, and proud, it is an exemplary tag, loved all across the world.
H2 headlines are slightly smaller but still big enough to command a reasonable amount of attention
The Smaller Things In Life (like this h3)
You can easily ensure your headlines have a visual separator from the rest of the content
This is an H1 but is presented in the same ways as an H2.
This is an H1 but is presented in the same ways as an H3.
This is an H1 but is presented in the same ways as an H4.
This is an H2 but is presented in the same ways as an H1.
This is an H2 but is presented in the same ways as an H3.
This is an H2 but is presented in the same ways as an H4.
Usage notes
The webfont 'Dax' is used for headlines; it provides the site with the personality it needs without compromising legibility.
Try not to introduce any new font or font weights to the design as it will add more complexity to the page. If there is a difficult design challenge, try using scale and proximity.
Normal paragraph tags are smaller. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ipsam aperiam laborum quidem deserunt nulla ea maxime inventore necessitatibus eaque dolor adipisci, quaerat incidunt laboriosam, deleniti placeat odio! Libero, non.
This is a description paragraph.
This is an introductory paragraph. All that is required to use this element is a cheeky .lede or .lead tag on the paragraph element of your choosing. Fun fact: This class name is nicked from inuit.css and originates from journalism and its use of the lead parahgraph. The "lede" spelling was created to differentiate it from leading, the distance between the baselines.
If we would like small body copy, there's a plethora of options available to us. You can apply the mini class to your paragraphs or their container.
Here's some even smaller text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsa quisquam eveniet temporibus ipsum accusamus odit in enim nobis sint voluptate sed minus nostrum dignissimos sit, id nisi, aut. Sed? Facere necessitatibus maxime quod ex, minima ea corporis. Nisi ipsa qui ex sint voluptas voluptatibus iure, nam, obcaecati vero voluptates nesciunt repudiandae consectetur beatae vitae culpa, facilis distinctio excepturi. Adipisci. Vero aspernatur eum explicabo eius perferendis distinctio inventore commodi aliquid, veniam sint minus ratione, consectetur, amet hic. Necessitatibus veritatis exercitationem neque provident possimus minima, odio debitis itaque autem, repellendus ex.
Usage notes
For legibility and flexibility, the standard font for all non-heading typography is 'Open Sans'.
It has a neutral, yet friendly appearance and is optimized for print, web, and mobile interfaces, and has excellent legibility characteristics.
Try not to introduce any new font or font weights to the design as it will add more complexity to the page. If there is a difficult design challenge, try using scale and proximity.