​Primary Typeface​

 

Titles

• Raleway,

• Raleway semibold

​

Paragraph

​

• Helvetica

​

​

Website Headings

 

The heading structure has been implemented here and across the entire website. This is the basic breakdown of standard heading

sizes and their relationship to the body copy. Use headers appropriately and do not reset.

Obviously, exceptions exist, especially between different page templates. All headings are not bold. Bold headings and change color only if need it to fit a specific section. Make sure headings stay consistent across the site. 

 

Header 1 (90px)

Raleway Semi Bold

USAGE: Page titles, banners, and slogan.

​

​

Header 2 (52px) - Raleway Semi Bold

USAGE: Banners, page section titles.

​

​

Header 3 (36px) - Raleway Semi Bold

USAGE: Body/description section titles, Coordinator name, “Applications for 2020 now closed” line in Apply page.

​

​

Header 4 (24px) - Lulo Clea

Character spacing: -0.1 & Line

Spacing: 1.1 

USAGE: Fellow name in Bio.

​

​

Header 5 (18px) - Raleway Semi Bold

USAGE:

• Main page Highlight body section, What is the DreamSF fellowship blocks and quotes in colored blocks, and navigation bar text.

• Some Header 5s have been changed to between 18px and  24px to adequately fill its content-specific block.

​

​

Header 6 (12px) 

USAGE: Button 1.

​

​

Paragraph 1 (15px) - Helvetica Light

USAGE: Fellow Bio body and fellow quotes(16px) in Meet the Fellows.

​

​

Paragraph 2 (18px) - Helvetica

USAGE: Page description body section and FAQ answers.

​

​

Paragraph 3 (22px) - Helvetica

USAGE: FAQ questions and large page body content.