Skip to Main Content

Colors & Typography

Colors

Use of correct FIU colors across the digital portfolio helps us reinforce our brand identity and is required to ensure we promote a consistent brand experience to our users. Any colors that are not showcased here must be approved by the Digital Communications team.

Primary FIU Colors

The official FIU blue and gold colors do not meet Web Content Accessibility Guidelines 2.0. University websites are required by law to meet these guidelines. While FIU blue is accessible for those with color blindness, FIU gold is not.

As such, the regular FIU color palette should not be used as a primary color on any website or user interface without approval from Digital Communications.

As an alternative, we provide the following accessible palette:

Accessible Blue Accessible Blue
#081E3F
Accessible YellowAccessible Yellow
#F8C93E

Font Color Accessibility

Fonts must also comply with Web Content Accessibility Guidelines 2.0. Here are some basic rules to help ensure font contrast is acceptable:

  • Use black text for body copy over a white background, or inversely use white text for body copy over a dark background
  • Avoid putting text on top of images
  • Validate the colors you are using pass webaim.org’s contrast checker

Typography

Typography is a core element of design. The options we've defined here lets us communicate in a variety of contexts while maintaining a consistent look and feel. Use these fonts across all current and future platforms.

Official FIU Fonts

These fonts are the standard for FIU and can be used in design treatments in print and online.

Adobe Garamond: Used in banners, headings and headlines only

Helvetica / Neue Helvetica: Used in body content

Digital FIU Fonts

In addition to official FIU fonts, these Google Fonts are better suited to a wide range of digital screens on which FIU’s content is read.

Bitter: Used in banners, headings and headlines only

A B C D E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c d e f g h i j k l m n o p q r s š t u v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Roboto: Used in body content

A B C D E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c d e f g h i j k l m n o p q r s š t u v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Font Size

FIU base font size is 16px or 1rem and 100% for html and body in our core CSS templates. Set all block and body elements to this base.

Headings

Headings communicate the importance and hierarchy of content. Not only do they help readers understand content better, but they also help for search engine optimization. Only use heading 1 for the title of your page and use the rest in decending order (e.g. use heading 2 and use heading 3 for subheading under the heading 2).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6