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.

Default lists

Plain lists

Plain (i.e. unstyled) lists have no visual indication that they are lists at all, they look identical to a sequence of paragraphs.

You can add the also available .g-ul-compact modifier, which eliminates spacing between list items.

Bullet lists with checkmarks

George Store lists feature check-marks as bullet points.

Ordered lists

Unsorted lists with different icons

Labeled lists

See LabeledList component.

Separators

Horizontal rulers / separators (when not part of a <h1>) are set by using the <hr/> tag.

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&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.