Typography

Open in Storybook Open in Figma

This page describes basic font and text components. See the Typography examples for examples on how to combine them.

The typography and spacing rules given here cover the basic appearance in George. Individual components (e.g. FunctionCard) might overrule some of these rules in certain cases. In such a case, those exceptions are described in the respective component pages of GDS.

Headlines

Headlines are set using <h1> to <h4> elements. Not all headlines are allowed in every context:

• There is only one <h1> per page, serving as page title.
• Exception to the initial rule: An open Modal counts as a page within a page (that traps the user inside of it), in this case the Modal title adds another <h1>.
• Outside of George Store, <h1> on grey background have become obsolete, as the page title will be set in StripeHeader and Modal.
• Two headlines can never follow each other directly.
• <h2> and <h3> on grey background are used to structure main content.
• <h2>, <h3>, and <h4> are used in cards for headlines. They all look the same. The actual level of the headline to use depends on the last headline used outside the card so that in pure text mode it is a continuation of the outer headline level.

Paragraphs

Regular text is set using <p> elements. Minor/smaller text is set by adding .g-small. Micro text is set by adding .g-micro. Faded text is set by adding .g-faded.

HINT Do not use unstyled text, always use <p> elements.

HINT As .g-small also adjusts the line height, it should be used on block-level elements. <small> elements may be used in addition inside any paragraph, and especially in those that have .g-small applied, to mark fine print semantically. But use of these elements does not result in any visual changes (e.g. no smaller font), only .g-small does.

HINT Avoid <br/> and convert them to <p> instead.

Emphasis

George uses two kinds of emphasized text: bold and ‘quoted’. Bold is used if whole sentences are important. Quotes are used, if single words or short phrases within a sentence need to be emphasized:

Hyperlinks

Ordinary in-line hyperlinks are set using <a> elements within <p> elements.

Lists

George lists come in different flavours. The List component is used to create unordered and ordered lists (<ul>, <ol>). If you need a definition list (<dl>), head over to the LabeledList component.

Variants

First and foremost, appearance of ordered and unorded lists is controlled via the variant prop.

With bullet points

This is the default, and what you get if you explicitly set List.VARIANT.BULLETS.

With numbers

To display numbers as indicators, use List.VARIANT.NUMBERS. To see an example, scroll down to Ordered lists.

With checkmarks

George Store lists feature checkmarks instead of bullet points, so there you may want to set List.VARIANT.CHECKMARKS.

Without an indicator

Plain lists (List.VARIANT.PLAIN) have no visual indication that they are lists at all, they look identical to a sequence of paragraphs.

To completely remove styles, List.VARIANT.UNSTYLED exists. If you additionally make a plain List more compact, the margin between list items is removed, but the unstyled variant goes one step further, as it also removes the List’s outer margin.

Lists with custom icons

Ordered lists

The List’s ordered prop turns an unordered list (<ul>) into an ordered one (<ul>).

Compact lists

You can add set the compact prop, which eliminates spacing between list items.

Small and faded lists

There are even more options, you can make a List display with faded and/or small text.

If a List is part of legal text (i.e., a region with the .g-small modifier applied), small is automatically applied. In George Store, legal text is usually faded too.

Separators

A 1px divider line can be created using the Separator component. It comes with some spacing before & after, which can be removed with the compact prop.

When the thematicBreak prop is set, Separator will turn into a thematic break (a.k.a. horizontal rule). To quote MDN:

The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

This is why we only care about the visual aspect of the component, make sure to only use thematicBreak when it makes semantic sense.

Variations

Variations for the aforementioned typographic building blocks exist. So when used under the following specific circumstances, you may encounter certain areas of markup with an alternate look and feel.

Tabular numbers

If you need alignment for numeric values, you can add the .g-tabular modifier.

HINT In the example below, the dates and amounts on the left have the modifier applied; on the right without modifier for comparison.

Legal text

Sections containing legal text can be marked up with .g-small. Legal text is presented in smaller font size. For more information check out the legal text example in our Typography examples.

Miscellaneous

Selected text

George uses native colours provided by the operating system (or web browser) for selected text.

Text spacing

Due to rem rounding errors, spacings are usually +/-1px correct.