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

Rich Text

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.

Heading 1

Heading 2

Heading 3

Heading 4

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Heading 1

Heading 2

Heading 3

Heading 4

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

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 XXL - 32PX / 1.25

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 Gray - #666666

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