Design Style:
![[1_OdWCMGY3WkqyqWQyMFNd6g@2x.webp]]
68px - H1 52px - H2 40px - H3 28px - H4 - P1 20px - H5 - P2 16px - H6 - P3 - B1 - L1 14px - P4 - B2 - L2 12px 10px
To cover most use cases for a standard website project, we will want to have 6 heading sizes (H1 to H6), 4 paragraph sizes (P1 to P4) with different styles, and at least 2 button and label sizes (B1/L1 and B2/L2).
Line Height:
- Headings → multiply the font size by 1.2 (120%)
- Paragraphs → multiply the font size by 1.5 (150%)
- Buttons and Labels → use 100% line height
4.2. Letter spacing
While letter spacing can be more subjective, here are three simple rules that are widely accepted to enhance typography systems overall:
- Headings → decrease letter spacing (around 2% or –0.02em)
- Paragraphs → leave as is (0%)
- Buttons and Labels → increase letter spacing (around 5% or 0.05em)
4.3. Font weights Again, there are certain standards that have worked for a long time so no need to overcomplicate things. For headings, we can make the font weight progressively less bold as the font size decreases. For paragraphs, it’s nice to have two contrasting font weights: a regular (default and italic styles) and bold. And, for buttons and labels we can use semibold, a heavier font weight without exaggerating.
Headings: H1 and H2 → Bold (700) H3, H4, H5 → Semibold (600) H6 → Medium (500) Paragraphs → Regular (400) and Bold (700) Buttons and Labels → Semibold (600)
For Mobile
48px - H1 40px - H2 32px - H3 24px - H4 - P1 20px - H5 - P2 16px - H6 - P3 - B1 - L1 14px - P4 - B2 - L2 12px 10px
For Clamping
We’ll end up with the following:
- H1 → clamp(3rem, 2.0909rem + 3.0303vw, 4.25rem)
- H2 → clamp(2.5rem, 1.9545rem + 1.8182vw, 3.25rem)
- H3 → clamp(2rem, 1.6364rem + 1.2121vw, 2.5rem)
- H4 and P1 → clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem)
Later, when setting up the Global Fonts in Elementor we just need to use “clamp(…)” without “font-size” and “;” in the end.
Headlines: H1 - Roboto Bold H2 - Roboto Bold H3 - Roboto Bold H4 - Roboto Bold H5 - Roboto Bold H6 - Roboto Bold
Body - Lato
Color Palette:
- Main Color (Headlines, Icons):
#3f6e61 - Button Color:
#278575 - Accent Color (Hovered Links):
#aec7c2 - The Grey (Body Copy): `#302929’
- Accent Color (Used Links - The Brown):
#8e8e8e - CTA Buttons Subtext:
#a95e59
//
Final Style
H1
- Family: Roboto
- Size: clamp(3rem, 2.0909rem + 3.0303vw, 4.25rem)
- Weight: 700 (Bold)
- Line-Height: 120%
- Letter Spacing: -0.02em
H2
- Family: Roboto
- Size: clamp(2.5rem, 1.9545rem + 1.8182vw, 3.25rem)
- Weight: 700 (Bold)
- Line-Height: 120%
- Letter Spacing: -0.02em
H3
- Family: Roboto
- Size: clamp(2rem, 1.6364rem + 1.2121vw, 2.5rem)
- Weight: 600 (Semibold)
- Line-Height: 120%
- Letter Spacing: -0.02em
H4
- Family: Roboto
- Size: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem)
- Weight: 600 (Semibold)
- Line-Height: 120%
- Letter Spacing: -0.02em
P1 Default
- Family: Lato
- Size: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem)
- Weight: 400 (Regular)
- Line-Height: 150%
P1 Italic
- Family: Lato
- Size: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem)
- Weight: 400 (Regular)
- Style: Italic
- Line-Height: 150%
P1 Bold
- Family: Lato
- Size: clamp(1.5rem, 1.3182rem + 0.6061vw, 1.75rem)
- Weight: 700 (Bold)
- Line-Height: 150%
H5
- Family: Roboto
- Size: 20px
- Weight: 600 (Semibold)
- Line-Height: 120%
- Letter Spacing: -0.02em
P2 Default
- Family: Lato
- Size: 20px
- Weight: 400 (Regular)
- Line-Height: 150%
P2 Italic
- Family: Lato
- Size: 20px
- Weight: 400 (Regular)
- Style: Italic
- Line-Height: 150%
P2 Bold
- Family: Lato
- Size: 20px
- Weight: 700 (Bold)
- Line-Height: 150%
H6
- Family: Roboto
- Size: 16px
- Weight: 500 (Medium)
- Line-Height: 120%
- Letter Spacing: -0.02em
P3 Default (Body)
- Family: Lato
- Size: 16px
- Weight: 400 (Regular)
- Line-Height: 150%
P3 Italic (Body)
- Family: Lato
- Size: 16px
- Weight: 400 (Regular)
- Style: Italic
- Line-Height: 150%
P3 Bold (Body)
- Family: Lato
- Size: 16px
- Weight: 700 (Bold)
- Line-Height: 150%
B1
- Family: Lato
- Size: 16px
- Weight: 600 (SemiBold)
- Line-Height: 100%
- Letter Spacing: 0.05em
L1
- Family: Lato
- Size: 16px
- Weight: 600 (SemiBold)
- Line-Height: 100%
- Letter Spacing: 0.05em
P4 Default
- Family: Lato
- Size: 14px
- Weight: 400 (Regular)
- Line-Height: 150%
P4 Italic
- Family: Lato
- Size: 14px
- Weight: 400 (Regular)
- Style: Italic
- Line-Height: 150%
P4 Bold
- Family: Lato
- Size: 14px
- Weight: 700 (Bold)
- Line-Height: 150%
B2
- Family: Lato
- Size: 14px
- Weight: 600 (SemiBold)
- Line-Height: 100%
- Letter Spacing: 0.05em
L2
- Family: Lato
- Size: 14px
- Weight: 600 (SemiBold)
- Line-Height: 100%
- Letter Spacing: 0.05em
//