Web

Primary Web Color

The University’s primary web color is darker than that used in print to ensure low-vision and color-blind users have adequate color contrast between the font and the background color. This color should be used for headers and branding.

blue with hex code #00d74
#000d74

RGB: 0, 13, 116

Trademark

The Columbia trademark should be used either on white or dark blue to ensure there is enough color contrast for website accessibility.

Columbia
Columbia
sipa
Columbia SIPA School of International and Public Affairs trademark on white background

TYPEKIT FONTS

Columbia University uses web font stacks in CSS to ensure cross-platform reliability. Primary fonts may use Typekit fonts and fall back on web-safe fonts that are similar in type classification and characteristics. The CSS web stacks are specified below. 

Wide usage:

Bold and semibold weights for display type (400–700), medium and light weights for paragraph. (100–400).

Recommended CSS stack:

“proxima-nova”, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;

Recommended weights:

font-weight: 100, 300, 400, 500, 600, 700

Limited usage:

Best used for paragraph copy and 300 weight only. Not recommended for display type.

Recommended CSS stack:

“adobe-garamond-pro”, TimesNewRoman, ‘Times New Roman’, Times, Georgia, serif;

Recommended weights:

font-weight: 400

Limited usage: 

While Trajan Pro is the University’s official typeface it has limited use for headers and logos. It is not for use for paragraph copy.

Recommended CSS stack:

font-family: “trajan-pro-3”, TimesNewRoman, ‘Times New Roman’, Times, Georgia, serif;

Recommended weight:

font-weight: 300

WEB-SAFE FONTS

Web-safe font stacks should be used more frequently than Typekit stacks for page load time and general readability. 

Wide usage:

Bold and semibold weights for display type (400–700), medium and light weights for paragraph. (100–400).

Font smoothing:

On webkit browsers the font may appear fuzzy. Please also use a font-smoothing declaration in your CSS when used.

webkit-font-smoothing: antialiased;

Recommended CSS stack:

“Helvetica Neue”, Helvetica, Arial, sans-serif;

Recommended Weights:

font-weight: 100,300, 400, 500, 600, 700

Wide usage:

Headlines and paragraph copy with normal weight only. Also for use on calls to action, for example, button text.

Recommended CSS stack:

TimesNewRoman, ‘Times New Roman’, Times, Georgia, serif;

Recommended weight:

font-weight: normal

Do not use bold

Secondary Web Blues

Softer in value, these are ideal for use in a lower percentage than primary values for branding.

Soft pale blue
#C4D8E2

RGB: 196, 216, 226

Sky blue
#75AADB

RGB: 117, 170, 219

Periwinkle blue
#6CADDF

RGB: 108, 173, 223

Medium blue
#008EE0

RGB: 0, 142, 224

Denim blue
#2C6BAC

RGB: 44, 107, 172

Navy blue
#0046A6

RGB: 0, 70, 166

Tertiary Colors

Ideal to use along with white (#ffffff) for backgrounds and footers.

Off white
#F9F9F9

RGB: 249, 249, 249

Light grey
#EFEFEF

RGB: 239, 239, 239

Pale brown
#D2D2C0

RGB: 210, 210, 192

Dark brown
#555555

RGB: 85, 85, 85

Medium grey
#41516C

RGB: 65, 81, 108

Off black
#093552

RGB: 9, 53, 82

Highlight Colors

Used sparingly, accent colors can be used to draw attention to smaller areas of the site. Ideal proportion of usage is less than 10 percent.

Goldenrod yellow
#FFB400

RGB: 255, 180, 0

Pale green
#C0CD3F

RGB: 192, 205, 63

Grass green
#90C134

RGB: 144, 193, 52

Pumpkin orange
#C14D00

RBG: 193, 77, 0

Blood red
#841C1C

RGB: 132, 28, 28

Fuschia
#8E0F56

RGB: 142, 15, 86