What font does theguardian.com use?

theguardian.com’s website uses three typefaces: GuardianTextSans (headings and body text), served from assets.guim.co.uk; GH Guardian Headline, served from assets.guim.co.uk; Guardian Headline Full, served from assets.guim.co.uk.

What are theguardian.com’s brand colours?

The main colours on theguardian.com are Light Fire Brick (#C70000), Steel Blue (#0077B6), Midnight Blue (#052962), Gold (#FFE500), Medium Violet Red (#BB3B80) and Light Sienna (#866D50).

What colour is theguardian.com’s text and background?

Body text is #121212 on a #FFFFFF background.

Where is theguardian.com’s logo from?

The logo shown in this guide was found on theguardian.com’s homepage. For official logo files and usage rules, check theguardian.com’s own brand or press page.

Is this theguardian.com’s official style guide?

No. SiteStyleGuide made it from theguardian.com’s public web pages on 26 October 2026, and isn’t affiliated with theguardian.com. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from theguardian.com’s public web pages. Not affiliated with or endorsed by theguardian.com. The real site is theguardian.com ↗

Unofficial style guide

theguardian.comstyle guide

theguardian.com’s website (theguardian.com) uses GuardianTextSans for its headings and body text. Its palette is led by Light Fire Brick (#C70000), Steel Blue (#0077B6) and Midnight Blue (#052962), with #121212 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: theguardian.com
Typefaces: GuardianTextSans, GH Guardian Headline, Guardian Headline Full
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the theguardian.com homepage on a desktop screen — Screenshot of theguardian.com on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the theguardian.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Latest news, sport and opinion from the Guardian; ● 48 / 60 characters
Meta description: Latest news, sport, comment, analysis and reviews from Guardian Australia; ● 73 / 160 characters
Language: en
Theme colour: #052962

In search results

theguardian.comhttps://www.theguardian.com/au

Latest news, sport and opinion from the Guardian

Latest news, sport, comment, analysis and reviews from Guardian Australia

When shared

No og:image, so no picture

theguardian.com

Latest news, sport and opinion from the Guardian

Latest news, sport, comment, analysis and reviews from Guardian Australia

Logo & favicons

Found as: SVG in the header. SVG, 300 × 100.

Logo

On white

On black

On Light Fire Brick

Favicons

8 found

512 px · PNG apple-touch-icon
512 px · PNG manifest
360 px · PNG apple-touch-icon
240 px · PNG apple-touch-icon
120 px · PNG apple-touch-icon
56 px · SVG apple-touch-icon
56 px · SVG manifest
32 px · ICO icon

Latest news, sport and opinion from the Guardian

Light browser tab

Latest news, sport and opinion from the Guardian

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#121212) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 25.6%
Near Black 16.8%
Off White 15.2%
Dark Grey 8.3%
Light Fire Brick 7.5%
Steel Blue 5.8%
Midnight Blue 4.3%
Gold 3.4%
Medium Violet Red 2.9%
Light Sienna 2.1%
Deep Royal Blue 1.8%
Purple 1.4%
Dark Red 1.4%
Deep Sienna 1.3%
Light Royal Blue 1.2%
Deep Fire Brick 1%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.73:1 AAA

On white
—

Background, text, graphic · inline style on <section>, --kicker-text-live
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.73:1 AAA

Text, graphic · --section-toggle-button-hover, --expandingWrapper--border
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 14

On text
13.66:1 AAA

On white
1.37:1 Fail

Background, border, text · --section-border, --expandingWrapper--horizontalRules
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 56

On text
3.78:1 AA large

On white
4.95:1 AA

Text, graphic, border · --section-toggle-button, --accordion-title-row-fill

Colours

Brand colours and accents, most used first

Light Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 22

On text
3.06:1 AA large

On white
6.13:1 AA

Text, background, border · inline style on <div>, --section-date
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 35 0 29

On text
3.85:1 AA large

On white
4.87:1 AA

Text, border · --apps-directory-page-nav-primary-link-color, --article-section-title-sport
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
95 58 0 62

On text
1.34:1 Fail

On white
14.00:1 AAA

Background, theme, text · --button-background-primary, --callout-submit-background
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 10 100 0

On text
14.68:1 AAA

On white
1.28:1 Fail

Background, text · --age-warning-background, --byline-background
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 68 32 27

On text
3.61:1 AA large

On white
5.18:1 AA

Text, border · --article-section-title-lifestyle, --crossword-clues-header-border-top
Light Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 19 40 47

On text
3.85:1 AA large

On white
4.86:1 AA

Text, border · --article-section-title-culture, --section-border-culture
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 37 0 46

On text
2.40:1 Fail

On white
7.80:1 AAA

Used · --football-match-header-fixture-result-background, --match-tab-border-active
Purple

HEX

RGB

HSL

OKLCH

CMYK
0 100 17 51

On text
1.85:1 Fail

On white
10.14:1 AAA

Used · --product-button-primary-background, --product-card-border
Dark Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 45

On text
1.87:1 Fail

On white
10.01:1 AAA

Used · --eu-parliament-theleft, --uk-elections-democratic-unionist-party
Deep Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 65 100 22

On text
3.84:1 AA large

On white
4.88:1 AA

Text · --article-section-title-opinion, --article-link-border-hover
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
45 28 0 43

On text
3.36:1 AA large

On white
5.57:1 AA

Background, border · --masthead-nav-border, --masthead-nav-lines
Deep Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 96 89 33

On text
2.47:1 Fail

On white
7.59:1 AAA

Used · --design-tag-background, --discussion-primary-button-background

Gradients

linear-gradient( 90deg, #FFE500, #E4E5E8 60% )
linear-gradient( to right, #BABABA, #BABABA calc(50% - 10px), rgba(0, 0, 0, 0) calc(50% - 10px), rgba(0, 0, 0, 0) calc(50% + 10px), #BABABA calc(50% + 10px), #BABABA )
linear-gradient( to left,#FFFFFF 0px,rgba(255, 255, 255, 0.6) 60%,rgba(255, 255, 255, 0) 100% )

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

GuardianTextSans

Aa 400 Aa 700

GuardianTextSans

Served from assets.guim.co.uk · weights 400, 500, 700 · shown in a stand-in if you don’t have it

Aa 300 Aa 700

GH Guardian Headline

Served from assets.guim.co.uk · weights 300, 500, 700 · shown in a stand-in if you don’t have it

Aa 400

Guardian Headline Full

Served from assets.guim.co.uk · weights 400 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Body 100% / 1

Latest news, sport, comment, analysis and reviews from Guardian Australia

Paragraph 100%

Latest news, sport, comment, analysis and reviews from Guardian Australia

Small 100%

Latest news, sport, comment, analysis and reviews from Guardian Australia

Link 100%

Sizes in use

Most common across the site

34pxline 1.15 · 1 rules
28pxline 1.15 · 3 rules
24pxline 1.15 · 12 rules
20pxline 1.15 · 10 rules
17pxline 1.3 · 23 rules
15pxline 1.3 · 14 rules
14pxline 1.3 · 21 rules
12pxline 1.3 · 16 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

100% · 5×
50% · 5×
8px · 3×
40px · 2×
36px · 2×
4px · 2×

Shadows

0 0 0 3px #0077B6
0 0 0 1px rgba(0,0,0,0.1)
28px 0 rgba(0,0,0,0.4)
40px 0 rgba(0,0,0,0.4)

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

375

480

660

739

740

980

1140

1300

On a scale of 0 to 1440 px.

Content widths (max-width)

1300 px

1140 px

980 px

740 px

700 px

300 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 48 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does theguardian.com use?: theguardian.com’s website uses three typefaces: GuardianTextSans (headings and body text), served from assets.guim.co.uk; GH Guardian Headline, served from assets.guim.co.uk; Guardian Headline Full, served from assets.guim.co.uk.
What are theguardian.com’s brand colours?: The main colours on theguardian.com are Light Fire Brick (#C70000), Steel Blue (#0077B6), Midnight Blue (#052962), Gold (#FFE500), Medium Violet Red (#BB3B80) and Light Sienna (#866D50).
What colour is theguardian.com’s text and background?: Body text is #121212 on a #FFFFFF background.
Where is theguardian.com’s logo from?: The logo shown in this guide was found on theguardian.com’s homepage. For official logo files and usage rules, check theguardian.com’s own brand or press page.
Is this theguardian.com’s official style guide?: No. SiteStyleGuide made it from theguardian.com’s public web pages on 26 October 2026, and isn’t affiliated with theguardian.com. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

theguardian-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* theguardian.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/theguardian.com) */
:root {
  /* Colours */
  --text: #121212;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #121212;
  --colour-off-white: #DCDCDC;
  --colour-dark-grey: #707070;
  --colour-light-fire-brick: #C70000;
  --colour-steel-blue: #0077B6;
  --colour-midnight-blue: #052962;
  --colour-gold: #FFE500;
  --colour-medium-violet-red: #BB3B80;
  --colour-light-sienna: #866D50;
  --colour-deep-royal-blue: #005689;
  --colour-purple: #7D0068;
  --colour-dark-red: #8B0000;
  --colour-deep-sienna: #C74600;
  --colour-light-royal-blue: #506991;
  --colour-deep-fire-brick: #AB0613;
  --gradient-1: linear-gradient( 90deg, #FFE500, #E4E5E8 60% );
  --gradient-2: linear-gradient( to right, #BABABA, #BABABA calc(50% - 10px), rgba(0, 0, 0, 0) calc(50% - 10px), rgba(0, 0, 0, 0) calc(50% + 10px), #BABABA calc(50% + 10px), #BABABA );
  --gradient-3: linear-gradient( to left,#FFFFFF 0px,rgba(255, 255, 255, 0.6) 60%,rgba(255, 255, 255, 0) 100% );

  /* Typefaces */
  --font-other: 'GuardianTextSans', 'Guardian Text Sans Web', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande';

  /* Type scale */
  --text-body: 100%;
  --leading-body: 1;
  --text-p: 100%;
  --text-small: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 100%;
  --radius-2: 50%;
  --radius-3: 8px;
  --radius-4: 40px;
  --radius-5: 36px;
  --radius-6: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 375px;
  --breakpoint-2: 480px;
  --breakpoint-3: 660px;
  --breakpoint-4: 739px;
  --breakpoint-5: 740px;
  --breakpoint-6: 980px;
  --breakpoint-7: 1140px;
  --breakpoint-8: 1300px;
  --max-width-1: 1300px;
  --max-width-2: 1140px;
  --max-width-3: 980px;
  --max-width-4: 740px;
  --max-width-5: 700px;
  --max-width-6: 300px;
}

{
    "site": "theguardian.com",
    "source": "https://sitestyleguide.com/theguardian.com",
    "text": "#121212",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#121212",
            "rgb": [
                18,
                18,
                18
            ]
        },
        {
            "name": "Off White",
            "hex": "#DCDCDC",
            "rgb": [
                220,
                220,
                220
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#707070",
            "rgb": [
                112,
                112,
                112
            ]
        },
        {
            "name": "Light Fire Brick",
            "hex": "#C70000",
            "rgb": [
                199,
                0,
                0
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0077B6",
            "rgb": [
                0,
                119,
                182
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#052962",
            "rgb": [
                5,
                41,
                98
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFE500",
            "rgb": [
                255,
                229,
                0
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#BB3B80",
            "rgb": [
                187,
                59,
                128
            ]
        },
        {
            "name": "Light Sienna",
            "hex": "#866D50",
            "rgb": [
                134,
                109,
                80
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#005689",
            "rgb": [
                0,
                86,
                137
            ]
        },
        {
            "name": "Purple",
            "hex": "#7D0068",
            "rgb": [
                125,
                0,
                104
            ]
        },
        {
            "name": "Dark Red",
            "hex": "#8B0000",
            "rgb": [
                139,
                0,
                0
            ]
        },
        {
            "name": "Deep Sienna",
            "hex": "#C74600",
            "rgb": [
                199,
                70,
                0
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#506991",
            "rgb": [
                80,
                105,
                145
            ]
        },
        {
            "name": "Deep Fire Brick",
            "hex": "#AB0613",
            "rgb": [
                171,
                6,
                19
            ]
        }
    ],
    "fonts": [
        {
            "name": "GuardianTextSans",
            "stack": "GuardianTextSans, \"Guardian Text Sans Web\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Served from assets.guim.co.uk"
        },
        {
            "name": "GH Guardian Headline",
            "stack": "\"GH Guardian Headline\", \"Guardian Egyptian Web\", Georgia, serif",
            "weights": [
                300,
                500,
                700
            ],
            "source": "Served from assets.guim.co.uk"
        },
        {
            "name": "Guardian Headline Full",
            "stack": "'Guardian Headline Full', 'GH Guardian Headline', 'Guardian Egyptian Web', Georgia, serif",
            "weights": [
                400
            ],
            "source": "Served from assets.guim.co.uk"
        }
    ]
}

Other websites using GuardianTextSans as their main typeface

guardian.co.uk

guardian.co.uk · set in GuardianTextSans
Save

Websites whose lead colour is closest to theguardian.com’s

Il Post

ilpost.it · 3 days ago
Save
I

ITmedia

itmedia.co.jp · 12 hours ago
Save
HELLO!

hellomagazine.com · 4 days ago
Save
Free

free.fr · 5 days ago
Save

Captured from theguardian.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by theguardian.com; this guide describes the public website for reference.

theguardian.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Dark Grey

Colours

Light Fire Brick

Steel Blue

Midnight Blue

Gold

Medium Violet Red

Light Sienna

Deep Royal Blue

Purple

Dark Red

Deep Sienna

Light Royal Blue

Deep Fire Brick

Gradients

GuardianTextSans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run theguardian.com?

Also set in GuardianTextSans

guardian.co.uk

Similar colours

Il Post

ITmedia

HELLO!

Free

Title &
description