What font does Statcounter use?

Statcounter’s website uses four typefaces: open_sansbold (headings), self-hosted; open_sanslight (body text), self-hosted; open_sansregular, self-hosted; open_sanssemibold, self-hosted.

What are Statcounter’s brand colours?

The main colours on statcounter.com are Dark Slate Blue (#064685), Deep Midnight Blue (#011447), Light Steel Blue (#AEC4DB), Lime Green (#76C349), Cornflower Blue (#6B9CCE) and Light Red (#FF0000).

What colour is Statcounter’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Statcounter’s logo from?

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

Is this Statcounter’s official style guide?

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

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

Unofficial style guide

Statcounterstyle guide

Statcounter’s website (statcounter.com) sets its headings in open_sansbold and its body text in open_sanslight. Its palette is led by Dark Slate Blue (#064685), Deep Midnight Blue (#011447) and Light Steel Blue (#AEC4DB), with #000000 text on #FFFFFF. Captured from the live site on 30 October 2026.

Website: statcounter.com
Typefaces: open_sansbold, open_sanslight, open_sansregular
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 30 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the statcounter.com homepage on a desktop screen — Screenshot of statcounter.com on a 1440 px desktop screen, 30 Oct 2026.

Screenshot of the statcounter.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: Web Analytics Made Easy - Statcounter; ● 37 / 60 characters
Meta description: StatCounter is a simple but powerful real-time web analytics service that helps you track, analyse and understand your visitors so you can make good decisions to become more successful online.; ▲ 192 / 160 characters
Site name: Statcounter
og:title: Statcounter - Web Analytics Made Easy
og:description: A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats.

In search results

Statcounterhttps://statcounter.com/

Web Analytics Made Easy - Statcounter

StatCounter is a simple but powerful real-time web analytics service that helps you track, analyse and understand your visitors so you can make good decisions to…

When shared

statcounter.com

Statcounter - Web Analytics Made Easy

A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats.

Logo & favicons

Found as: CSS background on .logo. SVG, 249 × 40.

Logo

On white

On black

On Dark Slate Blue

Favicons

2 found

144 px · PNG apple-touch-icon-precomposed
32 px · PNG shortcut icon

Web Analytics Made Easy - Statcounter

Light browser tab

Web Analytics Made Easy - Statcounter

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

Dark Slate Blue 34.7%
White 32%
Cool Off White 6.5%
Charcoal 5.9%
Deep Midnight Blue 5.6%
Light Steel Blue 5%
Black 4%
Lime Green 1.9%
Cornflower Blue 0.8%
Light Red 0.7%
Deep Red 0.6%
Deep Royal Blue 0.5%
Olive Drab 0.5%
Light Midnight Blue 0.4%
Midnight Blue 0.4%
Light Royal Blue 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
—

Background, text, border · .understandVisitorsEasySessionReplay2021 header, .section.bg-landing-summary-stats
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
6 2 0 4

On text
18.06:1 AAA

On white
1.16:1 Fail

Background · .understandVisitorsEasySessionReplay2021 header, .section.bg-landing-summary-stats
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
1.66:1 Fail

On white
12.63:1 AAA

Text · .success-story .usertext .title, .landing-page.statcounter-vs-google-analytics h4
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, border, background · body, .message:not(.info) h2

Colours

Brand colours and accents, most used first

Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
95 47 0 48

On text
2.22:1 Fail

On white
9.45:1 AAA

Text, background, border · .page-internal.pricing-plans-page header, .websiteAnalyticsMadeEasy2018 header
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
99 72 0 72

On text
1.19:1 Fail

On white
17.61:1 AAA

Background · .websiteAnalyticsMadeEasy2018 header, .page-internal.landing-page header
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
21 11 0 14

On text
11.72:1 AAA

On white
1.79:1 Fail

Border, text, graphic · .btn-feedback.disabled, .btn-feedback.disabled svg path
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
39 0 63 24

On text
9.67:1 AAA

On white
2.17:1 Fail

Background, border, text · .btn.btn-green, .header-content.start-your-trial input.submit
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
48 24 0 19

On text
7.27:1 AAA

On white
2.89:1 Fail

Border, text · .modal_heading, header
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
5.25:1 AA

On white
4.00:1 AA large

Text · .page-internal.landing-page.photography header h1 .emoji, .page-close-account .warning h3
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 15

On text
3.95:1 AA large

On white
5.32:1 AA

Background, text, border · .modal .btn-del, #comments-container .comment .text.moderated.awaiting
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 40 0 33

On text
3.54:1 AA large

On white
5.94:1 AA

Text · .page-internal.landing-page.landing-page-2017.campaign-url-builder-page h1, .page-internal.landing-page.landing-page-2017.campaign-url-builder-page h2
Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
39 0 63 34

On text
7.24:1 AAA

On white
2.90:1 Fail

Background, border · .btn.btn-green.btn-green-dark-hover:hover, .landing-page .btn-green:hover
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
97 59 0 62

On text
1.48:1 Fail

On white
14.15:1 AAA

Background · .support-searchbox #knowledge-base-search input[type="submit"], .support-searchbox #knowledge-base-search input[type="text"]
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
92 54 0 72

On text
1.32:1 Fail

On white
15.92:1 AAA

Background · #mobile-menu a#login, #mobile-menu li a
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
66 33 0 38

On text
3.66:1 AA large

On white
5.73:1 AA

Text · ::-webkit-input-placeholder, :-moz-placeholder

Gradients

linear-gradient(top,#011447 0,#053f82 100%)
linear-gradient(to bottom,#011447 0,#053f82 100%)
linear-gradient(top,#fff 0,#e7eff5 100%)

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.

open_sansbold

Aa 400

open_sansbold

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

Aa 300 Aa 400

open_sanslight

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

Aa 400 Aa 600

open_sansregular

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

Aa 400

open_sanssemibold

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 20px / 48px weight 100 · open_sansbold

Statcounter

Heading 2 33px / 137% weight 400 · open_sanslight

Web Analytics Made Easy - Statcounter

Heading 3 25px / 1.4em weight 300 · open_sansbold

Web Analytics Made Easy - Statcounter

Heading 4 18px / 24px weight 400 · open_sansbold

Web Analytics Made Easy - Statcounter

Heading 5 17px / normal weight 400 · open_sansbold

Web Analytics Made Easy - Statcounter

Body — open_sanslight

StatCounter is a simple but powerful real-time web analytics service that helps you track, analyse and understand your visitors so you can …

Paragraph 15px open_sanslight

StatCounter is a simple but powerful real-time web analytics service that helps you track, analyse and understand your visitors so you can …

Button 14px weight 600 · open_sansregular

Get started

Link 15px / 27px weight 400 · capitalize · open_sanslight

Sizes in use

Most common across the site

40pxline 49px · 35 rules
30pxline normal · 23 rules
20pxline 27px · 19 rules
17pxline 1.35em · 11 rules
15pxline 27px · 119 rules
14pxline 25px · 27 rules
13pxline 21px · 37 rules
12pxline 16px · 14 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

.page-internal.landing-page.landing-page-2017.campaign-url-builder-page button · #064685 · radius 4px

Link

Read our latest news today.

a · #064685

Corner radius

4px · 79×
0 0 4px 4px · 15×
4px 4px 0 0 · 12×
5px · 4×
50% · 3×
6px · 2×

Layout

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

Grid

Breakpoints

450

500

770

830

850

900

940

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

770 px

718 px

700 px

650 px

600 px

500 px

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 description is 192 characters. Search results usually show about 160.
▲ 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 Statcounter use?: Statcounter’s website uses four typefaces: open_sansbold (headings), self-hosted; open_sanslight (body text), self-hosted; open_sansregular, self-hosted; open_sanssemibold, self-hosted.
What are Statcounter’s brand colours?: The main colours on statcounter.com are Dark Slate Blue (#064685), Deep Midnight Blue (#011447), Light Steel Blue (#AEC4DB), Lime Green (#76C349), Cornflower Blue (#6B9CCE) and Light Red (#FF0000).
What colour is Statcounter’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Statcounter’s logo from?: The logo shown in this guide was found on statcounter.com’s homepage. For official logo files and usage rules, check Statcounter’s own brand or press page.
Is this Statcounter’s official style guide?: No. SiteStyleGuide made it from statcounter.com’s public web pages on 30 October 2026, and isn’t affiliated with Statcounter. 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

statcounter-com-tokens.css

Download

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

/* statcounter.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/statcounter.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-off-white: #E7EFF5;
  --colour-charcoal: #333333;
  --colour-black: #000000;
  --colour-dark-slate-blue: #064685;
  --colour-deep-midnight-blue: #011447;
  --colour-light-steel-blue: #AEC4DB;
  --colour-lime-green: #76C349;
  --colour-cornflower-blue: #6B9CCE;
  --colour-light-red: #FF0000;
  --colour-deep-red: #D90000;
  --colour-deep-royal-blue: #0067AC;
  --colour-olive-drab: #66A83F;
  --colour-light-midnight-blue: #032862;
  --colour-midnight-blue: #062148;
  --colour-light-royal-blue: #36699D;
  --gradient-1: linear-gradient(top,#011447 0,#053f82 100%);
  --gradient-2: linear-gradient(to bottom,#011447 0,#053f82 100%);
  --gradient-3: linear-gradient(top,#fff 0,#e7eff5 100%);

  /* Typefaces */
  --font-headings: 'open_sansbold', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-buttons: 'open_sansbold', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-body: 'open_sanslight', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* Type scale */
  --text-h1: 20px;
  --leading-h1: 48px;
  --text-h2: 33px;
  --leading-h2: 137%;
  --text-h3: 25px;
  --leading-h3: 1.4em;
  --text-h4: 18px;
  --leading-h4: 24px;
  --text-h5: 17px;
  --leading-h5: normal;
  --text-p: 15px;
  --text-button: 14px;
  --text-a: 15px;
  --leading-a: 27px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 450px;
  --breakpoint-2: 500px;
  --breakpoint-3: 770px;
  --breakpoint-4: 830px;
  --breakpoint-5: 850px;
  --breakpoint-6: 900px;
  --breakpoint-7: 940px;
  --breakpoint-8: 1200px;
  --max-width-1: 770px;
  --max-width-2: 718px;
  --max-width-3: 700px;
  --max-width-4: 650px;
  --max-width-5: 600px;
  --max-width-6: 500px;
}

{
    "site": "statcounter.com",
    "source": "https://sitestyleguide.com/statcounter.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#E7EFF5",
            "rgb": [
                231,
                239,
                245
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#064685",
            "rgb": [
                6,
                70,
                133
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#011447",
            "rgb": [
                1,
                20,
                71
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#AEC4DB",
            "rgb": [
                174,
                196,
                219
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#76C349",
            "rgb": [
                118,
                195,
                73
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#6B9CCE",
            "rgb": [
                107,
                156,
                206
            ]
        },
        {
            "name": "Light Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#D90000",
            "rgb": [
                217,
                0,
                0
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0067AC",
            "rgb": [
                0,
                103,
                172
            ]
        },
        {
            "name": "Olive Drab",
            "hex": "#66A83F",
            "rgb": [
                102,
                168,
                63
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#032862",
            "rgb": [
                3,
                40,
                98
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#062148",
            "rgb": [
                6,
                33,
                72
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#36699D",
            "rgb": [
                54,
                105,
                157
            ]
        }
    ],
    "fonts": [
        {
            "name": "open_sansbold",
            "stack": "\"open_sansbold\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "open_sanslight",
            "stack": "\"open_sanslight\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
            "weights": [
                300,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "open_sansregular",
            "stack": "\"open_sansregular\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
            "weights": [
                400,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "open_sanssemibold",
            "stack": "\"open_sanssemibold\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "open_sansitalic",
            "stack": "\"open_sansitalic\", Arial, \"Helvetica Neue\", Helvetica, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using open_sansbold as their main typeface

Burke Lakefront Airport

burkeairport.com · set in open_sansbold
Save1

Websites whose lead colour is closest to Statcounter’s

histats.com

histats.com · 6 days ago
Save
Das Örtliche

dasoertliche.de · 4 days ago
Save
NCI

cancer.gov · 5 days ago
Save
华声在线

voc.com.cn · 3 days ago
Save

Captured from statcounter.com on 30 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Statcounter; this guide describes the public website for reference.

Statcounterstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Off White

Charcoal

Black

Colours

Dark Slate Blue

Deep Midnight Blue

Light Steel Blue

Lime Green

Cornflower Blue

Light Red

Deep Red

Deep Royal Blue

Olive Drab

Light Midnight Blue

Midnight Blue

Light Royal Blue

Gradients

open_sansbold

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run statcounter.com?

Also set in open_sansbold

Burke Lakefront Airport

Similar colours

histats.com

Das Örtliche

NCI

华声在线

Title &
description