What font does 聯合新聞網 use?

聯合新聞網’s website uses one typeface: Noto Sans TC (headings and body text), google Fonts.

What are 聯合新聞網’s brand colours?

The main colours on udn.com are Orange Red (#EE5103), Steel Blue (#2F76AA), Deep Red (#D64937), Fire Brick (#CB2529), Medium Violet Red (#C32AA3) and Light Coral (#E36B6A).

What colour is 聯合新聞網’s text and background?

Body text is #000000 on a #FAFAFA background.

Where is 聯合新聞網’s logo from?

The logo shown in this guide was found on udn.com’s homepage. For official logo files and usage rules, check 聯合新聞網’s own brand or press page.

Is this 聯合新聞網’s official style guide?

No. SiteStyleGuide made it from udn.com’s public web pages on 21 October 2026, and isn’t affiliated with 聯合新聞網. Members can refresh a guide after 90 days to pick up changes.

聯合新聞網 Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: 聯合新聞網：觸動未來新識力; ● 13 / 60 characters
Meta description: udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞，以最即時、多元的內容，滿足行動世代的需求。; ● 82 / 160 characters
Site name: 聯合新聞網
og:title: 聯合新聞網：觸動未來新識力
og:description: udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞，以最即時、多元的內容，滿足行動世代的需求。
Language: zh-TW

In search results

聯合新聞網https://udn.com/

聯合新聞網：觸動未來新識力

udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞，以最即時、多元的內容，滿足行動世代的需求。

When shared

udn.com

聯合新聞網：觸動未來新識力

udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞…

Back to top ↑

Logo & favicons

Found as: schema.org logo. PNG, 1200 × 900.

Logo

On white

On black

On Orange Red

Favicons

8 found

384 px · PNG manifest
192 px · PNG icon
152 px · PNG manifest
144 px · PNG manifest
128 px · PNG icon
128 px · ICO icon
96 px · PNG manifest
72 px · PNG manifest

聯合新聞網：觸動未來新識力

Light browser tab

聯合新聞網：觸動未來新識力

Dark browser tab

Back to top ↑

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 24.9%
Grey 16.7%
Orange Red 16.4%
Black 14.5%
Off White 9.6%
Steel Blue 8.8%
Deep Red 5.8%
Fire Brick 0.7%
Medium Violet Red 0.7%
Light Coral 0.6%
Royal Blue 0.5%
Lime Green 0.5%
Light Red 0.5%

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 · body, .menu-stick .navigation-wrapper:after
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 51

On text
5.17:1 AA

On white
4.06:1 AA large

Text, background, border · .btn-dark-grey, .context-box__header--selectable .context-box__title
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background · .focus-list__title, body
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 13

On text
15.61:1 AAA

On white
1.35:1 Fail

Border, background, text · .context-box__header--selectable.context-box__header--box .context-box__title.ac, .context-box__header--selectable.context-box__header--box .context-box__title:fi

Colours

Brand colours and accents, most used first

Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 99 7

On text
5.81:1 AA

On white
3.61:1 AA large

Background, text, border · .udn-tab .context-box__title.active:after, .context-box__title--pseudo:after
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
72 31 0 33

On text
4.29:1 AA large

On white
4.89:1 AA

Text, background, border · .btn-follow.subscribed, .btn-blue
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 74 16

On text
4.87:1 AA

On white
4.31:1 AA large

Text, background, border · .btn-red, .breaking-news__title
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 82 80 20

On text
3.84:1 AA large

On white
5.47:1 AA

Text · inline style on <a>, .vip-edn--promotion::before
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 78 16 24

On text
4.18:1 AA large

On white
5.02:1 AA

Text · .btn-social--whatsapp:hover, --btn-social-instagram
Light Coral

HEX

RGB

HSL

OKLCH

CMYK
0 53 53 11

On text
6.58:1 AA

On white
3.19:1 AA large

Background, text · .breaking-news__wrapper, .breaking-news__wrapper:before
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
90 51 0 5

On text
4.96:1 AA

On white
4.23:1 AA large

Text · .btn-social--facebook:hover, --btn-social-facebook
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 24

On text
8.81:1 AAA

On white
2.38:1 Fail

Text · .btn-social--line:hover, --btn-social-line
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
5.25:1 AA

On white
4.00:1 AA large

Background · .footer.dot-note::before, --btn-social-youtube

Gradients

linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000)
linear-gradient(90deg,#fbfbfb,85%,hsla(0,0%,98%,0))
linear-gradient(270deg,#fbfbfb,95%,hsla(0,0%,98%,0))

Back to top ↑

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.

Noto Sans TC

Aa 300 Aa 500

Noto Sans TC

Google Fonts · weights 300, 400, 500 · body, buttons

Aa 700 Aa 900

Arial

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

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px weight 500

聯合新聞網

Heading 2 22px / 1.5 weight 500

聯合新聞網：觸動未來新識力

Heading 3 16px weight 300

聯合新聞網：觸動未來新識力

Heading 5 15px / 1.4 weight 300

聯合新聞網：觸動未來新識力

Paragraph 15px / 1.4

udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞，以最即時、多元的內容，滿足行…

Small 80%

udn.com 提供即時新聞以及豐富的政治、社會、地方、兩岸、國際、財經、數位、運動、NBA、娛樂、生活、健康、旅遊新聞，以最即時、多元的內容，滿足行…

Button 100% / 1.15 none · Noto Sans TC

Get started

Link 16px / 30px weight 300

Sizes in use

Most common across the site

24pxline 24px · 7 rules
20pxline 1.3 · 8 rules
18pxline 45px · 20 rules
17pxline 1.5 · 7 rules
16pxline 1.6 · 20 rules
15pxline 1.4 · 20 rules
13pxline 1.2 · 9 rules
12pxline 20px · 8 rules

Back to top ↑

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

.btn-follow.subscribed · #2F76AA

Link

Read our latest news today.

a · #000000

Corner radius

3px · 43×
50% · 15×
100% · 2×
12px · 2×
1px · 2×
2px · 1×

Shadows

0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)
0 0 10px 0 rgba(0,0,0,.15)
0 1px 10px 0 rgba(0,0,0,.1),0 2px 15px 0 rgba(0,0,0,.05)
0 100px 99px 0 rgba(0,0,0,.5)

Back to top ↑

Layout

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

Grid

Breakpoints

320

360

374

480

767

768

1023

1297

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px

1020 px

970 px

740 px

480 px

350 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does 聯合新聞網 use?: 聯合新聞網’s website uses one typeface: Noto Sans TC (headings and body text), google Fonts.
What are 聯合新聞網’s brand colours?: The main colours on udn.com are Orange Red (#EE5103), Steel Blue (#2F76AA), Deep Red (#D64937), Fire Brick (#CB2529), Medium Violet Red (#C32AA3) and Light Coral (#E36B6A).
What colour is 聯合新聞網’s text and background?: Body text is #000000 on a #FAFAFA background.
Where is 聯合新聞網’s logo from?: The logo shown in this guide was found on udn.com’s homepage. For official logo files and usage rules, check 聯合新聞網’s own brand or press page.
Is this 聯合新聞網’s official style guide?: No. SiteStyleGuide made it from udn.com’s public web pages on 21 October 2026, and isn’t affiliated with 聯合新聞網. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

udn-com-tokens.css

Download

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

/* udn.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/udn.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FAFAFA;
  --colour-white: #FFFFFF;
  --colour-grey: #7E7E7E;
  --colour-black: #000000;
  --colour-off-white: #DEDEDE;
  --colour-orange-red: #EE5103;
  --colour-steel-blue: #2F76AA;
  --colour-deep-red: #D64937;
  --colour-fire-brick: #CB2529;
  --colour-medium-violet-red: #C32AA3;
  --colour-light-coral: #E36B6A;
  --colour-royal-blue: #1877F2;
  --colour-lime-green: #00C300;
  --colour-light-red: #FF0000;
  --gradient-1: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
  --gradient-2: linear-gradient(90deg,#fbfbfb,85%,hsla(0,0%,98%,0));
  --gradient-3: linear-gradient(270deg,#fbfbfb,95%,hsla(0,0%,98%,0));

  /* Typefaces */
  --font-body: 'Noto Sans TC', '黑體-繁', 'Apple LiGothic Medium', 'PingFang', '微軟正黑體', 'Microsoft JhengHei';
  --font-buttons: 'Noto Sans TC', '黑體-繁', 'Apple LiGothic Medium', 'PingFang', '微軟正黑體', 'Microsoft JhengHei';
  --font-other: 'Arial', 'Helvetica', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h2: 22px;
  --leading-h2: 1.5;
  --text-h3: 16px;
  --text-h5: 15px;
  --leading-h5: 1.4;
  --text-p: 15px;
  --leading-p: 1.4;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 16px;
  --leading-a: 30px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 360px;
  --breakpoint-3: 374px;
  --breakpoint-4: 480px;
  --breakpoint-5: 767px;
  --breakpoint-6: 768px;
  --breakpoint-7: 1023px;
  --breakpoint-8: 1297px;
  --max-width-1: 1280px;
  --max-width-2: 1020px;
  --max-width-3: 970px;
  --max-width-4: 740px;
  --max-width-5: 480px;
  --max-width-6: 350px;
}

{
    "site": "udn.com",
    "source": "https://sitestyleguide.com/udn.com",
    "text": "#000000",
    "background": "#FAFAFA",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Grey",
            "hex": "#7E7E7E",
            "rgb": [
                126,
                126,
                126
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#DEDEDE",
            "rgb": [
                222,
                222,
                222
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#EE5103",
            "rgb": [
                238,
                81,
                3
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#2F76AA",
            "rgb": [
                47,
                118,
                170
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#D64937",
            "rgb": [
                214,
                73,
                55
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CB2529",
            "rgb": [
                203,
                37,
                41
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#C32AA3",
            "rgb": [
                195,
                42,
                163
            ]
        },
        {
            "name": "Light Coral",
            "hex": "#E36B6A",
            "rgb": [
                227,
                107,
                106
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#1877F2",
            "rgb": [
                24,
                119,
                242
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#00C300",
            "rgb": [
                0,
                195,
                0
            ]
        },
        {
            "name": "Light Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Noto Sans TC",
            "stack": "Noto Sans TC, 黑體-繁, Apple LiGothic Medium, PingFang, 微軟正黑體, Microsoft JhengHei, WenQuanYi Zen Hei, helvetica, Arial, sans-serif",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Arial",
            "stack": "Arial, Helvetica, sans-serif",
            "weights": [
                700,
                900
            ],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run udn.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/udn.com" title="聯合新聞網 style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

聯合新聞網style guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Grey

Black

Off White

Colours

Orange Red

Steel Blue

Deep Red

Fire Brick

Medium Violet Red

Light Coral

Royal Blue

Lime Green

Light Red

Gradients

Noto Sans TC

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

TEEPR 亮新聞

LIFE 生活網

eastmoney.com

SoundCloud

Breitbart

orange.fr

聯合新聞網style guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Grey

Black

Off White

Colours

Orange Red

Steel Blue

Deep Red

Fire Brick

Medium Violet Red

Light Coral

Royal Blue

Lime Green

Light Red

Gradients

Noto Sans TC

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run udn.com?

Also set in Noto Sans TC

TEEPR 亮新聞

LIFE 生活網

Similar colours

eastmoney.com

SoundCloud

Breitbart

orange.fr

Title &
description