What font does ITmedia use?

ITmedia’s website uses one typeface: Meiryo (headings and body text), a system font.

What are ITmedia’s brand colours?

The main colours on itmedia.co.jp are Light Fire Brick (#CC0000), Midnight Blue (#003366), Red (#EF4129), Royal Blue (#336699), Deep Red (#EE3300) and Deep Fire Brick (#A01013).

What colour is ITmedia’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is ITmedia’s logo from?

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

Is this ITmedia’s official style guide?

No. SiteStyleGuide made it from itmedia.co.jp’s public web pages on 4 November 2026, and isn’t affiliated with ITmedia. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

ITmediastyle guide

ITmedia’s website (itmedia.co.jp) uses Meiryo for its headings and body text. Its palette is led by Light Fire Brick (#CC0000), Midnight Blue (#003366) and Red (#EF4129), with #333333 text on #FFFFFF. Captured from the live site on 4 November 2026.

Website: itmedia.co.jp
Typefaces: Meiryo, Arial, HiraKakuProN-W3
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 4 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: IT総合情報ポータル「ITmedia」Home; ● 23 / 60 characters
Meta description: テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。; ▲ 35 / 160 characters
Site name: ITmedia
og:title: IT総合情報ポータル「ITmedia」Home
og:description: テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。
Language: ja

In search results

ITmediahttps://www.itmedia.co.jp/

IT総合情報ポータル「ITmedia」Home

テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。

When shared

itmedia.co.jp

IT総合情報ポータル「ITmedia」Home

テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。

Logo & favicons

Found as: CSS background on .logo. GIF, 170 × 28.

Logo

On white

On black

On Light Fire Brick

Favicons

1 found

64 px · ICO favicon.ico

IT総合情報ポータル「ITmedia」Home

Light browser tab

IT総合情報ポータル「ITmedia」Home

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

Colour

Balance

How much each colour is used

White 31.4%
Light Grey 14.7%
Dark Grey 13.5%
Off White 13.4%
Light Fire Brick 6.8%
Midnight Blue 3%
Red 2.5%
Royal Blue 2.2%
Deep Red 2%
Deep Fire Brick 1.7%
Orange Red 1.7%
Steel Blue 1.5%
Peru 1.5%
Olive 1.5%
Light Red 1.3%
Khaki 1.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
12.63:1 AAA

On white
—

Background, text, border · body, .colBoxBacknumber .colBoxUlist ul li .colBoxArticletype
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 20

On text
7.87:1 AAA

On white
1.61:1 Fail

Border, background, text · .colBoxAccessTop10 .colBoxOuter, .newziaConnectAPI h3
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 60

On text
2.20:1 Fail

On white
5.74:1 AA

Text, background, border · #masterMain .colBoxSubTitle h5, .colBoxNewArt .colBoxTitle h3
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
10.89:1 AAA

On white
1.16:1 Fail

Background, border, text · .colBoxBacknumber .colBoxUlist ul li .colBoxArticletype, .colBoxAccessTop10 .colBoxOuter

Colours

Brand colours and accents, most used first

Light Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 20

On text
2.15:1 Fail

On white
5.89:1 AA

Background, text, border · #PATHDEBUG, .colBoxButtons .colBoxUlist ul .active
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 50 0 60

On text
1.00:1 Fail

On white
12.61:1 AAA

Background, text · .colBoxButton a, a:link
Red

HEX

RGB

HSL

OKLCH

CMYK
0 73 83 6

On text
3.28:1 AA large

On white
3.85:1 AA large

Background, text, border · .colBoxSelector ul .colBoxLlistActive span, .colBoxRanking .colBoxUlist ul li.rank1::before
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
67 33 0 40

On text
2.11:1 Fail

On white
6.00:1 AA

Background, border · .colBoxButton a, #g_nav .g_local_btn.blue_2 .g_lnav_o > a
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 79 100 7

On text
3.07:1 AA large

On white
4.11:1 AA large

Background · #globalNavigationGroup0 #globalNavigation .gnavBtn0 a
Deep Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 90 88 37

On text
1.55:1 Fail

On white
8.15:1 AAA

Background, border, text · #g_nav .g_local_btn.red_1 .g_lnav_o > a, #g_nav .g_local_btn.red_2 .g_lnav_o > a
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 67 87 0

On text
3.96:1 AA large

On white
3.19:1 AA large

Background · #globalNavigationGroup0 #globalNavigation .gnavBtn0 a, #globalNavigationGroup0 #globalNavigation .gnavBtn0 a:hover
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
92 42 0 22

On text
2.62:1 Fail

On white
4.82:1 AA

Background, border · #g_nav .g_local_btn.brown_2 .g_lnav_o > a, #g_nav .g_local_btn.blue_4 .g_lnav_o > a
Peru

HEX

RGB

HSL

OKLCH

CMYK
0 30 70 33

On text
3.25:1 AA large

On white
3.89:1 AA large

Text · .colBoxSubTitle h5
Olive

HEX

RGB

HSL

OKLCH

CMYK
0 7 75 52

On text
2.53:1 Fail

On white
4.99:1 AA

Text · .colBoxAccessTop10 .colBoxHead h2
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 80 80 0

On text
3.47:1 AA large

On white
3.64:1 AA large

Background · #PATHDEBUG
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 2 68 11

On text
8.99:1 AAA

On white
1.40:1 Fail

Background · .colBoxQuickPoll .colBoxGraph

Gradients

linear-gradient(top, #F33, #C00)
linear-gradient(#F52, #E30)
linear-gradient(top, #369, #036)

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.

Meiryo

Aa 400

Meiryo

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

Aa 400

Arial

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

Aa 400

HiraKakuProN-W3

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 2 16px / 1.3 weight 400

IT総合情報ポータル「ITmedia」Home

Heading 3 12px / 1.34 weight 400

IT総合情報ポータル「ITmedia」Home

Heading 4 small / 120% weight 700

IT総合情報ポータル「ITmedia」Home

Heading 5 14px / 16px weight 400

IT総合情報ポータル「ITmedia」Home

Body — / 1.3 Meiryo

テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。

Paragraph 12px / 1.34 weight 700

テクノロジー関連のニュース及び速報を中心に、レビューや特集記事を掲載。

Link 11px / 22px weight 700

Sizes in use

Most common across the site

20pxline 1.3 · 2 rules
18pxline 24px · 2 rules
16pxline 22px · 8 rules
14pxline 18px · 8 rules
13pxline 24px · 4 rules
12pxline 16px · 32 rules
11pxline 100% · 13 rules
10pxline 14px · 10 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 · #003366

Corner radius

5px · 3×
10px · 3×
0 0 3px 3px · 2×
0 0 5px 5px · 2×
20px · 2×
3px · 2×

Shadows

0px 1px 3px rgba(0, 0, 0, 0.15)
0 1px 1px rgba(0,0,0,0.4)
2px 2px 3px #EEE
0px 0px 1px #999

Layout

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

Grid

Breakpoints

1020

On a scale of 0 to 1440 px.

Notes

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

Notes

● FineThe title is 23 characters, short enough to show in full in search results.
▲ CheckThe description is only 35 characters. There is room to say more.

Questions

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

Questions

What font does ITmedia use?: ITmedia’s website uses one typeface: Meiryo (headings and body text), a system font.
What are ITmedia’s brand colours?: The main colours on itmedia.co.jp are Light Fire Brick (#CC0000), Midnight Blue (#003366), Red (#EF4129), Royal Blue (#336699), Deep Red (#EE3300) and Deep Fire Brick (#A01013).
What colour is ITmedia’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is ITmedia’s logo from?: The logo shown in this guide was found on itmedia.co.jp’s homepage. For official logo files and usage rules, check ITmedia’s own brand or press page.
Is this ITmedia’s official style guide?: No. SiteStyleGuide made it from itmedia.co.jp’s public web pages on 4 November 2026, and isn’t affiliated with ITmedia. 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

itmedia-co-jp-tokens.css

Download

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

/* itmedia.co.jp design tokens, from SiteStyleGuide (https://sitestyleguide.com/itmedia.co.jp) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-light-grey: #CCCCCC;
  --colour-dark-grey: #666666;
  --colour-off-white: #EEEEEE;
  --colour-light-fire-brick: #CC0000;
  --colour-midnight-blue: #003366;
  --colour-red: #EF4129;
  --colour-royal-blue: #336699;
  --colour-deep-red: #EE3300;
  --colour-deep-fire-brick: #A01013;
  --colour-orange-red: #FF5522;
  --colour-steel-blue: #1074C8;
  --colour-peru: #AA7733;
  --colour-olive: #7A711F;
  --colour-light-red: #FF3333;
  --colour-khaki: #E4DF48;
  --gradient-1: linear-gradient(top, #F33, #C00);
  --gradient-2: linear-gradient(#F52, #E30);
  --gradient-3: linear-gradient(top, #369, #036);

  /* Typefaces */
  --font-body: 'Meiryo';
  --font-other: 'Arial';

  /* Type scale */
  --text-h2: 16px;
  --leading-h2: 1.3;
  --text-h3: 12px;
  --leading-h3: 1.34;
  --text-h4: small;
  --leading-h4: 120%;
  --text-h5: 14px;
  --leading-h5: 16px;
  --text-p: 12px;
  --leading-p: 1.34;
  --text-a: 11px;
  --leading-a: 22px;

  /* Shape */
  --radius-1: 5px;
  --radius-2: 10px;
  --radius-3: 0 0 3px 3px;
  --radius-4: 0 0 5px 5px;
  --radius-5: 20px;
  --radius-6: 3px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 1020px;
}

{
    "site": "itmedia.co.jp",
    "source": "https://sitestyleguide.com/itmedia.co.jp",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#666666",
            "rgb": [
                102,
                102,
                102
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Light Fire Brick",
            "hex": "#CC0000",
            "rgb": [
                204,
                0,
                0
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#003366",
            "rgb": [
                0,
                51,
                102
            ]
        },
        {
            "name": "Red",
            "hex": "#EF4129",
            "rgb": [
                239,
                65,
                41
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#336699",
            "rgb": [
                51,
                102,
                153
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#EE3300",
            "rgb": [
                238,
                51,
                0
            ]
        },
        {
            "name": "Deep Fire Brick",
            "hex": "#A01013",
            "rgb": [
                160,
                16,
                19
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF5522",
            "rgb": [
                255,
                85,
                34
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#1074C8",
            "rgb": [
                16,
                116,
                200
            ]
        },
        {
            "name": "Peru",
            "hex": "#AA7733",
            "rgb": [
                170,
                119,
                51
            ]
        },
        {
            "name": "Olive",
            "hex": "#7A711F",
            "rgb": [
                122,
                113,
                31
            ]
        },
        {
            "name": "Light Red",
            "hex": "#FF3333",
            "rgb": [
                255,
                51,
                51
            ]
        },
        {
            "name": "Khaki",
            "hex": "#E4DF48",
            "rgb": [
                228,
                223,
                72
            ]
        }
    ],
    "fonts": [
        {
            "name": "Meiryo",
            "stack": null,
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "HiraKakuProN-W3",
            "stack": null,
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Meiryo as their main typeface

ETtoday新聞雲

ettoday.net · set in Meiryo
Save
楽天市場

rakuten.co.jp · set in Meiryo
Save

Websites whose lead colour is closest to ITmedia’s

HELLO!

hellomagazine.com · 4 days ago
Save
Free

free.fr · 5 days ago
Save
guardian.co.uk

guardian.co.uk · 1 day ago
Save
Il Post

ilpost.it · 3 days ago
Save

Captured from itmedia.co.jp on 4 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by ITmedia; this guide describes the public website for reference.

ITmediastyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Light Grey

Dark Grey

Off White

Colours

Light Fire Brick

Midnight Blue

Red

Royal Blue

Deep Red

Deep Fire Brick

Orange Red

Steel Blue

Peru

Olive

Light Red

Khaki

Gradients

Meiryo

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run itmedia.co.jp?

Also set in Meiryo

ETtoday新聞雲

楽天市場

Similar colours

HELLO!

Free

guardian.co.uk

Il Post

Title &
description