What font does weather.gov use?

weather.gov’s website uses one typeface: Arial (headings and body text), a system font.

What are weather.gov’s brand colours?

The main colours on weather.gov are Light Blue (#C5E5F5), Deep Royal Blue (#1763AB), Dark Orange (#EC7A08), Deep Sky Blue (#00A3E3), Light Sky Blue (#94C6EF) and Red (#ED1F25).

What colour is weather.gov’s text and background?

Body text is #222222 on a #C5E5F5 background.

Where is weather.gov’s logo from?

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

Is this weather.gov’s official style guide?

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

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

Unofficial style guide

weather.govstyle guide

weather.gov’s website (weather.gov) uses Arial for its headings and body text. Its palette is led by Light Blue (#C5E5F5), Deep Royal Blue (#1763AB) and Dark Orange (#EC7A08), with #222222 text on #C5E5F5. Captured from the live site on 22 October 2026.

Website: weather.gov
Typefaces: Arial, Helvetica Neue, Verdana
Palette: 4 neutrals, 12 colours
Captured: 22 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the weather.gov homepage on a desktop screen — Screenshot of weather.gov on a 1440 px desktop screen, 22 Oct 2026.

Screenshot of the weather.gov 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: National Weather Service; ● 24 / 60 characters
Meta description: Missing; ▲ 0 / 160 characters

In search results

weather.govhttps://www.weather.gov/

National Weather Service

When shared

No og:image, so no picture

weather.gov

National Weather Service

Logo & favicons

Found as: image linked to the homepage. PNG, 628 × 60.

Logo

On white

On black

On Light Blue

Favicons

1 found

48 px · ICO favicon.ico

National Weather Service

Light browser tab

National Weather Service

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

Colour

Balance

How much each colour is used

White 24%
Light Blue 11.1%
Deep Royal Blue 8.9%
Light Grey 7.1%
Dark Orange 7.1%
Near Black 6.8%
Black 6.6%
Deep Sky Blue 5.4%
Light Sky Blue 4.5%
Red 3.8%
Dark Red 3.1%
Midnight Blue 2.8%
Fire Brick 2.6%
Steel Blue 2.1%
Dark Slate Blue 2.1%
Light Royal Blue 2.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
15.91:1 AAA

On white
—

Background, text · .header-noaa, #myfcst-form #myfcst-title
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 20

On text
9.91:1 AAA

On white
1.61:1 Fail

Border, background · .ui-widget-header, .autocomplete-selected
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 87

On text
—

On white
15.91:1 AAA

Text, background · .half-map-block h2, .ui-widget-content
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.32:1 Fail

On white
21.00:1 AAA

Text, border, background · div.half-map-block, .myforecast-location

Colours

Brand colours and accents, most used first

Light Blue

HEX

RGB

HSL

OKLCH

CMYK
20 7 0 4

On text
12.05:1 AAA

On white
1.32:1 Fail

Background · body, .header
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
87 42 0 33

On text
2.58:1 Fail

On white
6.16:1 AA

Text, border · #myfcst-title, a:link
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 48 97 7

On text
5.57:1 AA

On white
2.86:1 Fail

Text, border · ul#topnav .sub ul li h2 a, h1 a:hover
Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 28 0 11

On text
5.57:1 AA

On white
2.86:1 Fail

Text · h3, h2.wfo-label a:hover
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
38 17 0 6

On text
8.78:1 AAA

On white
1.81:1 Fail

Border, text · .full-width-border, .partial-width-border
Red

HEX

RGB

HSL

OKLCH

CMYK
0 87 84 7

On text
3.65:1 AA large

On white
4.35:1 AA large

Text · #topnews h1.alert, .alert
Dark Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 34

On text
2.02:1 Fail

On white
7.88:1 AAA

Background, border, text · .hazardous-conditions h1, .hazardous-conditions
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 60

On text
1.26:1 Fail

On white
12.61:1 AAA

Text, border · ul#topnav .sub ul li, ul#topnav .sub ul li a
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 95 95 20

On text
2.76:1 Fail

On white
5.76:1 AA

Text, border · .ui-state-error, .ui-state-error a
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
89 36 0 23

On text
3.61:1 AA large

On white
4.41:1 AA large

Background, text · .locationHeader, #myfcst-low
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
86 43 0 56

On text
1.51:1 Fail

On white
10.56:1 AAA

Text · ul#topnav .topMenuNavList, ul#topnav .home a
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
68 44 0 31

On text
2.72:1 Fail

On white
5.85:1 AA

Text · .map, .myforecast

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.

Arial

Aa 400

Arial

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

Aa 700

Helvetica Neue

System font, or not loaded on this page · weights 700 · shown in a stand-in if you don’t have it

Aa 400

Verdana

System font, or not loaded on this page · buttons · shown in a stand-in if you don’t have it

Aa 400

Tahoma

System font, or not loaded on this page · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 19pt · 25 px / 1.1em weight 700

weather.gov

Heading 2 12pt · 16 px weight 700

National Weather Service

Heading 3 12pt · 16 px weight 400

National Weather Service

Heading 4 12pt · 16 px weight 400

National Weather Service

Heading 5 12px weight 700

National Weather Service

Heading 6 100%

National Weather Service

Body 10pt · 13 px / 1 Arial

The quick brown fox jumps over the lazy dog.

Paragraph 10pt · 13 px Arial

The quick brown fox jumps over the lazy dog.

Small 100%

The quick brown fox jumps over the lazy dog.

Button 1em · 16 px Verdana

Get started

Link 100%

Sizes in use

Most common across the site

21px2 rules
18px5 rules
17px4 rules
16px11 rules
13px8 rules
12pxline 1.4em · 25 rules
11px21 rules
10px3 rules

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 · #1763AB

Corner radius

5px 5px 5px 5px · 1×
8px · 1×

Shadows

0px 2px 5px #444444
0 0 5px #aaa

Layout

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

Grid

Content widths (max-width)

300 px

Notes

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

Notes

● FineThe title is 24 characters, short enough to show in full in search results.
▲ CheckThere is no meta description, so search engines will pick text from the page.
▲ CheckThere is no og:image, so links shared on social media show no picture.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Questions

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

Questions

What font does weather.gov use?: weather.gov’s website uses one typeface: Arial (headings and body text), a system font.
What are weather.gov’s brand colours?: The main colours on weather.gov are Light Blue (#C5E5F5), Deep Royal Blue (#1763AB), Dark Orange (#EC7A08), Deep Sky Blue (#00A3E3), Light Sky Blue (#94C6EF) and Red (#ED1F25).
What colour is weather.gov’s text and background?: Body text is #222222 on a #C5E5F5 background.
Where is weather.gov’s logo from?: The logo shown in this guide was found on weather.gov’s homepage. For official logo files and usage rules, check weather.gov’s own brand or press page.
Is this weather.gov’s official style guide?: No. SiteStyleGuide made it from weather.gov’s public web pages on 22 October 2026, and isn’t affiliated with weather.gov. 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

weather-gov-tokens.css

Download

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

/* weather.gov design tokens, from SiteStyleGuide (https://sitestyleguide.com/weather.gov) */
:root {
  /* Colours */
  --text: #222222;
  --background: #C5E5F5;
  --colour-white: #FFFFFF;
  --colour-light-grey: #CCCCCC;
  --colour-near-black: #222222;
  --colour-black: #000000;
  --colour-light-blue: #C5E5F5;
  --colour-deep-royal-blue: #1763AB;
  --colour-dark-orange: #EC7A08;
  --colour-deep-sky-blue: #00A3E3;
  --colour-light-sky-blue: #94C6EF;
  --colour-red: #ED1F25;
  --colour-dark-red: #A80000;
  --colour-midnight-blue: #003366;
  --colour-fire-brick: #CD0A0A;
  --colour-steel-blue: #167DC4;
  --colour-dark-slate-blue: #104070;
  --colour-light-royal-blue: #3863B1;

  /* Typefaces */
  --font-body: 'Arial', 'Helvetica', 'Geneva', sans-serif;
  --font-other: 'Helvetica Neue', 'Arial', 'Helvetica', 'Geneva', sans-serif;
  --font-buttons: 'Verdana', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 19pt;
  --leading-h1: 1.1em;
  --text-h2: 12pt;
  --text-h3: 12pt;
  --text-h4: 12pt;
  --text-h5: 12px;
  --text-h6: 100%;
  --text-body: 10pt;
  --leading-body: 1;
  --text-p: 10pt;
  --text-small: 100%;
  --text-button: 1em;
  --text-a: 100%;

  /* Shape */
  --radius-1: 5px 5px 5px 5px;
  --radius-2: 8px;
}

{
    "site": "weather.gov",
    "source": "https://sitestyleguide.com/weather.gov",
    "text": "#222222",
    "background": "#C5E5F5",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Near Black",
            "hex": "#222222",
            "rgb": [
                34,
                34,
                34
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Blue",
            "hex": "#C5E5F5",
            "rgb": [
                197,
                229,
                245
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#1763AB",
            "rgb": [
                23,
                99,
                171
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#EC7A08",
            "rgb": [
                236,
                122,
                8
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#00A3E3",
            "rgb": [
                0,
                163,
                227
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#94C6EF",
            "rgb": [
                148,
                198,
                239
            ]
        },
        {
            "name": "Red",
            "hex": "#ED1F25",
            "rgb": [
                237,
                31,
                37
            ]
        },
        {
            "name": "Dark Red",
            "hex": "#A80000",
            "rgb": [
                168,
                0,
                0
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#003366",
            "rgb": [
                0,
                51,
                102
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CD0A0A",
            "rgb": [
                205,
                10,
                10
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#167DC4",
            "rgb": [
                22,
                125,
                196
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#104070",
            "rgb": [
                16,
                64,
                112
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#3863B1",
            "rgb": [
                56,
                99,
                177
            ]
        }
    ],
    "fonts": [
        {
            "name": "Arial",
            "stack": "Arial, Helvetica, Geneva, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Neue",
            "stack": "\"Helvetica Neue\", Arial, Helvetica, Geneva, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Verdana",
            "stack": "Verdana, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Tahoma",
            "stack": "Tahoma, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Arial as their main typeface

DaFont

dafont.com · set in Arial
Save3
Fauna Robotics

faunarobotics.com · set in Arial
Save1
SendSpace

sendspace.com · set in Arial
Save
ieee.org

ieee.org · set in Arial
Save

Websites whose lead colour is closest to weather.gov’s

Microsoft Bing

bing.com · 5 days ago
Save
example.com

example.com · 5 days ago
Save
google.cn

google.cn · 21 minutes ago
Save
Longdo.com

longdo.com · 3 days ago
Save

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

weather.govstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Light Grey

Near Black

Black

Colours

Light Blue

Deep Royal Blue

Dark Orange

Deep Sky Blue

Light Sky Blue

Red

Dark Red

Midnight Blue

Fire Brick

Steel Blue

Dark Slate Blue

Light Royal Blue

Arial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run weather.gov?

Also set in Arial

DaFont

Fauna Robotics

SendSpace

ieee.org

Similar colours

Microsoft Bing

example.com

google.cn

Longdo.com

Title &
description