Typography

object Typography

App typography presets. The Guardian has four bespoke typefaces, which were created for different purposes. When used effectively, they create contrast and alter the tone in which text is read.

Where do we use app typography presets? Any content crafted and developed within the app's native environment, including the app fronts, My Guardian, custom modals, and supporter revenue messages.

Note: Article pages and sign-in/registration pages are presented in a webview, hence utilising web typography presets.

Properties

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for headlines, headings and any short form text like pull quotes, bylines and titles.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for article body text.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for multiple sentences/paragraphs of text, like paragraphs of text on marketing pages.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations. Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.Use for interactive page elements like buttons and text input fields and for meta information like datelines, image captions and data visualisations.

Link copied to clipboard

Use for impact. Ideal for marketing messages, page headers and numerals. Use sparingly and at large sizes only.

Link copied to clipboard

Use for impact. Ideal for marketing messages, page headers and numerals. Use sparingly and at large sizes only.

Link copied to clipboard

Use for impact. Ideal for marketing messages, page headers and numerals. Use sparingly and at large sizes only.