What font does CBS News use?

CBS News’s website uses four typefaces: Proxima Nova (headings), self-hosted; TTNorms Pro Serif Bold, self-hosted; Publico Headline, self-hosted; Publico Text (body text), self-hosted.

What are CBS News’s brand colours?

The main colours on cbsnews.com are Deep Fire Brick (#B60505), Steel Blue (#00789D), Light Fire Brick (#CC0E00), Deep Red (#E10500), Light Steel Blue (#0079D3) and Orange Red (#E04105).

What colour is CBS News’s text and background?

Body text is #101010 on a #FFFFFF background.

Where is CBS News’s logo from?

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

Is this CBS News’s official style guide?

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

CBS News 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: CBS News | Breaking News, Top Stories & Exclusive Coverage; ● 58 / 60 characters
Meta description: Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in the U.S. and around the world, along with trending stories in politics, health and more key topics.; ▲ 206 / 160 characters
Site name: CBS News
og:title: CBS News | Breaking News, Top Stories & Exclusive Coverage
og:description: Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in the U.S. and around the world, along with trending stories in politics, health and more key topics.
Language: en-US
Theme colour: #101010

In search results

CBS Newshttps://www.cbsnews.com/

CBS News | Breaking News, Top Stories & Exclusive Coverage

Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in the U.S. and around the world, along with trending sto…

When shared

cbsnews.com

CBS News | Breaking News, Top Stories & Exclusive Coverage

Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in th…

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 230 × 32.

Logo

On white

On black

On Deep Fire Brick

Favicons

8 found

192 px · PNG apple-touch-icon
152 px · PNG manifest
144 px · PNG manifest
128 px · PNG manifest
96 px · PNG manifest
72 px · PNG manifest
33 px · SVG shortcut icon mask-icon
32 px · PNG alternate icon

CBS News | Breaking News, Top Stories & Exclusive Coverage

Light browser tab

CBS News | Breaking News, Top Stories & Exclusive Coverage

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

Colour

Balance

How much each colour is used

White 45.3%
Deep Black 23.4%
Off White 8.7%
Light Black 7.4%
Deep Fire Brick 4.2%
Steel Blue 2.5%
Light Fire Brick 2.4%
Deep Red 1.7%
Light Steel Blue 1.1%
Orange Red 1.1%
Light Red 0.7%
Dark Red 0.6%
Royal Blue 0.5%
Deep Steel Blue 0.3%

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
19.03:1 AAA

On white
—

Text, background, graphic · html, .device--type-app.dark-mode.content--type-article .embed--type-file-mp3 .embed__
Deep Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 94

On text
—

On white
19.03:1 AAA

Text, background, graphic · .page--type-show-door:not(.page--type-sub-show):not(.has-door-reframe) .header--, html
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 9

On text
15.53:1 AAA

On white
1.23:1 Fail

Border, background · .site-header__container:not(.is--header-component-subnav) .site-nav__container_r, .no-touch .site-header__container .site-nav__container_right .site-nav__item .si
Light Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 87

On text
1.18:1 Fail

On white
16.10:1 AAA

Background, text · .device--type-app.dark-mode.content--type-article .content--type-article:not(.ha, .device--type-app.dark-mode.content--type-article .content__meta .byline__author

Colours

Brand colours and accents, most used first

Deep Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 97 97 29

On text
2.73:1 Fail

On white
6.97:1 AA

Background, text, border · .video-shelf--with-hero .item:first-of-type.item--type-cbsn_live .item__componen, .no-touch .site-header__container:not(.is--header-component-subnav) .site-nav__c
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 24 0 38

On text
3.78:1 AA large

On white
5.03:1 AA

Background · .show--name-face-the-nation:not(.page--type-sub-show):not(.has-door-reframe) .he, .show--name-face-the-nation:not(.page--type-sub-show):not(.has-door-reframe) .it
Light Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 93 100 20

On text
3.29:1 AA large

On white
5.78:1 AA

Background, border · .list-grid .item--type-cbsn_live .item__title-wrapper:before, .list-live-channel-shelf .component__title
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 98 100 12

On text
3.83:1 AA large

On white
4.97:1 AA

Background, text, border · .editors-picks-right-rail .item .item--asset-label.is-live, .has-story-redesign .story__right-rail-video .embed__headline.is-live:before
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 43 0 17

On text
4.24:1 AA large

On white
4.49:1 AA large

Background, text, border · .list-live-channel-shelf .item, .smart-banner-download__button
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 71 98 12

On text
4.47:1 AA large

On white
4.26:1 AA large

Background · .breaking-news .breaking-news__headline-wrapper:before, .item__thumb[data-asset-label="Breaking News"]:after
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 80 82 5

On text
4.76:1 AA

On white
4.00:1 AA large

Graphic, border · .list-grid.component--topic-thefreepress svg, .component.component--topic-thefreepress--rightrail .component__logo
Dark Red

HEX

RGB

HSL

OKLCH

CMYK
0 98 98 47

On text
1.87:1 Fail

On white
10.19:1 AAA

Background · .icon-pulse--red, .icon-pulse--disc
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 64 0 19

On text
2.60:1 Fail

On white
7.32:1 AAA

Text · .device--type-desktop div#cps-shaman-notifier .cps-container .cps-actions a, .device--type-desktop div#cps-shaman-notifier .cps-container .cps-content a
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 34 0 42

On text
2.88:1 Fail

On white
6.61:1 AA

Background · .show--name-cbs-essentials .content__header, .show--name-cbs-essentials .content__promo-image-wrapper

Gradients

linear-gradient(90deg,#00789d,rgba(0,120,157,0))
linear-gradient(90deg,rgba(0,120,157,0),#00789d)
linear-gradient(rgba(,1),rgba(,0.85))

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.

Proxima Nova

Aa 300 Aa 900

Proxima Nova

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

Aa 450 Aa 700

TTNorms Pro Serif Bold

Self-hosted · weights 450, 700 · headings · shown in a stand-in if you don’t have it

Aa 700 Aa 900

Publico Headline

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

Aa 400

Publico Text

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

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

Type scale

From the site’s CSS

Heading 1 2rem · 32 px / 32px weight 900 · Proxima Nova

CBS News

Heading 2 1.25rem · 20 px

CBS News | Breaking News, Top Stories & Exclusi…

Body 1.32rem · 21 px / 31px weight 400 · Publico Text

Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in the U.S. and around the world, a…

Paragraph 1rem · 16 px / 125% weight 450 · TTNormsPro Normal

Stay informed on today's latest breaking news and exclusive scoops from CBS News. Follow current events in the U.S. and around the world, a…

Link 12px / 1.25 weight 700 · Proxima Nova

Sizes in use

Most common across the site

20pxline 125% · 19 rules
18pxline 22px · 12 rules
16pxline 125% · 44 rules
15pxline 17px · 12 rules
14pxline normal · 18 rules
13pxline 15px · 9 rules
12pxline normal · 37 rules
11pxline normal · 12 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

Link

Read our latest news today.

a · #101010

Corner radius

4px · 60×
8px · 16×
50% · 12×
3px · 8×
100% · 4×
6px · 3×

Shadows

0 2px 4px 0 rgba(0,0,0,.1)
0 4px 4px 0 rgba(0,0,0,.25)
0 4px 8px 0 rgba(0,0,0,.2)
0 -4px 12px 0 rgba(0,0,0,.25)

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

320

412

767

768

992

1019

1020

1360

On a scale of 0 to 1440 px.

Content widths (max-width)

1320 px

1020 px

980 px

640 px

350 px

300 px

Back to top ↑

Notes

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

Notes

● FineThe title is 58 characters, short enough to show in full in search results.
▲ CheckThe description is 206 characters. Search results usually show about 160.
▲ 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 CBS News use?: CBS News’s website uses four typefaces: Proxima Nova (headings), self-hosted; TTNorms Pro Serif Bold, self-hosted; Publico Headline, self-hosted; Publico Text (body text), self-hosted.
What are CBS News’s brand colours?: The main colours on cbsnews.com are Deep Fire Brick (#B60505), Steel Blue (#00789D), Light Fire Brick (#CC0E00), Deep Red (#E10500), Light Steel Blue (#0079D3) and Orange Red (#E04105).
What colour is CBS News’s text and background?: Body text is #101010 on a #FFFFFF background.
Where is CBS News’s logo from?: The logo shown in this guide was found on cbsnews.com’s homepage. For official logo files and usage rules, check CBS News’s own brand or press page.
Is this CBS News’s official style guide?: No. SiteStyleGuide made it from cbsnews.com’s public web pages on 28 October 2026, and isn’t affiliated with CBS News. 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

cbsnews-com-tokens.css

Download

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

/* cbsnews.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/cbsnews.com) */
:root {
  /* Colours */
  --text: #101010;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-deep-black: #101010;
  --colour-off-white: #E8E8E8;
  --colour-light-black: #212121;
  --colour-deep-fire-brick: #B60505;
  --colour-steel-blue: #00789D;
  --colour-light-fire-brick: #CC0E00;
  --colour-deep-red: #E10500;
  --colour-light-steel-blue: #0079D3;
  --colour-orange-red: #E04105;
  --colour-light-red: #F2312C;
  --colour-dark-red: #880303;
  --colour-royal-blue: #004ACE;
  --colour-deep-steel-blue: #006294;
  --gradient-1: linear-gradient(90deg,#00789d,rgba(0,120,157,0));
  --gradient-2: linear-gradient(90deg,rgba(0,120,157,0),#00789d);
  --gradient-3: linear-gradient(rgba(,1),rgba(,0.85));

  /* Typefaces */
  --font-headings: 'Proxima Nova', sans-serif;
  --font-buttons: 'Proxima Nova', sans-serif;
  --font-body: 'Publico Text', serif;
  --font-other: 'TTNormsPro Bold', 'TTNormsPro Bold Fallback', 'TTNormsPro Bold Fallback Android', sans-serif;

  /* Type scale */
  --text-h1: 2rem;
  --leading-h1: 32px;
  --text-h2: 1.25rem;
  --text-body: 1.32rem;
  --leading-body: 31px;
  --text-p: 1rem;
  --leading-p: 125%;
  --text-a: 12px;
  --leading-a: 1.25;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 412px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 992px;
  --breakpoint-6: 1019px;
  --breakpoint-7: 1020px;
  --breakpoint-8: 1360px;
  --max-width-1: 1320px;
  --max-width-2: 1020px;
  --max-width-3: 980px;
  --max-width-4: 640px;
  --max-width-5: 350px;
  --max-width-6: 300px;
}

{
    "site": "cbsnews.com",
    "source": "https://sitestyleguide.com/cbsnews.com",
    "text": "#101010",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep Black",
            "hex": "#101010",
            "rgb": [
                16,
                16,
                16
            ]
        },
        {
            "name": "Off White",
            "hex": "#E8E8E8",
            "rgb": [
                232,
                232,
                232
            ]
        },
        {
            "name": "Light Black",
            "hex": "#212121",
            "rgb": [
                33,
                33,
                33
            ]
        },
        {
            "name": "Deep Fire Brick",
            "hex": "#B60505",
            "rgb": [
                182,
                5,
                5
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#00789D",
            "rgb": [
                0,
                120,
                157
            ]
        },
        {
            "name": "Light Fire Brick",
            "hex": "#CC0E00",
            "rgb": [
                204,
                14,
                0
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#E10500",
            "rgb": [
                225,
                5,
                0
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#0079D3",
            "rgb": [
                0,
                121,
                211
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#E04105",
            "rgb": [
                224,
                65,
                5
            ]
        },
        {
            "name": "Light Red",
            "hex": "#F2312C",
            "rgb": [
                242,
                49,
                44
            ]
        },
        {
            "name": "Dark Red",
            "hex": "#880303",
            "rgb": [
                136,
                3,
                3
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#004ACE",
            "rgb": [
                0,
                74,
                206
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#006294",
            "rgb": [
                0,
                98,
                148
            ]
        }
    ],
    "fonts": [
        {
            "name": "Proxima Nova",
            "stack": "\"Proxima Nova\", sans-serif",
            "weights": [
                300,
                400,
                600,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "TTNorms Pro Serif Bold",
            "stack": "\"TTNorms Pro Serif Bold\", \"TTNorms Pro Serif Bold Fallback\", \"TTNorms Pro Serif Bold Fallback Android\", serif",
            "weights": [
                450,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Publico Headline",
            "stack": "\"Publico Headline\", serif",
            "weights": [
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Publico Text",
            "stack": "\"Publico Text\", serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "TTNormsPro Normal",
            "stack": "\"TTNormsPro Normal\", \"TTNormsPro Normal Fallback\", \"TTNormsPro Normal Fallback Android\", sans-serif",
            "weights": [
                400,
                450,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "TTNormsPro Bold",
            "stack": "\"TTNormsPro Bold\", \"TTNormsPro Bold Fallback\", \"TTNormsPro Bold Fallback Android\", sans-serif",
            "weights": [
                700
            ],
            "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 cbsnews.com?

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/cbsnews.com" title="CBS News 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 ↑

CBS Newsstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Off White

Light Black

Colours

Deep Fire Brick

Steel Blue

Light Fire Brick

Deep Red

Light Steel Blue

Orange Red

Light Red

Dark Red

Royal Blue

Deep Steel Blue

Gradients

Proxima Nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

about.me

Healthline

Bleacher Report

water

FileZilla

overstock.com

Il Post

guardian.co.uk

CBS Newsstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Off White

Light Black

Colours

Deep Fire Brick

Steel Blue

Light Fire Brick

Deep Red

Light Steel Blue

Orange Red

Light Red

Dark Red

Royal Blue

Deep Steel Blue

Gradients

Proxima Nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cbsnews.com?

Also set in Proxima Nova

about.me

Healthline

Bleacher Report

water

Similar colours

FileZilla

overstock.com

Il Post

guardian.co.uk

Title &
description