## 🔠 Typography Calculator

## Understanding Typography Hierarchy Options

For a clean and consistent typography, establishing a clear hierarchy is essential. This hierarchy ensures that your content is easily readable and visually appealing. Below are three distinct hierarchy options you can choose from, each with its own calculation method based on the H1 size you input.

**Option 1: Simple Hierarchy**

**Concept:** A straightforward scaling approach where each subsequent heading level is proportionally smaller than the previous one. This option is ideal for designs that prefer simplicity and clear differentiation between heading levels.

**Calculation Method:**

**H1:**72px (Base size)**H2:**50% of H1**H3:**Two-thirds of H2**H4:**Three-quarters of H3

**Formulas:**

**H2 Size:**`H1 Size × 0.5`

**H3 Size:**`H2 Size × (2/3)`

**H4 Size:**`H3 Size × (3/4)`

**Example:**

**H1:**72px**H2:**72px × 0.5 =**36px****H3:**36px × (2/3) =**24px****H4:**24px × (3/4) =**18px**

**Option 2: More Distinct Hierarchy**

**Concept:** This option creates a more pronounced difference between each heading level, making each subsequent heading significantly smaller than the previous one. It’s suitable for designs that require clear separation between headings for enhanced emphasis.

**Calculation Method:**

**H1:**72px (Base size)**H2:**Two-thirds of H1**H3:**Two-thirds of H2**H4:**Three-quarters of H3

**Formulas:**

**H2 Size:**`H1 Size × (2/3)`

**H3 Size:**`H2 Size × (2/3)`

**H4 Size:**`H3 Size × (3/4)`

**Example:**

**H1:**72px**H2:**72px × (2/3) ≈**48px****H3:**48px × (2/3) ≈**32px****H4:**32px × (3/4) =**24px**

**Option 3: More Consistent Hierarchy**

**Concept:** A balanced approach that maintains a consistent scaling ratio across heading levels. This option ensures smooth transitions between headings, providing a harmonious and cohesive typography structure.

**Calculation Method:**

**H1:**72px (Base size)**H2:**50% of H1**H3:**Two-thirds of H2**H4:**Half of H3

**Formulas:**

**H2 Size:**`H1 Size × 0.5`

**H3 Size:**`H2 Size × (2/3)`

**H4 Size:**`H3 Size × 0.5`

**Example:**

**H1:**72px**H2:**72px × 0.5 =**36px****H3:**36px × (2/3) =**24px****H4:**24px × 0.5 =**12px**

## General Guidelines for Typography Hierarchy

To create a harmonious and readable design, consider the following guidelines when establishing your typography hierarchy:

**Consistent Scaling:**- Ensure each heading level is proportionally scaled relative to its predecessor.
- Avoid abrupt size changes that can disrupt the visual flow.

**Line Height:**- Maintain a comfortable line-height for readability.
**Suggested Ratios:****H1:**1.2**H2:**1.3**H3:**1.4**H4:**1.5**Paragraph (p):**1.6

**Letter Spacing:**- Adjust letter-spacing to enhance legibility.
**Recommended Values:****H1:**0px**H2:**0px**H3:**0px**H4:**0px**Paragraph (p):**0px

**Mobile Responsiveness:**- Scale down font sizes for mobile devices to ensure content remains readable without overwhelming the screen.
**Suggested Scaling Factor:**Reduce by 20%**H1 Mobile:**`H1 Size × 0.8`

**H2 Mobile:**`H2 Size × 0.8`

**H3 Mobile:**`H3 Size × 0.8`

**H4 Mobile:**`H4 Size × 0.8`

**Paragraph Mobile:**`p Size × 0.8`

## Example Calculation Based on Option 1

Let’s walk through an example using **Option 1: Simple Hierarchy** with an **H1 size of 72px**.

**1. Input Values**

**H1 Size:**72px**Hierarchy Option:**Option 1

**2. Calculations**

**Option 1: Simple Hierarchy**

**H2 Size:**

$72px×0.5=36px$**H3 Size:**

$36px×32 =24px$**H4 Size:**

$24px×43 =18px$**Paragraph (p) Size:**

$72px×0.25=18px$

**Mobile Sizes (Reduced by 20%)**

**H1 Mobile:**

$72px×0.8=57.6px$**H2 Mobile:**

$36px×0.8=28.8px$**H3 Mobile:**

$24px×0.8=19.2px$**H4 Mobile:**

$18px×0.8=14.4px$**Paragraph Mobile:**

$18px×0.8=14.4px$

## 📚 Understanding Typography Hierarchy Options

For a clean and consistent typography, establishing a clear hierarchy is essential. This hierarchy ensures that your content is easily readable and visually appealing. Below are three distinct hierarchy options you can choose from, each with its own calculation method based on the H1 size you input.

### 🔹 Option 1: Simple Hierarchy

**Concept:** A straightforward scaling approach where each subsequent heading level is proportionally smaller than the previous one. Ideal for designs that prefer simplicity and clear differentiation between heading levels.

**Calculation Method:**

**H1:**72px (Base size)**H2:**50% of H1**H3:**Two-thirds of H2**H4:**Three-quarters of H3

**Formulas:**

**H2 Size:**H1 Size × 0.5**H3 Size:**H2 Size × (2/3)**H4 Size:**H3 Size × (3/4)

**Example:**

H1: 72px H2: 72px × 0.5 = 36px H3: 36px × (2/3) ≈ 24px H4: 24px × (3/4) = 18px

### 🔹 Option 2: More Distinct Hierarchy

**Concept:** Creates a more pronounced difference between each heading level, making each subsequent heading significantly smaller than the previous one. Suitable for designs that require clear separation between headings for enhanced emphasis.

**Calculation Method:**

**H1:**72px (Base size)**H2:**Two-thirds of H1**H3:**Two-thirds of H2**H4:**Three-quarters of H3

**Formulas:**

**H2 Size:**H1 Size × (2/3)**H3 Size:**H2 Size × (2/3)**H4 Size:**H3 Size × (3/4)

**Example:**

H1: 72px H2: 72px × (2/3) ≈ 48px H3: 48px × (2/3) ≈ 32px H4: 32px × (3/4) = 24px

### 🔹 Option 3: More Consistent Hierarchy

**Concept:** A balanced approach that maintains a consistent scaling ratio across heading levels. Ensures smooth transitions between headings, providing a harmonious and cohesive typography structure.

**Calculation Method:**

**H1:**72px (Base size)**H2:**50% of H1**H3:**Two-thirds of H2**H4:**Half of H3

**Formulas:**

**H2 Size:**H1 Size × 0.5**H3 Size:**H2 Size × (2/3)**H4 Size:**H3 Size × 0.5

**Example:**

H1: 72px H2: 72px × 0.5 = 36px H3: 36px × (2/3) ≈ 24px H4: 24px × 0.5 = 12px

### 📐 General Guidelines for Typography Hierarchy

**Consistent Scaling:**Ensure each heading level is proportionally scaled relative to its predecessor. Avoid abrupt size changes that can disrupt the visual flow.**Line Height:**Maintain a comfortable line-height for readability. Suggested ratios:- H1: 1.2
- H2: 1.3
- H3: 1.4
- H4: 1.5
- Paragraph (p): 1.6

**Letter Spacing:**Adjust letter-spacing to enhance legibility. Recommended values:- H1: 0px
- H2: 0px
- H3: 0px
- H4: 0px
- Paragraph (p): 0px

**Mobile Responsiveness:**Scale down font sizes for mobile devices to ensure content remains readable without overwhelming the screen. Suggested scaling factor: Reduce by 20%- H1 Mobile: H1 Size × 0.8
- H2 Mobile: H2 Size × 0.8
- H3 Mobile: H3 Size × 0.8
- H4 Mobile: H4 Size × 0.8
- Paragraph Mobile: p Size × 0.8

### 🧮 Example Calculation Based on Option 1

Let's walk through an example using **Option 1: Simple Hierarchy** with an **H1 size of 72px**.

#### 1. Input Values

**H1 Size:**72px**Hierarchy Option:**Option 1

#### 2. Calculations

##### Option 1: Simple Hierarchy

**H2 Size:**72px × 0.5 = 36px**H3 Size:**36px × (2/3) ≈ 24px**H4 Size:**24px × (3/4) = 18px**Paragraph (p) Size:**72px × 0.25 = 18px

##### Mobile Sizes (Reduced by 20%)

**H1 Mobile:**72px × 0.8 = 57.6px**H2 Mobile:**36px × 0.8 = 28.8px**H3 Mobile:**24px × 0.8 = 19.2px**H4 Mobile:**18px × 0.8 = 14.4px**Paragraph Mobile:**18px × 0.8 = 14.4px

#### 3. Result Tables

##### Desktop View

Element | Font Size | Line-Height | Letter Spacing |
---|---|---|---|

H1 | 72px | 1.2 | 0px |

H2 | 36.00px | 1.3 | 0px |

H3 | 24.00px | 1.4 | 0px |

H4 | 18.00px | 1.5 | 0px |

Paragraph (p) | 18.00px | 1.6 | 0px |

##### Mobile View

Element | Font Size | Line-Height | Letter Spacing |
---|---|---|---|

H1 | 57.60px | 1.2 | 0px |

H2 | 28.80px | 1.3 | 0px |

H3 | 19.20px | 1.4 | 0px |

H4 | 14.40px | 1.5 | 0px |

Paragraph (p) | 14.40px | 1.6 | 0px |