Body text will be set in Verdana, which provides optimum readability across a wide range of operating systems and devices.

Headings use Helvetica Neue (defaulting to Helvetica), to reflect the EMBL corporate font.

Base font size for body text is 13px with a line height of 20px. Across the site, text is sized using percentages. 

Font sizing with percentages (based on Yahoo CSS fonts)

To change the size of a font, always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels). See the example. 

#demo1 {font-size:85%;}  /*renders 11px */#demo2 {font-size:100%;} /*renders 13px */ #demo3 {font-size:108%;} /*renders 14px */#demo4 {font-size:123.1%;} /*renders 16px */#demo5 {font-size:138.5%;} /*renders 18px */

Headings

Headings are given the font-family stack Helvetica Neue > Helvetica > Arial > sans-serif, and we have followed a very standard scale. As for all other text, they are sized using percentage units.

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)

Example text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, EBIsunt in culpa qui officia deserunt mollit anim id est laborum.

Distinguishing between the letter "i" and the number "1" in different font cases

"i"s vs "1"s vs "L"s: I1i1L1l1,

Subscript and superscript

The quick brown fox jumped₃ over the lazy brown dog².

Please use ⌘ Cmd + C to copy