Font Selection

Typography plays a crucial role in conveying information effectively, especially in the digital realm where visual communication is paramount. This section is designed to provide guidelines on font selection, heading hierarchy (h1-h6), and other web-based text styles to ensure consistency and clarity across all our educational materials.

Lato
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
0 1 2 3 4 5 6 7 8 9 0

Heading

h1, h2, h3, h4, h5, h6 {font-weight: 900;}
@font-face{font-family:Museo Sans Display;font-display:block;src:url(//education.ufl.edu/wp-content/uploads/et-fonts/MuseoSansDisplay-Black-1.ttf) format(“truetype”);font-weight:100,200,300,400,500,600,700,800,900;font-style:normal}

Content Hierarchy & Color Sets

Heading hierarchy (H1-H6) helps organize content hierarchically, guiding readers through the structure of the document or webpage. Consistent use of headings not only improves readability but also aids in navigation for users with screen readers.

Jump to section

• Typography Color Set 1
• Typography Color Set 2
• Typography Color Set 3
• Typography Color Set 4 (Dark Backgrounds)

Typography Heading Color Set 1

This is an orange H1 heading.

This is a blue H2 heading.

This is a teal H3 heading.

This is a navy H4 heading.

This is an orange H5 heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta erat sem, vel tincidunt massa vulputate sit amet. Mauris nec quam ut orci faucibus scelerisque ac a tortor. Cras augue magna, malesuada non laoreet vitae, convallis a nunc.

Duis tincidunt nulla nec eros rhoncus, et interdum lorem finibus. Sed pellentesque congue varius.

Phasellus at pellentesque nisl. Proin feugiat magna purus, nec pharetra magna rutrum ac. Ut pellentesque ullamcorper pellentesque. Aliquam vitae laoreet ipsum, tempor vulputate augue. Morbi nec ex ornare, venenatis nunc quis, fringilla tellus. Donec consectetur, nulla eget feugiat interdum, leo libero finibus enim, in maximus tellus ante ac dolor.

• Phasellus varius interdum eros a dignissim.
• Donec finibus rhoncus semper.
• Nulla scelerisque eu velit sed iaculis.

Proin eu ante nisl. Curabitur a risus sed risus sodales mollis et quis dui. Integer gravida pellentesque justo.

1. In mattis mi ut lacus vestibulum, in semper arcu ullamcorper.
2. Vivamus scelerisque venenatis turpis, nec aliquam felis posuere at.
3. Donec egestas ut neque nec faucibus.

Typography Heading Color Set 2

This is an blue H1 heading.

This is an orange H2 heading.

This is a navy H3 heading.

This is a teal H4 heading.

This is a blue H5 heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta erat sem, vel tincidunt massa vulputate sit amet. Mauris nec quam ut orci faucibus scelerisque ac a tortor. Cras augue magna, malesuada non laoreet vitae, convallis a nunc.

Duis tincidunt nulla nec eros rhoncus, et interdum lorem finibus. Sed pellentesque congue varius.

Phasellus at pellentesque nisl. Proin feugiat magna purus, nec pharetra magna rutrum ac. Ut pellentesque ullamcorper pellentesque. Aliquam vitae laoreet ipsum, tempor vulputate augue. Morbi nec ex ornare, venenatis nunc quis, fringilla tellus. Donec consectetur, nulla eget feugiat interdum, leo libero finibus enim, in maximus tellus ante ac dolor.

• Phasellus varius interdum eros a dignissim.
• Donec finibus rhoncus semper.
• Nulla scelerisque eu velit sed iaculis.

Proin eu ante nisl. Curabitur a risus sed risus sodales mollis et quis dui. Integer gravida pellentesque justo.

1. In mattis mi ut lacus vestibulum, in semper arcu ullamcorper.
2. Vivamus scelerisque venenatis turpis, nec aliquam felis posuere at.
3. Donec egestas ut neque nec faucibus.

Typography Heading Color Set 3

This is a teal H1 heading.

This is an orange H2 heading.

This is a navy H3 heading.

This is a blue H4 heading.

This is a navy H5 heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta erat sem, vel tincidunt massa vulputate sit amet. Mauris nec quam ut orci faucibus scelerisque ac a tortor. Cras augue magna, malesuada non laoreet vitae, convallis a nunc.

Duis tincidunt nulla nec eros rhoncus, et interdum lorem finibus. Sed pellentesque congue varius.

Phasellus at pellentesque nisl. Proin feugiat magna purus, nec pharetra magna rutrum ac. Ut pellentesque ullamcorper pellentesque. Aliquam vitae laoreet ipsum, tempor vulputate augue. Morbi nec ex ornare, venenatis nunc quis, fringilla tellus. Donec consectetur, nulla eget feugiat interdum, leo libero finibus enim, in maximus tellus ante ac dolor.

• Phasellus varius interdum eros a dignissim.
• Donec finibus rhoncus semper.
• Nulla scelerisque eu velit sed iaculis.

Proin eu ante nisl. Curabitur a risus sed risus sodales mollis et quis dui. Integer gravida pellentesque justo.

1. In mattis mi ut lacus vestibulum, in semper arcu ullamcorper.
2. Vivamus scelerisque venenatis turpis, nec aliquam felis posuere at.
3. Donec egestas ut neque nec faucibus.

Typography Heading Color Set 4 – Dark backgrounds

This is a sherbet H1 heading.

This is a white H2 heading.

This is a grey H3 heading.

This is a sherbet H4 heading.

This is a grey H5 heading.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta erat sem, vel tincidunt massa vulputate sit amet. Mauris nec quam ut orci faucibus scelerisque ac a tortor. Cras augue magna, malesuada non laoreet vitae, convallis a nunc.

Duis tincidunt nulla nec eros rhoncus, et interdum lorem finibus. Sed pellentesque congue varius.

Phasellus at pellentesque nisl. Proin feugiat magna purus, nec pharetra magna rutrum ac. Ut pellentesque ullamcorper pellentesque. Aliquam vitae laoreet ipsum, tempor vulputate augue. Morbi nec ex ornare, venenatis nunc quis, fringilla tellus. Donec consectetur, nulla eget feugiat interdum, leo libero finibus enim, in maximus tellus ante ac dolor.

• Phasellus varius interdum eros a dignissim.
• Donec finibus rhoncus semper.
• Nulla scelerisque eu velit sed iaculis.

Proin eu ante nisl. Curabitur a risus sed risus sodales mollis et quis dui. Integer gravida pellentesque justo.

1. In mattis mi ut lacus vestibulum, in semper arcu ullamcorper.
2. Vivamus scelerisque venenatis turpis, nec aliquam felis posuere at.
3. Donec egestas ut neque nec faucibus.