What font does Scientific American use?

Scientific American’s website uses three typefaces: GT America (headings and body text), self-hosted; GT America Condensed, self-hosted; Crimson Text, self-hosted.

What are Scientific American’s brand colours?

The main colours on scientificamerican.com are Deep Sky Blue (#4BBBE0), Steel Blue (#007FAD), Deep Steel Blue (#0376A1), Light Blue (#A4D8EF), Peru (#D58000) and Fire Brick (#A70E13).

What colour is Scientific American’s text and background?

Body text is #1A1A1A on a #FFFFFF background.

Where is Scientific American’s logo from?

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

Is this Scientific American’s official style guide?

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

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

Unofficial style guide

Scientific Americanstyle guide

Scientific American’s website (scientificamerican.com) uses GT America for its headings and body text. Its palette is led by Deep Sky Blue (#4BBBE0), Steel Blue (#007FAD) and Deep Steel Blue (#0376A1), with #1A1A1A text on #FFFFFF. Captured from the live site on 5 November 2026.

Website: scientificamerican.com
Typefaces: GT America, GT America Condensed, Crimson Text
Palette: 4 neutrals, 11 colours, 2 gradients
Captured: 5 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the scientificamerican.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: Scientific American; ● 19 / 60 characters
Meta description: Scientific American is the essential guide to the most awe-inspiring advances in science and technology, explaining how they change our understanding of the world and shape our lives.; ▲ 183 / 160 characters
Site name: Scientific American
og:title: Scientific American
og:description: Scientific American is the essential guide to the most awe-inspiring advances in science and technology, explaining how they change our understanding of the world and shape our lives.
Language: en
Theme colour: #fff

In search results

Scientific Americanhttps://www.scientificamerican.com/

Scientific American

Scientific American is the essential guide to the most awe-inspiring advances in science and technology, explaining how they change our understanding of the worl…

When shared

scientificamerican.com

Scientific American

Scientific American is the essential guide to the most awe-inspiring advances in science and technology, expl…

Logo & favicons

Found as: schema.org logo. SVG, 150 × 150.

Logo

On white

On black

On Deep Sky Blue

Favicons

1 found

32 px · ICO icon shortcut

Scientific American

Light browser tab

Scientific American

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

Colour

Balance

How much each colour is used

White 29.6%
Charcoal 21.4%
Deep Sky Blue 9.7%
Dark Grey 9.3%
Off White 8.7%
Steel Blue 6.8%
Deep Steel Blue 2.5%
Light Blue 2.4%
Peru 2.3%
Fire Brick 2%
Light Steel Blue 1.8%
Medium Sea Green 1.1%
Dark Golden Rod 1.1%
Bisque 0.8%
Crimson 0.6%

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

On white
—

Text, background, border · html, --ring-offset-color
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
1.38:1 Fail

On white
12.63:1 AAA

Text, background, border · .discussionCTA-lgi88 h2, .hp_native_ux2-7hMfx.is-loaded h2
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 60

On text
3.03:1 AA large

On white
5.74:1 AA

Text, background, border · h2:where(.prose-mhScE>*), .newsletterBtn-P-9hW:disabled
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 8

On text
14.60:1 AAA

On white
1.19:1 Fail

Background, border · .ad-Xtmn1.is-loaded, figure:where(.prose-MpLPk>*):not(.does-not-exist-SALDg) img:before

Colours

Brand colours and accents, most used first

Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
67 17 0 12

On text
7.86:1 AAA

On white
2.21:1 Fail

Text, graphic, background · .dek-1DArZ>p:first-child:before, .message-BAUWT .icon-nKdsV
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 32

On text
3.84:1 AA large

On white
4.53:1 AA

Text, background, graphic · --ring-color, .subscribeLink-9v3Mk
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
98 27 0 37

On text
3.41:1 AA large

On white
5.11:1 AA

Background, border, text · .blue3Btn-bZbVn, .footerSubscribe-QtEdJ
Light Blue

HEX

RGB

HSL

OKLCH

CMYK
31 10 0 6

On text
11.31:1 AAA

On white
1.54:1 Fail

Background, text, border · .salesBanner-10cNR, .footerSubscribe-012p2
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 40 100 16

On text
5.73:1 AA

On white
3.04:1 AA large

Graphic, background · .collection-s5REU .button-KXV0y, .cardLink-6ovwL:before
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 92 89 35

On text
2.25:1 Fail

On white
7.73:1 AAA

Text, background · .userEnv-L6yV-.test-UiUzx, .dropdownIconContainer--yKdJ.test-UiUzx:after
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 27 0 25

On text
4.51:1 AA

On white
3.86:1 AA large

Background, border · .blue2Btn--SiJW, .segmentItems-mJkDY
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 47 34

On text
5.59:1 AA

On white
3.11:1 AA large

Background, text · .userEnv-L6yV-.stage-Lv-pV, .dropdownIconContainer--yKdJ.stage-Lv-pV:after
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 38 100 34

On text
3.85:1 AA large

On white
4.52:1 AA

Text · .errorDetail-ZQ3bV, .errorInfo-Z25x1 .warn-TPi6t
Bisque

HEX

RGB

HSL

OKLCH

CMYK
0 9 18 9

On text
12.01:1 AAA

On white
1.45:1 Fail

Background · .discussionCTA-lgi88, --color-tan
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 91 73 14

On text
3.49:1 AA large

On white
4.99:1 AA

Used · --font-stack-crimson

Gradients

linear-gradient(135deg,transparent 25%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.1) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.1) 75%,rgba(255,255,255,.1))
linear-gradient(to top,#000,transparent)

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.

GT America

Aa 100 Aa 700

GT America

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

Aa 400 Aa 700

GT America Condensed

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

Aa 400 Aa 700

Crimson Text

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

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

Type scale

From the site’s CSS

Heading 2 1.125rem · 18 px weight 500 · uppercase · GT America Condensed

Scientific American

Heading 3 .9rem · 14 px / normal weight 500 · capitalize · GT America Condensed

Scientific American

Heading 4 .8rem · 13 px weight 700

Scientific American

Body — GT America

Scientific American is the essential guide to the most awe-inspiring advances in science and technology, explaining how they change our und…

Paragraph 1rem · 16 px / 1.75

Scientific American is the essential guide to the most awe-inspiring advances in science and technology, explaining how they change our und…

Link 1.125rem · 18 px weight 500 · GT America Condensed

Sizes in use

Most common across the site

20pxline 1.75 · 4 rules
18pxline 1.15 · 11 rules
16pxline 1.5 · 17 rules
14pxline 3 · 10 rules
13pxline 1.75 · 15 rules
12pxline 1.25 · 9 rules
11pxline 1 · 12 rules
10pxline 1 · 13 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

5px · 13×
3px · 8×
2px · 4×
100% · 4×
10px · 4×

Shadows

0 0 #fff,0 0 0 1px #007fad,
,,
0 0 5px #0000004d
0 3px 3px #00000040

Layout

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

Grid

Breakpoints

700

750

800

840

899

900

950

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

800 px

565 px

470 px

420 px

400 px

360 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.
▲ CheckThe description is 183 characters. Search results usually show about 160.

Questions

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

Questions

What font does Scientific American use?: Scientific American’s website uses three typefaces: GT America (headings and body text), self-hosted; GT America Condensed, self-hosted; Crimson Text, self-hosted.
What are Scientific American’s brand colours?: The main colours on scientificamerican.com are Deep Sky Blue (#4BBBE0), Steel Blue (#007FAD), Deep Steel Blue (#0376A1), Light Blue (#A4D8EF), Peru (#D58000) and Fire Brick (#A70E13).
What colour is Scientific American’s text and background?: Body text is #1A1A1A on a #FFFFFF background.
Where is Scientific American’s logo from?: The logo shown in this guide was found on scientificamerican.com’s homepage. For official logo files and usage rules, check Scientific American’s own brand or press page.
Is this Scientific American’s official style guide?: No. SiteStyleGuide made it from scientificamerican.com’s public web pages on 5 November 2026, and isn’t affiliated with Scientific American. 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

scientificamerican-com-tokens.css

Download

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

/* scientificamerican.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/scientificamerican.com) */
:root {
  /* Colours */
  --text: #1A1A1A;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-dark-grey: #666666;
  --colour-off-white: #EBEBEB;
  --colour-deep-sky-blue: #4BBBE0;
  --colour-steel-blue: #007FAD;
  --colour-deep-steel-blue: #0376A1;
  --colour-light-blue: #A4D8EF;
  --colour-peru: #D58000;
  --colour-fire-brick: #A70E13;
  --colour-light-steel-blue: #008BBE;
  --colour-medium-sea-green: #00A859;
  --colour-dark-golden-rod: #A86800;
  --colour-bisque: #E8D3BE;
  --colour-crimson: #DC143C;
  --gradient-1: linear-gradient(135deg,transparent 25%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.1) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.1) 75%,rgba(255,255,255,.1));
  --gradient-2: linear-gradient(to top,#000,transparent);

  /* Typefaces */
  --font-body: 'GT America';
  --font-headings: 'GT America';

  /* Type scale */
  --text-h2: 1.125rem;
  --text-h3: .9rem;
  --leading-h3: normal;
  --text-h4: .8rem;
  --text-p: 1rem;
  --leading-p: 1.75;
  --text-a: 1.125rem;

  /* Shape */
  --radius-1: 5px;
  --radius-2: 3px;
  --radius-3: 2px;
  --radius-4: 100%;
  --radius-5: 10px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 700px;
  --breakpoint-2: 750px;
  --breakpoint-3: 800px;
  --breakpoint-4: 840px;
  --breakpoint-5: 899px;
  --breakpoint-6: 900px;
  --breakpoint-7: 950px;
  --breakpoint-8: 1280px;
  --max-width-1: 800px;
  --max-width-2: 565px;
  --max-width-3: 470px;
  --max-width-4: 420px;
  --max-width-5: 400px;
  --max-width-6: 360px;
}

{
    "site": "scientificamerican.com",
    "source": "https://sitestyleguide.com/scientificamerican.com",
    "text": "#1A1A1A",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#666666",
            "rgb": [
                102,
                102,
                102
            ]
        },
        {
            "name": "Off White",
            "hex": "#EBEBEB",
            "rgb": [
                235,
                235,
                235
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#4BBBE0",
            "rgb": [
                75,
                187,
                224
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#007FAD",
            "rgb": [
                0,
                127,
                173
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#0376A1",
            "rgb": [
                3,
                118,
                161
            ]
        },
        {
            "name": "Light Blue",
            "hex": "#A4D8EF",
            "rgb": [
                164,
                216,
                239
            ]
        },
        {
            "name": "Peru",
            "hex": "#D58000",
            "rgb": [
                213,
                128,
                0
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#A70E13",
            "rgb": [
                167,
                14,
                19
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#008BBE",
            "rgb": [
                0,
                139,
                190
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00A859",
            "rgb": [
                0,
                168,
                89
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#A86800",
            "rgb": [
                168,
                104,
                0
            ]
        },
        {
            "name": "Bisque",
            "hex": "#E8D3BE",
            "rgb": [
                232,
                211,
                190
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC143C",
            "rgb": [
                220,
                20,
                60
            ]
        }
    ],
    "fonts": [
        {
            "name": "GT America",
            "stack": "\"GT America\", \"America Temp: Helvetica Neue\", \"America Temp: Helvetica\", \"America Temp: Arial\", \"America Temp: Roboto\"",
            "weights": [
                100,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "GT America Condensed",
            "stack": "\"GT America Condensed\", \"America Condensed Temp: Roboto Condensed\", \"America Condensed Temp: Avenir Next Condensed\", \"America Condensed Temp: Arial Narrow\", \"America Condensed Temp: Arial\"",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Crimson Text",
            "stack": "\"Crimson Text\", \"Crimson Temp: Georgia\"",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using GT America as their main typeface

Zia Tile

ziatile.com · set in GT America
Save
frog, part of Capgemini Invent

frog.co · set in GT America
Save
Betterment

betterment.com · set in GT America
Save
Emergence Magazine

emergencemagazine.org · set in GT America
Save

Websites whose lead colour is closest to Scientific American’s

HBO

hbo.com · 3 days ago
Save
qunar.com

qunar.com · 1 day ago
Save
Sketchfab

sketchfab.com · 5 days ago
Save
Sketchfab

skfb.ly · 5 days ago
Save

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

Scientific Americanstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Dark Grey

Off White

Colours

Deep Sky Blue

Steel Blue

Deep Steel Blue

Light Blue

Peru

Fire Brick

Light Steel Blue

Medium Sea Green

Dark Golden Rod

Bisque

Crimson

Gradients

GT America

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run scientificamerican.com?

Also set in GT America

Zia Tile

frog, part of Capgemini Invent

Betterment

Emergence Magazine

Similar colours

HBO

qunar.com

Sketchfab

Sketchfab

Title &
description