5 X Q 8 vB H 1 R M n 3 9 PAE O i Typography is the visual represention of the written word. Well-balanced typography is critical to the overall web experience.

Selected are open source and available at: https://fonts.google.com/

Lora

We use Lora for display type. Lora is a well-balanced, contemporary with roots ABCDEFGHIJKLMN in . We chose Lora for its editorial look and feel. It’s optimized for screen and print. OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 0123456789

Roboto

We use Roboto for body type. It’s not only open source but comes with a wide variety of font ABCDEFGHIJKLMN weights. Roboto has a dual nature: A mechanical skeleton and largely geometric forms. OPQRSTUVWXYZ At the same time, the font features friendly and open curves. abcdefghijklmn opqrstuvwxyz 0123456789

Display (header) type

Display type, also known as header type, is Lora-Regular (400) - 38px = 2.370em #313234 Line hieght: 48px typically 18 pixels and larger. It’s usually used in Header 1 small quantities for and effect. Display max-width:480px = 1.884em = 30px Line hieght: 40px Header 1 type helps define the hierarchy and stands out from rest of the page content.

Example: header 1, header 2, header 3, header 4 Lora-Regular (400) - 28px = 1.778em #313234 Line hieght: 38px Header 2 and title max-width:480px = 1.577em = 25px Line hieght: 35px Header 2 Body type Body type, also known as text type, is type that is Lora-Regular (400) - 21px = 1.333em #313234 Header 3 designed to be read in large quantities at a small Line hieght: 31px max-width:480px = 1.202em = 19px font size. It is usually less than 18 pixels. Line hieght: 29px Header 3 Example: Most newspaper, magazine, and web page text. Lora-Regular (400) - 18px = 1.111em #313234 Header 4 Line hieght: 28px

max-width:480px = 1.050em = 17px Header 4 Line hieght: 27px

Roboto-Regular (400) - 18px = 1.111em #404144 Sub header Line hieght: 28px

max-width:480px = 1.050em = 15px Sub header Line hieght: 25px (Note: If sub header is needed use only under H1)

Roboto-Medium (500) - 19px = 1.202em #ffffff navigation label max-width:480px = 1em = 16px

Roboto-Light (300) - 16px = 1em #404144 Body 1 - Primary Line hieght: 26px

max-width:480px = .90em = 14px Line hieght: 24px

Roboto-Bold (700) - 16px = 1em #404144 Body 2 - Strong Line hieght: 26px

max-width:480px = .90em = 14px Line hieght: 24px

Roboto-Med - 16px = 1em #0066cc I’m a link max-width:480px = .90em = 14px

Roboto-Med - 16px = 1em #0066cc I’m a link hover max-width:480px = .90em = 14px

Roboto-Med - 16px = 1em #660099 I’m a visited link max-width:480px = .90em = 14px

Footer links: Roboto-Light - 16px = 1em #404144 with underline I’m a link max-width:480px = .90em = 14px

Roboto-Medium - 16px = 1em #404144 with underline I’m a link hover max-width:480px = .90em = 14px

Link style on dark background: Roboto-Light - 16px = 1em #fff with underline max-width:480px = .90em = 14px I’m a link

Roboto-Medium - 16px = 1em #fff with underline max-width:480px = .90em = 14px I’m a link hover

Note: 16px body size is mandated by Medicare

Line height To achieve proper readability and appropriate Header 2: Lora-Regular - font size: 28px, Line height : 38px, : 38px

pacing, line heights are 10px more than the font Font size: 28px 28px 38px Children’s bedtime story: size. Line height : 38px 10px The crow and the pitcher story Leading: 38px 38px In a spell of dry weather, when the Birds could find very little to drink, a thirsty Crow found a pitcher with a little water in it. But the pitcher was high and had a narrow neck, and no matter how he tried, the Crow could not reach the water. The poor thing felt as if he must die of thirst. Then an idea came to him. Picking up some small pebbles, he dropped them into the pitcher one by one. With each pebble the water rose a little higher until at last it was near enough so he could drink. In a pinch, a good use of our wits may help us out.

Line breaking Don’t. Do. Avoid big indentations, hyphenated words, widows, and orphans. Don’t leave large gaps and orphans on a line.

Children’s bedtime story: Children’s bedtime story: The crow and the pitcher story The crow and the pitcher story

In a spell of dry weather, when the Birds In a spell of dry weather, when the Birds could find very little to drink, a thirsty could find very little to drink, a thirsty Crow found a pitcher with a little water in Crow found a pitcher with a little water it. But the pitcher was high and had a in it. But the pitcher was high and had a narrow neck, and no matter how he tried, narrow neck, and no matter how he tried, the Crow could not reach the water. The the Crow could not reach the water. poor thing felt as if he must die of thirst. The poor thing felt as if he must die of Then an idea came to him. Picking up thirst. Then an idea came to him. Picking some small up some small pebbles, he dropped them pebbles, he dropped them into the pitch- into the pitcher one by one. With each er one by one. With each pebble the pebble the water rose a little higher until water rose a little higher until at last it at last it was near enough so he could was near enough so he could drink. In a drink. In a pinch, a good use of our wits pinch, a good use of our wits may help us may help us out. out.

Don’t justify text Don’t. Don’t. Justification works by adding white space between the words in each line so all lines are the same length. Don’t justify all lines Don’t justify with last line aligned center

Justification works best in books and magazines Children’s bedtime story: Children’s bedtime story: (printed material) and not as well in webpage The crow and the pitcher story The crow and the pitcher story layouts. In a spell of dry weather, when the Birds In a spell of dry weather, when the Birds could find very little to drink, a thirsty Crow could find very little to drink, a thirsty found a pitcher with a little water in it. But Crow found a pitcher with a little water the pitcher was high and had a narrow in it. But the pitcher was high and had a neck, and no matter how he tried, the Crow narrow neck, and no matter how he tried, could not reach the water. The poor thing the Crow could not reach the water. felt as if he must die of thirst. Then an idea The poor thing felt as if he must die of came to him. Picking up somesmall peb- thirst. Then an idea came to him. Picking bles, he dropped them into the pitcher one up some small pebbles, he dropped them by one. With each pebble the water rose a into the pitcher one by one. With each little higher until at last it was near enough pebble the water rose a little higher until so he could drink. In a pinch, a good use of at last it was near enough so he could our wits may help us out. drink. In a pinch, a good use of our wits may help us out.

Don’t right or center-align text Don’t. Don’t. Instead, left align

Don’t align right Don’t align center

Children’s bedtime story: Children’s bedtime story: The crow and the pitcher story The crow and the pitcher story

In a spell of dry weather, when the Birds In a spell of dry weather, when the Birds could find very little to drink, a thirsty could find very little to drink, a thirsty Crow found a pitcher with a little water Crow found a pitcher with a little water in it. But the pitcher was high and had a in it. But the pitcher was high and had a narrow neck, and no matter how he tried, narrow neck, and no matter how he the Crow could not reach the water. tried, the Crow could not reach the The poor thing felt as if he must die of water. thirst. Then an idea came to him. Picking The poor thing felt as if he must die of up some small pebbles, he dropped them thirst. Then an idea came to him. into the pitcher one by one. With each Picking up some small pebbles, he pebble the water rose a little higher until dropped them into the pitcher one by at last it was near enough so he could one. With each pebble the water rose a drink. In a pinch, a good use of our wits little higher until at last it was near may help us out. enough so he could drink. In a pinch, a good use of our wits may help us out.

Color contrast: Level AA Don’t. Do. Web content must pass the color contrast check for level AA.

WCAG AA: Fail WCAG AA: Pass I’m normal text I’m normal text It requires a contrast ratio of 4.5:1 for WCAG AAA: Fail WCAG AAA: Pass normal text and 3:1 for large text.

WCAG AA: Fail WCAG AA: Pass I’m large text I’m large text WCAG AAA: Pass Resource: WCAG AAA: Fail http://webaim.org/resources/contras WCAG AA: Fail WCAG AA: Pass tchecker/ I’m normal text I’m normal text WCAG AAA: Fail WCAG AAA: Pass

WCAG AA: Fail WCAG AA: Pass I’m large text WCAG AAA: Fail I’m large text WCAG AAA: Pass

Don’t break web conventions

The link color is blue Don’t. Do.

I’m a link I’m a link

Don’t use blue headers. Blue is the web convention for a clickable elements and I’m a header I’m a header we do not want to confuse users.