Headings
Notice: This documentation has been deprecatedFor new web site development and existing site improvement, please refer to the EBI Visual Framework (v1.1) documentation. All services are expected to use the new framework by February 2017. |
Example:
heading 1 (370% = 48px)
heading 2 (277% = 36px)
heading 2 (strapline) (182% = 24px)
heading 3 (182% = 24px)
heading 4 (161.6% = 21px)
heading 5 (138.5% = 18px)
heading 6 (123.1% = 16px + small caps)
HTML:
<h1>heading 1 (370% = 48px)</h1>
<h2>heading 2 (277% = 36px)</h2>
<h2 class="strapline">heading 2 (strapline) (182% = 24px)</h2>
<h3>heading 3 (182% = 24px)</h3>
<h4>heading 4 (161.6% = 21px)</h4>
<h5>heading 5 (138.5% = 18px)</h5>
<h6>heading 6 (123.1% = 16px + small caps)</h6>
CSS:
h1, h2, h3, h4, h5, h6 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 20px 0;
clear:both;
}
h1 {
font-size: 370%;
line-height: 125%;
}
h1.strapline { font-size: 277% } /* ~40px */
h2 {
font-size: 277%;
line-height: 1.11; /* ~40px */
}
h2.strapline { font-size: 182%; /* 24px */ }
td h2 { font-size: 257%; } /* 36 / 14 * 100 */
h3 {
font-size: 182%;
border-bottom: 1px solid #ccc;
line-height: 163%; /* ~39px... 39px + 1px border = 40px */
}
body.services section#overview h3 {
font-size: 161.6%;
}
h4 {
font-size: 161.6%;
color: #000;
}
h5 {
font-size: 138.5%;
color: #000;
}
h6 {
font-size: 123%;
font-variant: small-caps;
color: #000;
}