What font does FAZ.NET use?

FAZ.NET’s website uses four typefaces: Source Sans 3 (headings and body text), self-hosted; Source Serif 4, self-hosted; DV Source Sans 3, self-hosted; DV Source Serif 4, self-hosted.

What are FAZ.NET’s brand colours?

The main colours on faz.net are Midnight Blue (#110A35), Fire Brick (#C60000), Royal Blue (#2563EB), Sienna (#A85100), Forest Green (#478517) and Steel Blue (#007AFF).

What colour is FAZ.NET’s text and background?

Body text is #212529 on a #FFFFFF background.

Is this FAZ.NET’s official style guide?

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

FAZ.NET Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Aktuelle Nachrichten online - FAZ.NET; ● 37 / 60 characters
Meta description: News, Nachrichten und aktuelle Meldungen aus allen Ressorts. Politik, Wirtschaft, Sport, Feuilleton und Finanzen im Überblick.; ● 126 / 160 characters
Site name: FAZ.NET
og:title: Aktuelle Nachrichten online - FAZ.NET
og:description: News, Nachrichten und aktuelle Meldungen aus allen Ressorts. Politik, Wirtschaft, Sport, Feuilleton und Finanzen im Überblick.
Language: de

In search results

FAZ.NEThttps://www.faz.net/aktuell/

Aktuelle Nachrichten online - FAZ.NET

News, Nachrichten und aktuelle Meldungen aus allen Ressorts. Politik, Wirtschaft, Sport, Feuilleton und Finanzen im Überblick.

When shared

faz.net

Aktuelle Nachrichten online - FAZ.NET

News, Nachrichten und aktuelle Meldungen aus allen Ressorts. Politik, Wirtschaft, Sport, Feuilleton und Finan…

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

4 found

144 px · PNG icon
144 px · PNG icon
64 px · ICO icon
14 px · SVG icon

Aktuelle Nachrichten online - FAZ.NET

Light browser tab

Aktuelle Nachrichten online - FAZ.NET

Dark browser tab

Back to top ↑

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 (#212529) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Cool Near Black 33.4%
White 29.7%
Grey 9.3%
Off White 8.9%
Midnight Blue 8.7%
Fire Brick 2.8%
Royal Blue 2.3%
Sienna 2.1%
Forest Green 1.5%
Steel Blue 1.5%

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

Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
20 10 0 84

On text
—

On white
15.43:1 AAA

Text, background, graphic · #storifyme-headline h2, .mmContainer_header .title
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
15.43:1 AAA

On white
—

Background, text, border · --tw-shadow-color, body
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 44

On text
4.71:1 AA

On white
3.28:1 AA large

Text, border, background · .mmContainer_header .title a:hover, .bg-grey-400
Off White

HEX

RGB

HSL

OKLCH

CMYK
3 0 0 7

On text
13.06:1 AAA

On white
1.18:1 Fail

Background, border · .mmContainer .button, .mmContainer .button:hover

Colours

Brand colours and accents, most used first

Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
68 81 0 79

On text
1.22:1 Fail

On white
18.77:1 AAA

Text, background, border · .mmContainer .button, .bg-darkblue
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 22

On text
2.50:1 Fail

On white
6.17:1 AA

Background, text · .bg-red, .before\:bg-\[\#C60000\]:before
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
84 58 0 8

On text
2.98:1 Fail

On white
5.17:1 AA

Text, border · --tw-ring-color, input:where([type=checkbox])
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 52 100 34

On text
2.82:1 Fail

On white
5.47:1 AA

Text, border · .text-orange, .general-error-message
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
47 0 83 48

On text
3.41:1 AA large

On white
4.53:1 AA

Text, graphic, border · .text-green, .fill-green
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 52 0 0

On text
3.84:1 AA large

On white
4.02:1 AA large

Background, text, border · --swiper-theme-color, .swiper-pagination-bullet-active

Gradients

linear-gradient(to top,)
linear-gradient(0deg,#0000004d 0,#0000001a 18%,#00000008)
linear-gradient(to bottom,)

Dark mode

Switched on by the site

White

#FFFFFF · --mm-black
Dark Grey

#555555 · --mm-grey-700
Dark Grey

#717171 · --mm-grey-600
Off White

#E8EDEE · --mm-faz-blue
Cool Near Black

#212529 · --mm-white
Light Grey

#AAAAAA · --mm-grey-400
Cool Charcoal

#323D46 · --mm-faz-grey
Light Grey

#C6C6C6 · --mm-grey-300
Grey

#8E8E8E · --mm-grey-500
Charcoal

#393939 · --mm-grey-900
Sandy Brown

#F89A44
Off White

#E3E3E3 · --mm-grey-200

Back to top ↑

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.

Source Sans 3

Aa 200 Aa 900

Source Sans 3

Self-hosted · weights 200, 400, 600, 700, 900 · headings, buttons, body · shown in a stand-in if you don’t have it

Aa 200 Aa 900

Source Serif 4

Self-hosted · weights 200, 400, 500, 900 · headings · shown in a stand-in if you don’t have it

Aa 200 Aa 900

DV Source Sans 3

Self-hosted · weights 200, 900 · buttons · shown in a stand-in if you don’t have it

Aa 200 Aa 900

DV Source Serif 4

Self-hosted · weights 200, 500, 900 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 2 23px weight 600 · uppercase · Source Sans 3

Aktuelle Nachrichten online - FAZ.NET

Body — Source Sans 3

News, Nachrichten und aktuelle Meldungen aus allen Ressorts. Politik, Wirtschaft, Sport, Feuilleton und Finanzen im Überblick.

Link calc(.875rem*1) / 1.4 weight 400 · Source Sans 3

Sizes in use

Most common across the site

44pxline 1 · 1 rules
23pxline 120% · 2 rules
22pxline 1.2 · 1 rules
16pxline 1.4 · 3 rules
15pxline 105% · 2 rules
14pxline 110% · 4 rules
13pxline 110% · 1 rules
11px1 rules

Back to top ↑

Elements

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

Elements

Button

Get started

.mmContainer .button · #E8EDEE · radius 2px

Corner radius

624.938rem · 6×
2px · 2×
50% · 2×
10px · 2×
.125rem · 2×
100% · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000

Back to top ↑

Layout

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

Grid

Breakpoints

768

920

1023

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px

1000 px

768 px

728 px

688 px

375 px

Back to top ↑

Notes

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

Notes

● FineThe title is 37 characters, short enough to show in full in search results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Back to top ↑

Questions

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

Questions

What font does FAZ.NET use?: FAZ.NET’s website uses four typefaces: Source Sans 3 (headings and body text), self-hosted; Source Serif 4, self-hosted; DV Source Sans 3, self-hosted; DV Source Serif 4, self-hosted.
What are FAZ.NET’s brand colours?: The main colours on faz.net are Midnight Blue (#110A35), Fire Brick (#C60000), Royal Blue (#2563EB), Sienna (#A85100), Forest Green (#478517) and Steel Blue (#007AFF).
What colour is FAZ.NET’s text and background?: Body text is #212529 on a #FFFFFF background.
Is this FAZ.NET’s official style guide?: No. SiteStyleGuide made it from faz.net’s public web pages on 28 October 2026, and isn’t affiliated with FAZ.NET. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

faz-net-tokens.css

Download

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

/* faz.net design tokens, from SiteStyleGuide (https://sitestyleguide.com/faz.net) */
:root {
  /* Colours */
  --text: #212529;
  --background: #FFFFFF;
  --colour-cool-near-black: #212529;
  --colour-white: #FFFFFF;
  --colour-grey: #8E8E8E;
  --colour-off-white: #E8EDEE;
  --colour-midnight-blue: #110A35;
  --colour-fire-brick: #C60000;
  --colour-royal-blue: #2563EB;
  --colour-sienna: #A85100;
  --colour-forest-green: #478517;
  --colour-steel-blue: #007AFF;
  --gradient-1: linear-gradient(to top,);
  --gradient-2: linear-gradient(0deg,#0000004d 0,#0000001a 18%,#00000008);
  --gradient-3: linear-gradient(to bottom,);

  /* Typefaces */
  --font-headings: 'Source Sans 3', 'Source Sans Fallback', 'Arial', sans-serif;
  --font-buttons: 'Source Sans 3', 'Source Sans Fallback', 'Arial', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Fallback', 'Arial', sans-serif;
  --font-other: 'DV Source Serif 4', 'Georgia', 'Garamond', serif;

  /* Type scale */
  --text-h2: 23px;

  /* Shape */
  --radius-1: 624.938rem;
  --radius-2: 2px;
  --radius-3: 50%;
  --radius-4: 10px;
  --radius-5: .125rem;
  --radius-6: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 768px;
  --breakpoint-2: 920px;
  --breakpoint-3: 1023px;
  --max-width-1: 1280px;
  --max-width-2: 1000px;
  --max-width-3: 768px;
  --max-width-4: 728px;
  --max-width-5: 688px;
  --max-width-6: 375px;
}

{
    "site": "faz.net",
    "source": "https://sitestyleguide.com/faz.net",
    "text": "#212529",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Cool Near Black",
            "hex": "#212529",
            "rgb": [
                33,
                37,
                41
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Grey",
            "hex": "#8E8E8E",
            "rgb": [
                142,
                142,
                142
            ]
        },
        {
            "name": "Off White",
            "hex": "#E8EDEE",
            "rgb": [
                232,
                237,
                238
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#110A35",
            "rgb": [
                17,
                10,
                53
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C60000",
            "rgb": [
                198,
                0,
                0
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#2563EB",
            "rgb": [
                37,
                99,
                235
            ]
        },
        {
            "name": "Sienna",
            "hex": "#A85100",
            "rgb": [
                168,
                81,
                0
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#478517",
            "rgb": [
                71,
                133,
                23
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007AFF",
            "rgb": [
                0,
                122,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "Source Sans 3",
            "stack": "\"Source Sans 3\", Source Sans Fallback, Arial, sans-serif",
            "weights": [
                200,
                400,
                600,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Source Serif 4",
            "stack": "\"Source Serif 4\", Source Serif Fallback, Georgia, serif",
            "weights": [
                200,
                400,
                500,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "DV Source Sans 3",
            "stack": "\"DV Source Sans 3\", Verdana, Arial, sans-serif",
            "weights": [
                200,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "DV Source Serif 4",
            "stack": "\"DV Source Serif 4\", Georgia, Garamond, serif",
            "weights": [
                200,
                500,
                900
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run faz.net?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/faz.net" title="FAZ.NET style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

FAZ.NETstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Cool Near Black

White

Grey

Off White

Colours

Midnight Blue

Fire Brick

Royal Blue

Sienna

Forest Green

Steel Blue

Gradients

Dark mode

Source Sans 3

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Zoom

expedia

vrbo

Vanta

FAZ.NETstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Cool Near Black

White

Grey

Off White

Colours

Midnight Blue

Fire Brick

Royal Blue

Sienna

Forest Green

Steel Blue

Gradients

Dark mode

Source Sans 3

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run faz.net?

Similar colours

Zoom

expedia

vrbo

Vanta

Title &
description