Typography
Typography communicates tone and readability through structured text styles and hierarchy.
Search
Font family
The font family defines the overall style of text, contributing to both readability and brand identity.
Kernel currently utilizes Poppins, a modern and versatile sans-serif typeface. It’s designed to enhance clarity while maintaining a professional appearance.
Poppins
sans-serif
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
To integrate Poppins into your projects, you can
Font size
Font size determines the hierarchy and readability of text across your designs.
Kernel provides a well-structured range of font sizes tailored to suit various use cases, from headings and titles to body text and captions.
Aa
48
Aa
64
Aa
80
Aa
96
Aa
12
Aa
14
Aa
16
Aa
20
Aa
24
Aa
32
Font weight
Font weight defines the thickness of the characters, playing a vital role in establishing visual hierarchy and emphasis.
Kernel offers a curated selection of font weights: Regular, Medium, SemiBold, and Bold, enabling flexibility for various design contexts such as headings, titles, and body text.
Aa
400
Aa
500
Aa
600
Aa
700
Font line height
Line height defines the vertical spacing between lines of text, significantly impacting readability and overall design balance.
Kernel adopts a standard line height of 150% (1.5x) for most text styles to ensure accessibility and ease of reading.
For large headings, we use a slightly tighter line height of 120% (1.2x) to enhance visual impact and maintain a compact aesthetic.
150%
Kernel
Design System
120%
Kernel
Design System
Accessibility Note
The W3C accessibility guidelines recommend a minimum line height of 1.5 for paragraphs to support users with visual and cognitive disabilities.
This spacing helps prevent text from appearing cluttered, making it easier to track lines and comprehend content.
By following these principles, Kernel ensures that typography remains accessible and visually appealing, providing a harmonious reading experience across all text styles.
Typography Tokens
Core Tokens
Typography tokens in Kernel define the fundamental text attributes, enabling consistency and scalability across designs. Each token is crafted to represent specific font attributes with clarity and precision.
Value
Token
Example
Poppins
type-fontFamily-010
12px
type-fontSize-010
The quick brown fox
14px
type-fontSize-020
The quick brown fox
16px
type-fontSize-030
The quick brown fox
20px
type-fontSize-040
The quick brown fox
24px
type-fontSize-050
The quick brown fox
32px
type-fontSize-060
The quick brown fox
48px
type-fontSize-070
The quick brown fox
64px
type-fontSize-080
The quick brown fox
80px
type-fontSize-090
The quick brown fox
96px
type-fontSize-100
The quick brown fox
400
type-fontWeight-regular
The quick brown fox
500
type-fontWeight-medium
The quick brown fox
600
type-fontWeight-semibold
The quick brown fox
700
type-fontWeight-bold
The quick brown fox
120%
type-lineHeight-010
150%
type-lineHeight-020
Token
Font Family
Font Size
Font Weight
Line Height
Usage
Example
h1
type-fontFamily-010
type-fontSize-100
type-fontWeight-semibold
type-lineHeight-010
Use for the striking and attention-grabbing titles, such as brand and marketing content.
The quick brown fox
h2
type-fontFamily-010
type-fontSize-090
type-fontWeight-semibold
type-lineHeight-010
Use for the striking and attention-grabbing titles, such as brand and marketing content.
The quick brown fox
h3
type-fontFamily-010
type-fontSize-080
type-fontWeight-bold
type-lineHeight-010
Use for the striking and attention-grabbing titles, such as brand and marketing content.
The quick brown fox
h4
type-fontFamily-010
type-fontSize-070
type-fontWeight-semibold
type-lineHeight-010
Use for mid-tier headings to group related content blocks or emphasize features and benefits.
The quick brown fox
h5
type-fontFamily-010
type-fontSize-060
type-fontWeight-medium
type-lineHeight-020
Use for smaller section titles or concise yet noticeable labels.
The quick brown fox
h6
type-fontFamily-010
type-fontSize-050
type-fontWeight-medium
type-lineHeight-020
Use for the smallest headings, ideal for labeling content areas, subtitles, or metadata.
The quick brown fox
title1
type-fontFamily-010
type-fontSize-040
type-fontWeight-medium
type-lineHeight-020
Use for card titles or titles within components, with size variations to suit different contexts.
The quick brown fox
title2
type-fontFamily-010
type-fontSize-030
type-fontWeight-medium
type-lineHeight-020
The quick brown fox
title3
type-fontFamily-010
type-fontSize-020
type-fontWeight-medium
type-lineHeight-020
The quick brown fox
caption1
type-fontFamily-010
type-fontSize-020
type-fontWeight-medium
type-lineHeight-020
Use for text in all capital letters, with size variations to suit different emphasis levels.
The quick brown fox
caption2
type-fontFamily-010
type-fontSize-010
type-fontWeight-medium
type-lineHeight-020
The quick brown fox
body1
type-fontFamily-010
type-fontSize-030
type-fontWeight-regular
type-lineHeight-020
Use for primary body text, ideal for paragraphs or general content that requires readability and clarity.
The quick brown fox
body2
type-fontFamily-010
type-fontSize-020
type-fontWeight-regular
type-lineHeight-020
Use for secondary body text, typically used for less prominent content or descriptions.
The quick brown fox
body3
type-fontFamily-010
type-fontSize-010
type-fontWeight-regular
type-lineHeight-020
Use for smaller body text, often used for supplementary information, captions, or disclaimers.
The quick brown fox
label1
type-fontFamily-010
type-fontSize-030
type-fontWeight-medium
type-lineHeight-020
Use for primary labels, typically for buttons, statuses, or tabs that need to stand out and be easily noticeable.
The quick brown fox
label2
type-fontFamily-010
type-fontSize-020
type-fontWeight-medium
type-lineHeight-020
Use for secondary labels, often for less emphasized buttons or statuses that provide supplementary information.
The quick brown fox
label3
type-fontFamily-010
type-fontSize-010
type-fontWeight-medium
type-lineHeight-020
Use for smaller labels, suitable for minor details or less prominent elements within components.
The quick brown fox
Style Presets
Typography style presets in Kernel provide pre-configured combinations of core typography tokens, tailored for specific use cases. These presets ensure consistency and simplify the design process by offering ready-to-use styles for various text elements.