menu

DESIGN SYSTEM

Typography

GOTHAM AND MILLER are the global typefaces for the Compassion brand. These fonts will be used for print. Gotham is the primary sans serif while Miller is the serif. For digital, NOTO SERIF will replace Miller. Digital will use Noto Serif as the primary font while Gotham will be the secondary font.

DIGITAL FONTS

Noto Serif

.serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\-+÷×=>®©$€£¥¢:;,.*

GOTHAM

.sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\-+÷×=>®©$€£¥¢:;,.*

PRINT FONTS

GOTHAM

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\-+÷×=>®©$€£¥¢:;,.*

HEADERS & SIZES

Releasing children from poverty in Jesus' name

H1 Title

Font family: "Noto Serif KR", serif
Font size: 43px
Font weight: 400 / Normal
Line height: 1.25

Releasing children from poverty in Jesus' name

H2 Title

Font family: "HCo Gotham SSm", sans-serif
Font size: 31px
Font weight: 700 / Bold
Line height: 1.25

Releasing children from poverty in Jesus' name

H3 Title

Font family: "HCo Gotham SSm", sans-serif
Font size: 24px
Font weight: 500 / Medium
Line height: 1.25

Releasing children from poverty in Jesus' name

H4 Title

Font family: "HCo Gotham SSm", sans-serif
Font size: 20px
Font weight: 400 / Book
Line height: 1.25

Jesus is at the heart of what we do. Each of the 2 million children in our program has the chance to hear the life-changing message of Jesus’ love. We believe Jesus is the ultimate source of hope: both for the immediate and the eternal.

Body Text

Font family: "HCo Gotham SSm", sans-serif
Font size: 16px
Font weight: 300 / Light
Line height: 1.25

FONT WEIGHT VARIATIONS

Gotham Light

.font-light

Gotham Book

.font-book

Gotham Medium

.font-medium

Gotham Bold

.font-bold

Gotham Black

.font-black

Noto Serif Extra Light

.serif.font-extra-light

Noto Serif Light

.serif.font-light

Noto Serif Book

.serif.font-book

Noto Serif Medium

.serif.font-medium

Noto Serif Semi Bold

.serif.font-semi-bold

Noto Serif Bold

.serif.font-bold

Noto Serif Black

.serif.font-black

EMPHASIS STYLES
            
    <a href="" title="">This is a text link</a>
            
            

Strong is used to indicate strong importance. This is Gotham Bold

            
    <strong>Strong is used to indicate strong importance. This is Gotham Bold<strong>
            
            

This text has added emphasis. This is Gotham Light Italic

            
    <em>This text has added emphasis. This is Gotham Light Italic<em>
            
            

This has a strikethrough

            
    <s>This has a strikethrough<s>
            
            

This small text is for fine print, etc.

            
    <small>This small text is for fine print, etc.<small>
            
            
ALIGNMENT

This is the default text alignment. You know what else takes great alignment? Rock climbing. You should all look into it.

                
    <p class="left_text">This paragraph is left aligned...</p>
                
                

This paragraph is centre aligned. Just like an expert rock climbers should be. Alex Honnold was totally centre-aligned on El Cap!

                
    <p class="centre_text">This paragraph is center aligned...</p>
                
                

This paragraph is right aligned. Hot tip: hold out your index finger and thumb. It's your left hand if they make an 'L' for legend.

                
    <p class="right_text">This paragraph is right aligned...</p>