What font does National Geographic use?

National Geographic’s website uses four typefaces: GeoEditBoldItalic (headings and body text), self-hosted; GeoBrandBoldItalic, self-hosted; GeoBrandBold, self-hosted; GeoEditBold, self-hosted.

What are National Geographic’s brand colours?

The main colours on nationalgeographic.com are Gold (#FFCC00), Deep Royal Blue (#305BC8), Royal Blue (#0066CC), Light Royal Blue (#3772DF), Fire Brick (#CC0000) and Tomato (#FC4349).

What colour is National Geographic’s text and background?

Body text is #000000 on a #FFFFFF background.

Is this National Geographic’s official style guide?

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

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

Unofficial style guide

National Geographicstyle guide

National Geographic’s website (nationalgeographic.com) uses GeoEditBoldItalic for its headings and body text. Its palette is led by Gold (#FFCC00), Deep Royal Blue (#305BC8) and Royal Blue (#0066CC), with #000000 text on #FFFFFF. Captured from the live site on 5 November 2026.

Website: nationalgeographic.com
Typefaces: GeoEditBoldItalic, GeoBrandBoldItalic, GeoBrandBold
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 5 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the nationalgeographic.com homepage on a desktop screen — Screenshot of nationalgeographic.com on a 1440 px desktop screen, 5 Nov 2026.

Screenshot of the nationalgeographic.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: National Geographic; ● 19 / 60 characters
Meta description: Explore National Geographic. A world leader in geography, cartography and exploration.; ● 86 / 160 characters
Site name: National Geographic
og:title: National Geographic
og:description: Explore National Geographic. A world leader in geography, cartography and exploration.
Language: en
Theme colour: #ffffff

In search results

National Geographichttps://www.nationalgeographic.com/

National Geographic

Explore National Geographic. A world leader in geography, cartography and exploration.

When shared

nationalgeographic.com

National Geographic

Explore National Geographic. A world leader in geography, cartography and exploration.

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

7 found

700 px · SVG mask-icon
180 px · PNG apple-touch-icon-precomposed
96 px · PNG icon
48 px · PNG icon
32 px · PNG apple-touch-icon
16 px · ICO shortcut icon
16 px · PNG icon

National Geographic

Light browser tab

National Geographic

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

Colour

Balance

How much each colour is used

White 35.8%
Black 29.8%
Gold 17.6%
Light Grey 5.7%
Dark Grey 5.2%
Deep Royal Blue 0.8%
Royal Blue 0.8%
Light Royal Blue 0.7%
Fire Brick 0.7%
Tomato 0.5%
Light Steel Blue 0.5%
Dark Slate Blue 0.4%
Red 0.4%
Lime Green 0.4%
Forest Green 0.4%
Medium Orchid 0.4%

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

On white
—

Text, background, graphic · a.text-fill-link--inverse, body ::-webkit-scrollbar-thumb
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, graphic · a.text-fill-link, a.text-fill-link:focus
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 19

On text
13.45:1 AAA

On white
1.56:1 Fail

Text, border, background · .InlineEmail__Content--solid:not(.InlineEmail__Content--success) .InlineEmail__E, .Button--alt.Button--disabled
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 56

On text
4.05:1 AA large

On white
5.18:1 AA

Text, border, background · .MediaPlaceholder__Caption__SubTitle, .lightbox__header .lightboxTitle

Colours

Brand colours and accents, most used first

Gold

HEX

RGB

HSL

OKLCH

CMYK
0 20 100 0

On text
13.89:1 AAA

On white
1.51:1 Fail

Background, border, text · a.text-fill-link, a.text-fill-link--inverse
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
76 54 0 22

On text
3.46:1 AA large

On white
6.08:1 AA

Used · --tag-color, --tag-border-color
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 20

On text
3.77:1 AA large

On white
5.57:1 AA

Text, background, border · .Caption .Caption__Credit p a, .WatchTile:hover .WatchTile__Title
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
75 49 0 13

On text
4.63:1 AA

On white
4.53:1 AA

Text · --tag-bg, .dgjUH
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 20

On text
3.57:1 AA large

On white
5.89:1 AA

Text, background, border · .WatchTile__Rowcap-meta:before, .gxqx
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 73 71 1

On text
6.04:1 AA

On white
3.48:1 AA large

Text, border · .EmailStickyFooter__Container .EmailInput__Input--error, .EmailStickyFooter__Container .EmailStickyFooter__EmailInput__InputItem--error .
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
23 15 0 4

On text
13.47:1 AAA

On white
1.56:1 Fail

Used · --tag-bg, --selectors-outline-pressed
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
84 54 0 37

On text
2.50:1 Fail

On white
8.38:1 AAA

Used · --tag-color, --color-interaction-focus
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
5.25:1 AA

On white
4.00:1 AA large

Text, border · .EmailInput__Input--error input, .InlineEmail__ErrorText
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 34

On text
6.68:1 AA

On white
3.15:1 AA large

Background · .FrameBackgroundFull--green, .TextModule__Container--green
Forest Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 46

On text
4.58:1 AA

On white
4.59:1 AA

Background · .FrameBackgroundFull--green, .TextModule__Container--green
Medium Orchid

HEX

RGB

HSL

OKLCH

CMYK
21 56 0 3

On text
6.91:1 AA

On white
3.04:1 AA large

Background · .FrameBackgroundFull--purple, .TextModule__Container--purple

Gradients

linear-gradient(120deg,#fc0,#fc0)
linear-gradient(-180deg,transparent,#000)
linear-gradient(180deg,#fafafa,#fff 0)

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.

GeoEditBoldItalic

Aa 400

GeoEditBoldItalic

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

Aa 400

GeoBrandBoldItalic

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

Aa 400

GeoBrandBold

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

Aa 400

GeoEditBold

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

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

Type scale

From the site’s CSS

Heading 1 32px / 1.25 weight 400 · uppercase · GeoBrandBold

National Geographic

Heading 2 22px / 28px

National Geographic

Body — GeoBrandRegular

Explore National Geographic. A world leader in geography, cartography and exploration.

Paragraph 12px / 1.5 weight 400 · uppercase · GeoBrandRegular

Explore National Geographic. A world leader in geography, cartography and exploration.

Small 80%

Explore National Geographic. A world leader in geography, cartography and exploration.

Button 100% / 1.15 none

Get started

Link 12px / 16px weight 400 · uppercase · GeoBrandRegular

Sizes in use

Most common across the site

42pxline 1.19 · 14 rules
32pxline 1.25 · 16 rules
28pxline 1.214 · 17 rules
22pxline 1.273 · 29 rules
18pxline 1.5 · 15 rules
16pxline 1.5 · 95 rules
14pxline 1.429 · 105 rules
12pxline 1.5 · 121 rules

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

.Button--default · #FFCC00

Corner radius

5px · 27×
50% · 25×
4px · 22×
8px · 6×
initial · 4×

Shadows

0 0 0 2px #fff,0 0 0 4px #000
0 0 0 2px #fff,0 0 0 4px #48494a
unset

Layout

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

Grid

Breakpoints

480

767

768

1023

1024

1120

1240

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1020 px

718 px

688 px

672 px

550 px

500 px

Notes

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

Notes

● FineThe title is 19 characters, short enough to show in full in search results.

Questions

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

Questions

What font does National Geographic use?: National Geographic’s website uses four typefaces: GeoEditBoldItalic (headings and body text), self-hosted; GeoBrandBoldItalic, self-hosted; GeoBrandBold, self-hosted; GeoEditBold, self-hosted.
What are National Geographic’s brand colours?: The main colours on nationalgeographic.com are Gold (#FFCC00), Deep Royal Blue (#305BC8), Royal Blue (#0066CC), Light Royal Blue (#3772DF), Fire Brick (#CC0000) and Tomato (#FC4349).
What colour is National Geographic’s text and background?: Body text is #000000 on a #FFFFFF background.
Is this National Geographic’s official style guide?: No. SiteStyleGuide made it from nationalgeographic.com’s public web pages on 5 November 2026, and isn’t affiliated with National Geographic. 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

nationalgeographic-com-tokens.css

Download

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

/* nationalgeographic.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/nationalgeographic.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-light-grey: #CECFCF;
  --colour-dark-grey: #6C6D6F;
  --colour-gold: #FFCC00;
  --colour-deep-royal-blue: #305BC8;
  --colour-royal-blue: #0066CC;
  --colour-light-royal-blue: #3772DF;
  --colour-fire-brick: #CC0000;
  --colour-tomato: #FC4349;
  --colour-light-steel-blue: #BCD0F4;
  --colour-dark-slate-blue: #1A49A0;
  --colour-red: #FF0000;
  --colour-lime-green: #00A900;
  --colour-forest-green: #008900;
  --colour-medium-orchid: #C36EF8;
  --gradient-1: linear-gradient(120deg,#fc0,#fc0);
  --gradient-2: linear-gradient(-180deg,transparent,#000);
  --gradient-3: linear-gradient(180deg,#fafafa,#fff 0);

  /* Typefaces */
  --font-headings: 'GeoEditBoldItalic', 'Open Sans', 'AppleGothic', 'Georgia', sans-serif;
  --font-buttons: 'GeoEditBoldItalic', 'Open Sans', 'AppleGothic', 'Georgia', sans-serif;

  /* Type scale */
  --text-h1: 32px;
  --leading-h1: 1.25;
  --text-h2: 22px;
  --leading-h2: 28px;
  --text-p: 12px;
  --leading-p: 1.5;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 12px;
  --leading-a: 16px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1023px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1120px;
  --breakpoint-7: 1240px;
  --breakpoint-8: 1440px;
  --max-width-1: 1020px;
  --max-width-2: 718px;
  --max-width-3: 688px;
  --max-width-4: 672px;
  --max-width-5: 550px;
  --max-width-6: 500px;
}

{
    "site": "nationalgeographic.com",
    "source": "https://sitestyleguide.com/nationalgeographic.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CECFCF",
            "rgb": [
                206,
                207,
                207
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#6C6D6F",
            "rgb": [
                108,
                109,
                111
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFCC00",
            "rgb": [
                255,
                204,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#305BC8",
            "rgb": [
                48,
                91,
                200
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0066CC",
            "rgb": [
                0,
                102,
                204
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#3772DF",
            "rgb": [
                55,
                114,
                223
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CC0000",
            "rgb": [
                204,
                0,
                0
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FC4349",
            "rgb": [
                252,
                67,
                73
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#BCD0F4",
            "rgb": [
                188,
                208,
                244
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#1A49A0",
            "rgb": [
                26,
                73,
                160
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#00A900",
            "rgb": [
                0,
                169,
                0
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#008900",
            "rgb": [
                0,
                137,
                0
            ]
        },
        {
            "name": "Medium Orchid",
            "hex": "#C36EF8",
            "rgb": [
                195,
                110,
                248
            ]
        }
    ],
    "fonts": [
        {
            "name": "GeoEditBoldItalic",
            "stack": "GeoEditBoldItalic, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GeoBrandBoldItalic",
            "stack": "GeoBrandBoldItalic, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GeoBrandBold",
            "stack": "GeoBrandBold, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GeoEditBold",
            "stack": "GeoEditBold, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GeoEditRegular",
            "stack": "GeoEditRegular, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GeoEditMedium",
            "stack": "GeoEditMedium, Open Sans, AppleGothic, Georgia, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to National Geographic’s

Untappd

untappd.com · 1 day ago
Save
Onet

onet.pl · 3 days ago
Save
123RF

123rf.com · 5 days ago
Save
doi.org

doi.org · 18 hours ago
Save

Captured from nationalgeographic.com on 5 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by National Geographic; this guide describes the public website for reference.

National Geographicstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Light Grey

Dark Grey

Colours

Gold

Deep Royal Blue

Royal Blue

Light Royal Blue

Fire Brick

Tomato

Light Steel Blue

Dark Slate Blue

Red

Lime Green

Forest Green

Medium Orchid

Gradients

GeoEditBoldItalic

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run nationalgeographic.com?

Similar colours

Untappd

Onet

123RF

doi.org

Title &
description