From 57129db55051b006775dbb31d82dacd0f7def0c6 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Tue, 24 Feb 2026 12:18:12 -0600 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Update=20font=20sizes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/base/typography.css | 48 ++++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/styles/base/typography.css b/styles/base/typography.css index 7e61618..1a32ad6 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -19,6 +19,24 @@ * text-60px: 30px-80px, default: 60px * text-70px: 30px-76px, default: 70px * text-75px: 32px-80px, default: 75px + * + * Font sizes at standard viewport widths: + * | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px + * |-------|-------|-------|--------|--------|--------|------- + * text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00 + * text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00 + * text-18px | 14.00 | 14.72 | 15.05 | 15.70 | 16.36 | 16.77 | 18.00 + * text-20px | 16.00 | 16.72 | 17.05 | 17.70 | 18.36 | 18.77 | 20.00 + * text-22px | 17.60 | 18.36 | 18.75 | 19.47 | 20.19 | 20.65 | 22.00 + * text-25px | 18.00 | 19.26 | 19.83 | 20.98 | 22.13 | 22.85 | 25.00 + * text-30px | 18.96 | 20.89 | 21.85 | 23.66 | 25.47 | 26.60 | 30.00 + * text-35px | 20.00 | 22.69 | 23.92 | 26.38 | 28.85 | 30.38 | 35.00 + * text-38px | 22.40 | 24.85 | 26.48 | 29.04 | 31.60 | 33.20 | 38.00 + * text-40px | 24.00 | 26.87 | 28.18 | 30.81 | 33.44 | 35.08 | 40.00 + * text-45px | 25.60 | 29.22 | 30.67 | 33.86 | 37.04 | 39.03 | 45.00 + * text-50px | 27.20 | 31.58 | 33.16 | 36.90 | 40.65 | 42.98 | 50.00 + * text-70px | 30.40 | 37.01 | 40.76 | 47.26 | 53.75 | 57.82 | 70.00 + * text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00 */ @theme { @@ -26,20 +44,20 @@ --line-height: 1.6; --text-base: 1rem; - --text-14px: clamp(0.75rem, 0.7292vw, 1.7rem); - --text-16px: clamp(0.875rem, 0.8333vw, 1.8rem); - --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem); - --text-20px: clamp(1rem, 1.0417vw, 2rem); - --text-22px: clamp(1.1rem, 1.15vw, 2.1rem); - --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem); - --text-30px: clamp(1.185rem, 1.5625vw, 2.35rem); - --text-35px: clamp(1.25rem, 1.8229vw, 2.5rem); - --text-38px: clamp(1.4rem, 1.9791vw, 3rem); - --text-40px: clamp(1.5rem, 2.0834vw, 3.5rem); - --text-45px: clamp(1.6rem, 2.3438vw, 4rem); - --text-50px: clamp(1.7rem, 2.6042vw, 4.5rem); - --text-70px: clamp(1.9rem, 3.6458vw, 4.8rem); - --text-75px: clamp(2rem, 3.9063vw, 5rem); +--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem); +--text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem); +--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem); +--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem); +--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem); +--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem); +--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem); +--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem); +--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem); +--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem); +--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem); +--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem); +--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem); +--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem); --h1: calc(var(--text-base) * 2.25); --h2: calc(var(--text-base) * 1.75); @@ -141,7 +159,7 @@ pre code { } code { - @apply bg-black/30 px-[3px] py-[2px] font-mono text-black text-xs rounded-sm; + @apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm; } hr {