How to calculate a decreased line-height for wrapped headlines when using a typographic scale.

decreased-line-height-calculation.css

:root {
  --phi: 1.618033988749895;
  --perfect-fourth: calc(4/3);
}

html { 
  line-height: 1.5;
  line-height: var(--phi);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.125;
/**
 * Theorem:
 * If a typographic scale is used then it is possible to calculate a decreased line-height for wrapped headlines 
 * by dividing the current line-height by the ratio of the typographic scale.
 * 
 * 𝒍 ÷ 𝒓 = 𝑫
 *
 * Proof: 
 * 𝑹 ∋ {𝒇ⁿ,𝒇ⁿ⁺¹,𝒇ⁿ⁺²,…}, 𝒇ⁿ⁺¹ ÷ 𝒇ⁿ = 𝒓, 𝒇 × 𝒍 = 𝒉 ⇒ 𝒉 ÷ 𝒓 = (𝒇×𝑫) ⇒ (𝒇×𝑫) ÷ 𝒇 = 𝑫 ⇒ 𝑫 = 𝒍 ÷ 𝒓.∎
 *
 * Let 𝑹 denote a set of values in which represent a typographic scale, 
 * 𝒇 denote a value within 𝑹 that represents the font-size absolute length with the unit identifier omitted,
 * 𝒓 denote the ratio of the typographic scale between 𝒇ⁿ & 𝒇ⁿ⁺¹,
 * 𝒍 denote a (~) unitless line-height,
 * 𝒉 denote the computed value of 𝒇×𝒍,
 * and finally 𝑫 denote the decreased line-height. 
 * 
 * Case 1: 
 * Assume 𝑹 ∋ {19, 25.333, 33.777,…} where 𝒇ⁿ⁺¹ = 33.777 & 𝒇ⁿ = 25.333.
 * 33.777 ÷ 25.333 ≈ 1.333 = 𝒓, which can also be viewed as 𝒓 ≈ (4/3) ≈ 1.333.
 * 𝒇 = 19 & 𝒍 = 1.5 ⇒ 19 × 1.5 = 𝒉 ⇒ 𝒉 = 28.5 ⇒ 
 * 28.5 ÷ (4/3) = 21.375 = (𝒇×𝑫) ⇒ 
 * 21.375 ÷ 19 = 1.125 = 𝑫 ⇒ 
 * 1.125 = 1.5 ÷ 1.333.∎
 * 
 * Case 2:
 * Assume 𝒓 = (4/3), 𝒍 = φ where ≈ 1.6180339887…,
 * 𝒍 ÷ 𝒓 = 𝑫 ⇒ φ ÷ 𝒓,
 * 1.6180339887… ÷ (4/3) ≈ 1.213525…∎
 *
 */
  line-height: calc(var(--phi)/var(--perfect-fourth));
}