<h1>
color: #000000;
font-size: 2em;
line-height: 1.35em;
padding-bottom: 0.5em;
font-family: elysio regular
@media screen and (min-width: 768px) {
font-size: 2.8em;
font-family: elysio regular; }
<h2>
color: #000000 ;
line-height: 1.35em;
padding-bottom: 0.3em;
font-family: elysio regular
font-size: 1.7em;
@media screen and (min-width: 768px) {
font-size: 2.1em; }
<h3>
font-family: elysio regular;
line-height: 1.35em;
padding-bottom: 0.3em;
color: #000000;
@media screen and (min-width: 768px) {
font-size: 1.8em;}
<p>
font-family: arial;
Color: #333333;
line-height: 1.5em;
margin-bottom: 1.0em;
font-size: 1em;
@media screen and (min-width: 768px) {
font-size: 1.125em; }
Tips for typography
- Don't use header elements for body text.
- Avoid adding text to images - use HTI components to incorporate text into components that are readable for everyone.
Font hierarchy
Semantic HTML5 is necessary for ensuring our content is optimised both for search engines and for screen readers. This means using elements such as <h1>, <h2> etc. and making sure they are properly nested.
Usage:
<h1> - Reserved for page titles.
<h2> - Divides up content into sub-sections
<h3> - These are the default for tile headers so any tiles must be within an <h2> sub-section.
This also means that any <h3> used within a sub-section (headed with an <h2>) must be at the same hierarchy as any tiles used within that sub-section
In the following image, we have the title of the page at point (1). At point (2) <h2> or Section header elements are used as section headers which split up content sections on the page.
(3) Shows how <h3> elements are used always under an <h2> element. The titles within HTI components are <h3> which means HTI components must be 'under' an <h2> element in order to maintain hierarchy.
