What font does The Pennsylvania State University use?

The Pennsylvania State University’s website uses two typefaces: Roboto (headings and body text), self-hosted; Roboto Slab, self-hosted.

What are The Pennsylvania State University’s brand colours?

The main colours on psu.edu are Midnight Blue (#001E44), Royal Blue (#005FA9), Light Blue (#CCE9FF), Light Steel Blue (#96BEE6), Dark Slate Blue (#1E407C) and Lemon Chiffon (#FFF6CC).

What colour is The Pennsylvania State University’s text and background?

Body text is #262626 on a #FFFFFF background.

Where is The Pennsylvania State University’s logo from?

The logo shown in this guide was found on psu.edu’s homepage. For official logo files and usage rules, check The Pennsylvania State University’s own brand or press page.

Is this The Pennsylvania State University’s official style guide?

No. SiteStyleGuide made it from psu.edu’s public web pages on 25 October 2026, and isn’t affiliated with The Pennsylvania State University. Members can refresh a guide after 90 days to pick up changes.

The Pennsylvania State University 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: The Pennsylvania State University | Penn State; ● 46 / 60 characters
Meta description: Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more about Penn State degree programs and research.; ● 156 / 160 characters
Site name: The Pennsylvania State University
og:title: The Pennsylvania State University | Penn State
og:description: Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more about Penn State degree programs and research.
Language: en

In search results

The Pennsylvania State Universityhttps://www.psu.edu/

The Pennsylvania State University | Penn State

Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more about Penn State degree programs and research.

When shared

No og:image, so no picture

psu.edu

The Pennsylvania State University | Penn State

Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more…

Back to top ↑

Logo & favicons

Found as: image linked to the homepage. SVG, 115 × 17.

Logo

On white

On black

On Midnight Blue

Favicons

1 found

347 px · PNG icon

The Pennsylvania State University | Penn State

Light browser tab

The Pennsylvania State University | Penn State

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

Colour

Balance

How much each colour is used

White 34.9%
Midnight Blue 24.1%
Royal Blue 13.2%
Charcoal 7.8%
Light Blue 5.8%
Black 4.9%
Light Steel Blue 3.3%
Dark Slate Blue 2.7%
Cool Off White 2%
Lemon Chiffon 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
15.13:1 AAA

On white
—

Text, background, border · .slate-embed-form button[type=button].form_button_submit, .theme-cache-103q007
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 85

On text
—

On white
15.13:1 AAA

Text · ::selection, .slate-embed-form input[type=text]
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.39:1 Fail

On white
21.00:1 AAA

Text, background · .slick-dots li button:before, .slick-dots li.slick-active button:before
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
11 5 0 10

On text
10.62:1 AAA

On white
1.42:1 Fail

Text · .slick-dots li button:before, --theme-ui-colors-slateLight

Colours

Brand colours and accents, most used first

Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 56 0 73

On text
1.09:1 Fail

On white
16.55:1 AAA

Text, background, graphic · .slick-dots li.slick-active button:before, .slate-embed-form button[type=button].form_button_submit:hover
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 34

On text
2.31:1 Fail

On white
6.54:1 AA

Text, background, border · .slate-embed-form button[type=button].form_button_submit, .theme-cache-ohm7sw
Light Blue

HEX

RGB

HSL

OKLCH

CMYK
20 9 0 0

On text
12.01:1 AAA

On white
1.26:1 Fail

Background, text, graphic · .theme-cache-dzjuto, .theme-cache-ntcdy2>div>p>a
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
35 17 0 10

On text
7.79:1 AAA

On white
1.94:1 Fail

Border, background · #nprogress .bar, #nprogress .spinner-icon
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
76 48 0 51

On text
1.50:1 Fail

On white
10.10:1 AAA

Background · .pagination li.active, .theme-cache-11sn1kj
Lemon Chiffon

HEX

RGB

HSL

OKLCH

CMYK
0 4 20 0

On text
13.91:1 AAA

On white
1.09:1 Fail

Background · .draft-mode-bar, --theme-ui-colors-alertUrgent

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.

Roboto

Aa 400 Aa 900

Roboto

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

Aa 400 Aa 700

Arial

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

Aa 400 Aa 700

Arial Narrow

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

Aa 700

Roboto Slab

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

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

Type scale

From the site’s CSS

Body —

Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more about Penn State degree progr…

Paragraph 18px / 1.5 weight 400

Penn State is a Pennsylvania-based, top-ranked public university that educates students worldwide. Learn more about Penn State degree progr…

Button 0 · 0 px / 0

Get started

Link — / 1 weight 500 · Roboto

Read more about The Pennsylvania State University

Sizes in use

Most common across the site

48px1 rules
28px1 rules
24pxline 120% · 2 rules
20pxline 1 · 2 rules
18pxline normal · 16 rules
16pxline normal · 18 rules
14pxline 16px · 4 rules
12pxline 24px · 1 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

.slate-embed-form button[type=button].form_button_submit · #005FA9 · radius 4px

Corner radius

4px · 13×
100% · 4×
8px · 4×
16px · 1×
50% · 1×

Shadows

0px 16px 32px 0px #00032110
0px 8px 16px 0px #00032110
0px 4px 8px 0px #00032110
0px 4px 8px 0px #00032120

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

360

361

767

768

900

1079

1080

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

1080 px

Back to top ↑

Notes

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

Notes

● FineThe title is 46 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

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

Questions

What font does The Pennsylvania State University use?: The Pennsylvania State University’s website uses two typefaces: Roboto (headings and body text), self-hosted; Roboto Slab, self-hosted.
What are The Pennsylvania State University’s brand colours?: The main colours on psu.edu are Midnight Blue (#001E44), Royal Blue (#005FA9), Light Blue (#CCE9FF), Light Steel Blue (#96BEE6), Dark Slate Blue (#1E407C) and Lemon Chiffon (#FFF6CC).
What colour is The Pennsylvania State University’s text and background?: Body text is #262626 on a #FFFFFF background.
Where is The Pennsylvania State University’s logo from?: The logo shown in this guide was found on psu.edu’s homepage. For official logo files and usage rules, check The Pennsylvania State University’s own brand or press page.
Is this The Pennsylvania State University’s official style guide?: No. SiteStyleGuide made it from psu.edu’s public web pages on 25 October 2026, and isn’t affiliated with The Pennsylvania State University. 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

psu-edu-tokens.css

Download

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

/* psu.edu design tokens, from SiteStyleGuide (https://sitestyleguide.com/psu.edu) */
:root {
  /* Colours */
  --text: #262626;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #262626;
  --colour-black: #000000;
  --colour-cool-off-white: #CCDAE6;
  --colour-midnight-blue: #001E44;
  --colour-royal-blue: #005FA9;
  --colour-light-blue: #CCE9FF;
  --colour-light-steel-blue: #96BEE6;
  --colour-dark-slate-blue: #1E407C;
  --colour-lemon-chiffon: #FFF6CC;

  /* Typefaces */
  --font-body: 'Roboto';
  --font-other: 'Arial', 'Tahoma', sans-serif;

  /* Type scale */
  --text-p: 18px;
  --leading-p: 1.5;
  --text-button: 0;
  --leading-button: 0;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 360px;
  --breakpoint-2: 361px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 900px;
  --breakpoint-6: 1079px;
  --breakpoint-7: 1080px;
  --breakpoint-8: 1440px;
  --max-width-1: 1440px;
  --max-width-2: 1080px;
}

{
    "site": "psu.edu",
    "source": "https://sitestyleguide.com/psu.edu",
    "text": "#262626",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#262626",
            "rgb": [
                38,
                38,
                38
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#CCDAE6",
            "rgb": [
                204,
                218,
                230
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#001E44",
            "rgb": [
                0,
                30,
                68
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#005FA9",
            "rgb": [
                0,
                95,
                169
            ]
        },
        {
            "name": "Light Blue",
            "hex": "#CCE9FF",
            "rgb": [
                204,
                233,
                255
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#96BEE6",
            "rgb": [
                150,
                190,
                230
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#1E407C",
            "rgb": [
                30,
                64,
                124
            ]
        },
        {
            "name": "Lemon Chiffon",
            "hex": "#FFF6CC",
            "rgb": [
                255,
                246,
                204
            ]
        }
    ],
    "fonts": [
        {
            "name": "Roboto",
            "stack": "Roboto",
            "weights": [
                400,
                500,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Arial",
            "stack": ", Arial, Tahoma, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial Narrow",
            "stack": ", Arial Narrow, Arial, Tahoma, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Roboto Slab",
            "stack": "Roboto Slab, Roboto Slab Fallback",
            "weights": [
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Roboto Condensed",
            "stack": "Roboto Condensed, Roboto Condensed Fallback",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Open Sans",
            "stack": "Open Sans, Open Sans Fallback",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

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 psu.edu?

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/psu.edu" title="The Pennsylvania State University 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 ↑

The Pennsylvania State Universitystyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Black

Cool Off White

Colours

Midnight Blue

Royal Blue

Light Blue

Light Steel Blue

Dark Slate Blue

Lemon Chiffon

Roboto

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

goo.gle

google.rs

google.com.my

google.se

trello.com

expedia

vrbo

Salesforce

The Pennsylvania State Universitystyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Black

Cool Off White

Colours

Midnight Blue

Royal Blue

Light Blue

Light Steel Blue

Dark Slate Blue

Lemon Chiffon

Roboto

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run psu.edu?

Also set in Roboto

goo.gle

google.rs

google.com.my

google.se

Similar colours

trello.com

expedia

vrbo

Salesforce

Title &
description