06

Typography

DOWNLOAD ASSETS
05.1

FONT

We use DM SANS in our brand identity. This versatile font family allows us to maintain consistency across all our communications while ensuring clarity and readability.
DM Sans
05.2

HIERARCHY

A clear typographic hierarchy ensures smooth readability and visual structure - guiding the viewer’s eye through content with clarity, emphasis, and flow.
DM Sans
05.3

HEADINGS & BODY

The table outlines Draper’s full desktop typographic system. covering size, spacing, and case, for consistent hierarchy across all brand touchpoints. It ensures clarity, improves user experience, and reflects the brand’s design precision.
Desktop
SIZE
pixels
rem
Line height
Case
HEADING H1
40px
2.5rem
120%
Uppercase
HEADING H2
32px
2rem
120%
Uppercase
HEADING H3
24px
1.5rem
120%
Uppercase
Subheading
18px
1.125rem
120%
Sentence Case
paragraph p1
16px
1rem
150%
Sentence Case
paragraph p2
14px
0.75rem
150%
Sentence Case
paragraph p3
12px
0.625rem
150%
Sentence Case
Mobile
SIZE
pixels
rem
Line height
Case
HEADING H1
32px
2rem
125%
Uppercase
HEADING H2
26px
1.625rem
125%
Uppercase
HEADING H3
20px
1.25rem
130%
Uppercase
Subheading
16px
1rem
135%
Sentence Case
paragraph p1
14px
0.875rem
160%
Sentence Case
paragraph p2
12px
0.75rem
160%
Sentence Case
paragraph p3
11px
0.6875rem
160%
Sentence Case
DM Sans
05.4

WEIGHTS & STYLES

To ensure coherence, we adhere to a restrained approach in selecting font weights and styles. Within the DM Sans family, we primarily utilize Regular and Bold variants for our brand identity.
DM Sans

Regular

ABCDEFGHIJKLMNOP
QRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
DM Sans

Bold

ABCDEFGHIJKLMNOP
QRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
05.5

TYPEFACE SETTINGS

Explore the nuances of kerning and tracking. Discover how adjusting these settings can enhance readability and visual appeal in your typography.
Kerning: the space between individual letters
Tracking: the space between all letters
05.6

USAGE CHART

Explore the nuances of kerning and tracking. Discover how adjusting these settings can enhance readability and visual appeal in your typography.
DESKTOP
SIZE
LINE-HEIGHT
KERNING
TRACKING
WORD-SPACING
00-16 px
128%
Metrics
-1%
—
16-28 px
120%
Metrics
-2%
—
28-42 px
104%
Metrics
-2%
—
42-76 px
98%
Metrics
-3%
—
76 px+
96%
Metrics
-4%
—
MObile
SIZE
LINE-HEIGHT
KERNING
TRACKING
WORD-SPACING
00-14 px
135%
Metrics
0%
—
14-24 px
130%
Metrics
-1%
—
24-36 px
125%
Metrics
-1.5%
—
36-64 px
115%
Metrics
-2%
—
64 px+
110%
Metrics
-2.5%
—

DRAPER TYPEFACES

[ DOWNLOAD ASSET ]
04
[ Corporate Logo - LP's and Investors & fundraising ]
[ COLOR ]
06