Typography

Headings & large texts

Fellowship Church provides a constrained set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used. Don’t use units for line-heights. Keep it unitless.

Fellowship Church

Large Heading - 56PX / 1

Fellowship Church

H1 - 50PX / 1.1

Fellowship Church

H2 - 38PX / 1.2

Fellowship Church

H3 - 24PX / 1.3

Fellowship Church

H4 - 20PX / 1.3

Paragraphs and caption

Neue Haas Grotesk is the standard typeface for Fellowship Church on the web for large texts, headings and paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph XL - 24PX / 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph LG - 19PX/1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph - 17PX/1.7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph SM - 15PX/1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Black - #000000

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Faded - RGBA(0,0,0,0.5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Blue - #4FADFF

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text White - #FFFFFF

Colors

Main colors

Our main palette uses bright colors to bring a boldness to our brand, and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits.

FC Blue — #4FADFF

Neutral colors

Neutrals