Typography

Typography

ADA Compliance

All possible efforts must be made to ensure that typography and color usage results in a web experience that is ADA compliant.

Body Copy Font

This Body Copy Font is Montserrat. The weight is 300. The large font size is 15 pixels, with a line-height of 20 pixels. The medium font size is 13 pixels, with a line-height of 18. The small font size is 11 pixels, with a line-height of 16. The color of this font is Body Copy Grey (see Colors below.) The Hex Code is #5253a.

Important Note: For the Campus Store Logo, the Font for “Franciscan University” is Garamond, and the Font for “Campus Store” is Gill Sans. 

Header Fonts

Header Font H1

All Header fonts are also Montserrat. This H1 Header weight is 800. The font size is 45 pixels, with a line-height of 50 pixels.The primary header color is Header Grey. The official primary Franciscan University of Steubenville colors are Green and Gold (see Colors below.)

Header Font H2

All Header fonts are also Montserrat. This H2 Header weight is 700. The font size is 30 pixels, with a line-height of 35 pixels.The color of this header is Header Grey.

Header Font H3

All Header fonts are also Montserrat. This H3 Header weight is 700. The font size is 22 pixels, with a line-height of 25 pixels.The color of this header is Header Grey.

Header Font H4

All Header fonts are also Montserrat. This H4 Header weight is 600. The font size is 18 pixels, with a line-height of 20 pixels.The color of this header is Header Grey.

Header Font H5

All Header fonts are also Montserrat. This H5 Header weight is 500. The font size is 15 pixels, with a line-height of 20 pixels.The color of this header is Header Grey.

Colors

Colors

Green
Hex Code: #21412a

Gold
Hex Code: #998643

Red
Hex Code: #8b3a19

Yellow
Hex Code: #fbb555

Black
Hex Code: #000000

Header Grey
Hex Code: #333333

Body Copy Grey
Hex Code: #52535a

Background Grey
Hex Code: #e8e8e8

Logos

Logos

The Campus Store logo must be implemented on a white background.

Campus Store Logo - Franciscan University

Important Note: If possible, please use the gold separator and drop shadow in the menu bar as indicated here.

Screen Shot 2021-03-05 at 1.14.55 PM

Favicons

Favicons

Favicon_152

152px x 152px

Favicon_152

120px x 120px

Favicon_152

32px x 32px

Favicon_152

16px x 16px

Favicon_152

All Favicons