Headlines
To come
The default font used throughout the page is Helvetica Neue, and is implement through a web font loaded by fonts.css. This is done to reflect EMBL-wide branding.
Sizing of default text is done with rem; equivlent to 16px on 24px leading, or 12pt on 16pt leading. Note that these sizes are for desktop-class browser widths, tablet and mobile sized screens are scaled.
Headlines
H1: HTML Heading 1
Reserved for use in the local header. 3rem, 36pt.
H2: HTML Heading 2
Use sparingly. Generally a max of one per URL, as the page title. 2.5rem, 30pt.
H3: HTML Heading 3
The standard section heading. 2rem, 24pt.
H4: HTML Heading 4
Use a sub heading. 1.5 rem, 18pt.
H5: HTML Heading 5
Sample paragraph. 1.25 rem, 15pt.
H6: HTML Heading 6
Sample paragraph. 1rem, 12pt.
Headlines HTML
<p>The default font used throughout the page is Helvetica Neue, and is implement through a web font loaded by <code>fonts.css</code>. This is done to reflect EMBL-wide branding.</p> <p>Sizing of default text is done with <code>rem</code>; equivlent to 16px on 24px leading, or 12pt on 16pt leading. Note that these sizes are for desktop-class browser widths, tablet and mobile sized screens are scaled.</p> <h3>Headlines</h3> <div class="callout ebi-background"> <h1>H1: HTML Heading 1</h1> <p class="white-color">Reserved for use in the local header. 3rem, 36pt.</p> </div> <h2>H2: HTML Heading 2</h2> <p>Use sparingly. Generally a max of one per URL, as the page title. 2.5rem, 30pt.</p> <h3>H3: HTML Heading 3</h3> <p>The standard section heading. 2rem, 24pt.</p> <h4>H4: HTML Heading 4</h4> <p>Use a sub heading. 1.5 rem, 18pt.</p> <h5>H5: HTML Heading 5</h5> <p>Sample paragraph. 1.25 rem, 15pt.</p> <h6>H6: HTML Heading 6</h6> <p>Sample paragraph. 1rem, 12pt.</p>
Headlines Style
You can find the original source of the CSS as .scss
Headlines
Have a use case that's not covered?
Please open an issue in the tracker. We'll update this living pattern library with your feedback.