Type Scale Generator — Iris Cocreative

High precision mode

Font Sizes

H1 Max Size 6.400rem / 102px

H1 Min Size 2.900rem / 46px

Body Text

Body Max Size 1.185rem / 19px

Body Min Size 1.000rem / 16px

Eyebrow

Eyebrow Max Size 1.155rem / 18px

Eyebrow Min Size 0.800rem / 13px

Size Ratios

Headline Max Ratio 1.414

Subtle Golden

Headline Min Ratio 1.255

Paragraph Ratios

Paragraph Max Ratio 1.246

Paragraph Min Ratio 1.132

Line Heights

H1 Line Height 0.80

Headline LH Factor 0.14

H2 = H1 LH + factor, H3 = H1 LH + factor×2, etc.

Paragraph Line Heights

Body Line Height 1.33

Paragraph LH Factor 0.13

P-LG = Body LH - factor, P-XL = Body LH - factor×2, P-SM = Body LH + factor

Eyebrow Line Height 1.20

Bottom Margins

H1 Margin Bottom 0.33em

Headline MB Factor 0.11em

H2 = H1 MB + factor, H3 = H1 MB + factor×2, etc.

Paragraph Margins

Paragraph Margin Bottom 1.00em

Eyebrow Margin Bottom 1.50em

Fluid Settings

Container Min 320px

Container Max 1440px

Preview Settings

Container Width 1000px

Mobile Desktop Wide

Container Padding

Padding Max 3rem

Padding Min 1rem

Font Family

Preview Colors

Background

#0e0e0e

Text

#fffcfb

Accent

#f59e0b

Preview

Container: 1000px

Dark Light

Scale at 1000px

Webflow Variables

Input Variables

Derived Variables

Clamp Formula

clamp( [Min]rem, ([Min]rem - (([Max]rem - [Min]rem) / ([CMax]px - [CMin]px) * [CMin]px) + (([Max]rem - [Min]rem) / ([CMax]px - [CMin]px)) * 100vw), [Max]rem )

Replace [Min], [Max], [CMin], [CMax] with variable references.