Fonts

Typeface: Lato san serif (Google Font) Lato is our primary font.

It is used for all headlines, support headlines, subheads, body copy, link copy, captions for images, drop-down menu headers, and drop-down menu subhead. Mapbox mapsdoes not use Lato.

light

ABCĆDEFGHIJKL MNOPQRSŠTUVW XYZŽabcćdefghijk lmnopqrsštuvwxyz ž1234567890‘?’“!” (%)[#]{@}/&\<-+÷× =>®©$€£¥¢:;,.*

Regular

ABCĆDEFGHIJKL MNOPQRSŠTUVW XYZŽabcćdefghijk lmnopqrsštuvwxyz ž1234567890‘?’“!” (%)[#]{@}/&\<-+÷× =>®©$€£¥¢:;,.*

Bold

ABCĆDEFGHIJKL MNOPQRSŠTUVW XYZŽabcćdefghijk lmnopqrsštuvwxyz ž1234567890‘?’“!” (%)[#]{@}/&\<-+÷× =>®©$€£¥¢:;,.*

Font stacks

The ordered list of fonts that contains a primary font and an optional fallback font or fonts.

Primary hierarchy {font-family: 'Lato', Verdana, Helvetica, Arial, sans-serif;}

Monospace {--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;}

Mapbox: "Open Sans Regular" is the primary font and "Arial Unicode MS Regular" is the fallback font for our maps.

Typography

The Font style or typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing.

Use typography to create clear hierarchies to guide users through the content and experience. It is the core structure of any well designed interface.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

An abbreviation of the name Ministry of Economic Development, Job Creation and trade is MEDJCT.

Emphasis classes

text-muted tellus ac cursus commodo, tortor mauris nibh.

text-secondary sem lacinia quam venenatis vestibulum.

text-warning nollo des malesuada magna mollis euismod.

text-danger ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Display header 1

Display header 2

Display header 3

Display header 4

Styles

Light 300

Regular 400

Bold 700

Black 900

Typographic Hierarchy


H1: The five boxing wizards jump quickly.

H2: How vexingly quick daft zebras jump!

H3: The quick brown fox jumps over a lazy dog.

H4: Watch "Jeopardy!", Alex Trebek's fun TV quiz game.

p intro: Pack my box with five dozen liquor jugs.

p lead: A wizard's job is to vex chumps quickly in fog.

p: Waxed and quivering, jockeys fumble the prize.

Text style Weight Size (px) Line height (px)
titleblock h1 700 48 57.6
banner-copy h1 700 32.48 34.8
Title 2 Regular 17 22
Title 3 Regular 15 20
intro 300 26 39
lead 700 20 30
body p 300 16 27
blockquote wtwig-quote 400 25 38
Video title 700 25 38
Jumbotron display-4 100 25 38
blockquote quote lead 300 20 32
Footnote small 400 14.4 21.6

Accessibility

Fonts that are basic and simple with no extra decorations are favored as they are easier to read. With decorative fonts, those who have visual impairments or reading disabilities are at a disadvantage. Sans serif fonts are generally better to display on computers and mobile devices because the “ticks” and “tails” of serif fonts take up a larger amount of space on a screen.

Accessibility: Visual Impairments

To meet WCAG 2.0 Level AA standards:

Guideline 1.4.4 – Resize Text: ensure visually rendered text can be scaled successfully so it can be read by people with mild visual disabilities, without requiring the use of assistive technology such as a screen magnifier content satisfies success criterion if it can be scaled up to 200%, which is twice the width and height.