Playground

Font Guide

Usage

In React

The Typography component defines a typographical styles for a region of the DOM.

It is not necessary to wrap all text in Typography tags! Feel free to render <h1>, or <h2>, <p> tags and such, rather than doing e.g. <Typography component="h1" /> for everything.

If you want to modify the default typographical styles in a certain region, that's when you should use Typography.

In vanilla

Typography is provided by a series of CSS classes and <h*> tags; see below.

Headings

Structural headings should use <h1> through <h6> tags as appropriate for the document, rather than choosing a heading based on its font size. (You can then adjust the font size of a heading; see "Size" below.)

default h1 tag

default h2 tag

default h3 tag

default h4 tag

default h5 tag

default h6 tag

For comparison, here is a paragraph of regular body text. Etenim, siste, me iuva, auscultaque. Gelu redivit cum inventione novissima. Nescioquid me constringit. Fluo ceu hasta baleanarum necandarum noctu et quotidie. Umquam hoc desistetne? Ego dubito. Lucernis restinctis luceam. Ad ultimum flecto microphonem ut vandal. Scenam illumino et ineptum incero etsi candelam faciam.

Size

A heading or paragraph can then override its default font size by specifying one of the Visage text sizes:

<>
  <Typography textSize={1}>Text Size 1</Typography>
  <Typography textSize={2}>Text Size 2</Typography>
  <Typography textSize={3}>Text Size 3</Typography>
  <Typography textSize={4}>Text Size 4</Typography>
  <Typography textSize={5}>Text Size 5</Typography>
  <Typography textSize={6}>Text Size 6</Typography>
  <Typography textSize={7}>Text Size 7</Typography>
</>

You can change the default font size of a heading (or any other tag) by adding one of these text sizes:

<>
  <h3 className="mt-0">I'm a default h3 tag</h3>
  <Typography component="h3" textSize={4} mt={0}>
    I'm an h3 using Text Size 4
  </Typography>
</>

<Typography textSize={1}>Text Size 1</Typography>

<div class="text-size-1">Text Size 1</div>
<!-- doesn't have to be a div tag -->

Alignment

Text can be aligned to the left, center, or right:

<>
  <Typography align="left">left</Typography>
  <Typography align="center">center</Typography>
  <Typography align="right">right</Typography>
</>

<div class="text-left">left</div>
<div class="text-center">center</div>
<div class="text-right">right</div>

Color

<>
  <Typography textColor="dark-grey">dark-grey</Typography>
  <Typography textColor="white" style={{ backgroundColor: 'black' }}>
    white
  </Typography>
  <Typography textColor="holiday">holiday</Typography>
  <Typography textColor="error">error</Typography>
  <Typography textColor="alert">alert</Typography>
</>

<!-- doesn't have to a be a div tag; use on any tag -->
<div class="text-color-holiday">holiday</div>

Weight

You can adjust the font weight:

<>
  <Typography weight="standard">standard font weight</Typography>
  <Typography weight="bold">bold font weight</Typography>
  <Typography weight="bold">
    bold text with{' '}
    <Typography as="span" weight="not-bold">
      not-bold font weight
    </Typography>{' '}
    in the middle of it{' '}
  </Typography>
</>

<!-- doesn't have to a be a div tag; use on any tag -->
<div class="strong">bold text</div>

Note: you can also use the <strong> tag to make the text bold.

Pricing

We also provide standard typography for product price information. See Pricing for more.

All Caps

You can use the "all caps" option to render the text with the appearance of all caps.

Use this instead of simply typing text with ALL CAPITAL LETTERS! This is an accessibility requirement. Some screen readers will interpret a series of capital letters as an acronym, and will read the word out letter by letter. Visage's "all caps" option visually styles the text as all caps, without changing the letters in the underlying text, so screen readers will read the word as a regular word.

<Typography allCaps>{"I don't know what we're yelling about"}</Typography>

<!-- doesn't have to a be a div tag; use on any tag -->
<div class="all-caps">I don't know what we're yelling about</div>

No-wrap

The "no-wrap" option on type will prevent the browser from putting a line break in the middle of that type.

<Typography noWrap>
  There won't ever be a line break in this sentence.
</Typography>

<span class="nowrap">There won't ever be a line break in this sentence.</span>

Overline

An "overline" is text that goes right above a heading, providing broader-level context for the heading, often to indicate the product category of the product described by the heading.

<>
  <Typography overline my="2">
    Overline
  </Typography>
  <Typography textSize="3" weight="bold">
    A heading
  </Typography>
</>

<!-- doesn't have to a be a div tag; use on any tag -->
<div class="overline">Overline</div>

Components

Guidelines

Do

• Use the various type sizes appropriately to keep content hierarchy on the page.

Don't

• Use any additional fonts other than these in designs.

• Introduce new type sizes.

Designer Guidelines

• The optimal line length for your body text is 50-60 characters per line, including spaces. If a line is too short, readers have to travel back too quickly, breaking their rhythm — and if a line is too long, it makes it difficult for the readers' eyes to focus, and they will not be able to gauge where lines start and end.

Developer Guidelines

• First, choose which heading tag to use (<h1> through <h6>) based on the semantic structure of the page's content. Then apply the text size that matches the intended visual look. Any text size can be used on any heading tag!

• For SEO reasons, each page should contain only one <h1>, and it should be the page title.

Accessibility Guidelines

• Heading tags must follow the semantic structure of the page. The page title (and only) the page title) should always be an <h1> tag. The next level of heading for the page should be an <h2>, and so on.

• Heading tags should only be used for text that's actually a heading, not just because the text needs to be a particular size! If the text is not a heading, use another tag (like <p> or <div>) and apply a text size to it.

• Text and background must meet a 4.5:1 color contrast ratio.