Golden ratio typography font size and text

For the websites I produce I always use the GoldenRatio as the base of my typography and text. See here how I calculate and define my font sizes in CSS.

Golden Ratio increments

Golden Ratio and pixels

Definition	golden ratio	pixels	pixels	pixels	pixels	pixels	pixels
8 | XXX-La	2,618	34,034	36,652	41,888	47,124	52,36	57,596
7 | XX-La	2,058	26,754	28,812	32,928	37,044	41,16	45,276
6 | X-La	1,618	21,034	22,652	25,888	29,124	32,36	35,596
5 | Lar	1,272	16,536	17,808	20,352	22,896	25,44	27,984
4 | Med	1,127	14,651	15,778	18,032	20,286	22,54	24,794
3 | Reg (base)	1	13	14	16	18	20	22
2 | Sma	0,886	11,518	12,404	14,176	15,948	17,72	19,492
1 | X-Sm	0,786	10,218	11,004	12,576	14,148	15,72	17,292
			9,744

• = 1.619 (golden ratio) x N (normal/regular font size

Create root in CSS with Golden Ratio pixel size

In this example 1280 is the max width above which the font-size will not get higher.

--global-font-size-3: clamp(14px, calc(18 / 1280 * 100vw), 18px);

The basic font (global-font-size-3) will never be smaller than 14px on small screens.
The basic font (global-font-size-3) will grow to 18px at 1280px screen.
Above 1280px screens it will stay at 18px.

Creating the whole root for CSS

:root {
  --global-font-size-8: clamp(36.66px, calc(47.12 / 1280 * 100vw), 47.12px);
  --global-font-size-7: clamp(28.81px, calc(37.05 / 1280 * 100vw), 37.05px);
  --global-font-size-6: clamp(22.65px, calc(29.15 / 1280 * 100vw), 29.15px);
  --global-font-size-5: clamp(17.8px, calc(22.9 / 1280 * 100vw), 22.9px);
  --global-font-size-4: clamp(15.8px, calc(20.29 / 1280 * 100vw), 20.29px);
  --global-font-size-3: clamp(14px, calc(18 / 1280 * 100vw), 18px);
  --global-font-size-2: clamp(12.4, calc(22.9 / 1280 * 100vw), 15.95px);
  --global-font-size-1: clamp(11px, calc(18 / 1280 * 100vw), 14.15px);
}

Create font sizes of headings and paragraph

h1, .h1 {font-size: var(--global-font-size-8);}
h2, .h2 {font-size: var(--global-font-size-6);}
h3, .h3 {font-size: var(--global-font-size-4);}
h4, .h4 {font-size: var(--global-font-size-3);}
p {font-size: var(--global-font-size-3);}
p.klein {font-size: var(--global-font-size-2);}
p.mini {font-size: var(--global-font-size-1);}

80 em x 16px = 1280px

1280/18=

:root {
  --global-h1-size: clamp(
    3em, 
    calc(9 / 80 * 100vw), 
    9em
  );
}h1,
.h1 {
  font-size: var(--global-h1-size);
}

Links:

https://www.30secondsofcode.org/css/s/fluid-typography

https://medium.com/@wayanwina189/ui-typography-guidelines-ios-android-and-website-font-size-guideline-part-2-abcee14df8cb