Typography

Typography is crucial when designing a website.

It's really easy to choose a color and fontsize that doesn't create contrast, which makes it hard for visitors to understand the visual hierarchy.

Text types

Type	Size (pixels)	Color (hex)	Font	Uses
Heading	40	#DC2626	Manrope Bold	Page name ONLY
Subheading	40	#000000	Manrope Regular	Organizing content (contact info, submission, requirements, etc)
Sub-sub heading	30	#000000	Manrope Regular	For information that can be grouped together under a subheading (see the second "good" example)
Paragraph Text (normal)	16	#2B2E38	Manrope Regular	Usually goes below headings, subheadings, and sub-sub headings

HALT

Only use the font MANROPE

Formatting

For formatting, I only allow ALIGN LEFT for EVERYTHING because it's consistent with the whole design of all the pages, and most people read from left to right (except people who read Arabic).

Examples

Recommended

Good

^ Above the text "Competitive Event Information" has the property red (#DC2626), font Manrope Bold, and font size 40 pixels.

Below it "Middle School" and "High School" are using font Manrope Regular, property black (#000), and font size 40 pixels.

It's easy to know where to look, and it's also visually pleasing.

Good

This is a great example of sub-sub heading because "Eastern Region Advisors" and "Western Region Advisors" are basically the same thing, so they can be grouped together in a sub-sub heading.

ONLY use sub heading when it's completely different information on the same page!!

Not Recommended

Not Recommended

^ Above, all the subheadings and heading use the same red color. Next, all the sub headings are small and the same size as the paragraph texts. This is bad because it creates very LITTLE visual hierarchy (try reading a newspaper from the 1800s! (opens new window)).