{"id":295,"date":"2026-07-24T12:56:11","date_gmt":"2026-07-24T12:56:11","guid":{"rendered":"https:\/\/dev61.commbits.net\/?page_id=295"},"modified":"2026-07-24T19:10:53","modified_gmt":"2026-07-24T19:10:53","slug":"typography","status":"publish","type":"page","link":"https:\/\/dev61.commbits.net\/index.php\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"
\n
\n
\n

Global Typography System<\/p>\n<\/div><\/div>\n\n

Fluid Scale<\/h1><\/div><\/div>\n<\/div>\n\n
\n
\n
\n

System<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Fluid Scale (Responsive \u00b7 CSS Clamp)<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Max<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

base 18px \u00b7 1.33rem<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Min<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

base 15px \u00b7 scale 1.250<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Steps<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

8 (4xl \u00b7 3xl \u00b7 2xl \u00b7 xl \u00b7 l \u00b7 m \u00b7 s \u00b7 xs)<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n
\n
\n
Variable<\/h6><\/div><\/div>\n<\/div>\n\n
\n
Role<\/h6><\/div><\/div>\n<\/div>\n\n
\n
Size<\/h6><\/div><\/div>\n<\/div>\n\n
\n
Sample<\/h6><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-4xl<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 1<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1.802rem, calc(0.047399 * (100vw - 360px) + 28.8325px), 4.7348rem)<\/p>\n<\/div><\/div>\n\n

Min: ~27px \u00b7 Max: ~55px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/h1><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-3xl<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 2<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1.6018rem, calc(0.031518 * (100vw - 360px) + 25.6289px), 3.552rem)<\/p>\n<\/div><\/div>\n\n

Min: ~24px \u00b7 Max: ~44px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/h2><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-2xl<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 3 \u00b7 Blockquote<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)<\/p>\n<\/div><\/div>\n\n

Min: ~21px \u00b7 Max: ~35px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/h3><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-xl<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 4 \u00b7 Subheading<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)<\/p>\n<\/div><\/div>\n\n

Min: ~19px \u00b7 Max: ~28px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/h4><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-l<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 5 \u00b7 Body Large<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)<\/p>\n<\/div><\/div>\n\n

Min: ~17px \u00b7 Max: ~23px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.<\/h5><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

text-m<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Body<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)<\/p>\n<\/div><\/div>\n\n

Min: ~15px \u00b7 Max: ~18px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

text-s<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Body Small \u00b7 Eyebrow \u00b7 Fields<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)<\/p>\n<\/div><\/div>\n\n

Min: ~13.3px \u00b7 Max: ~14.4px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

text-xs<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Heading 6 \u00b7 Caption \u00b7 Button<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)<\/p>\n<\/div><\/div>\n\n

Min: ~11.5px \u00b7 Max: ~11.85px<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

Typography Presets<\/h2><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Headings<\/p>\n<\/div><\/div>\n\n

\n

Heading 1<\/p>\n<\/div><\/div>\n\n

text-4xl:clamp(1.802rem, calc(0.047399 * (100vw - 360px) + 28.8325px), 4.7348rem)<\/p>\n<\/div><\/div>\n\n

Playfair Display \u2022 Regular \u2022 Lineheight:1.25em\u00a0 \u2022 Letter Spacing:-.03em<\/p>\n<\/div><\/div>\n\n

Quiet houses that hold the Marin Light<\/h1><\/div><\/div>\n<\/div>\n\n
\n

Subheading<\/p>\n<\/div><\/div>\n\n

text-xl:clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)<\/p>\n<\/div><\/div>\n\n

Playfair Display \u2022 Regular Italic \u2022 Lineheight:1.25em \u2022 Letter Spacing:-.03em<\/p>\n<\/div><\/div>\n\n

A studio shaping homes with the landscape \u2014 coastal light, redwood, stone.<\/h4><\/div><\/div>\n<\/div>\n\n
\n

Heading 2<\/p>\n<\/div><\/div>\n\n

text-3xl:clamp(1.6018rem, calc(0.031518 * (100vw - 360px) + 25.6289px), 3.552rem)<\/p>\n<\/div><\/div>\n\n

Playfair Display \u2022 Regular \u2022 Lineheight:1.25em \u2022 Letter Spacing:-.03em<\/p>\n<\/div><\/div>\n\n

A studio built for fewer, deeper projects.\n<\/h2><\/div><\/div>\n<\/div>\n\n
\n

Heading 3<\/p>\n<\/div><\/div>\n\n

text-2xl:clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)<\/p>\n<\/div><\/div>\n\n

Playfair Display \u2022 Regular \u2022 Lineheight:1.25em \u2022 Letter Spacing:-.03em<\/p>\n<\/div><\/div>\n\n

Homes that reward slow attention.<\/h3><\/div><\/div>\n<\/div>\n\n
\n

Heading 4<\/p>\n<\/div><\/div>\n\n

text-xl:clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 Lineheight:1.25em<\/p>\n<\/div><\/div>\n\n

Ten families a year, a decade in.<\/h4><\/div><\/div>\n<\/div>\n\n
\n

Heading 5<\/p>\n<\/div><\/div>\n\n

text-l:clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 Lineheight:1.25em<\/p>\n<\/div><\/div>\n\n

Materials, craft, and the long view<\/h5><\/div><\/div>\n<\/div>\n\n
\n

Heading 6<\/p>\n<\/div><\/div>\n\n

text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

Selected work \u00b7 2014 \u2014 2024<\/h6><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n

Body Text & UI Elements<\/p>\n<\/div><\/div>\n\n

\n

Body<\/p>\n<\/div><\/div>\n\n

text-m:clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

Divi began as two friends working on a single barn in Bolinas. Ten years on, we design homes up and down the coast \u2014 but the shape of the work hasn't changed.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Body Small<\/p>\n<\/div><\/div>\n\n

text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

We keep the studio small. We visit the site in every season. We sketch by hand, and then we build a model. A Divi project takes two to four years \u2014 that length isn't an inefficiency, it's the point.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Body Large<\/p>\n<\/div><\/div>\n\n

text-l:clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

A house needs time to answer the site, and we want to be there through every season of it. The studio is led by Asha Okafor and Jonas Pellegrini.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Blockquote<\/p>\n<\/div><\/div>\n\n

text-2xl:clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)<\/p>\n<\/div><\/div>\n\n

Playfair Display \u2022 Regular \u2022 Lineheight:1.25em \u2022 Letter Spacing:-.03em<\/p>\n<\/div><\/div>\n\n

\"A Divi house feels like it has always been there, and will outlast us all.\"\n<\/p><\/blockquote>\n<\/div><\/div>\n<\/div>\n\n

\n

Eyebrow<\/p>\n<\/div><\/div>\n\n

text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

Divi Interiors \u00b7 Residential \u00b7 Est. 2014<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Caption<\/p>\n<\/div><\/div>\n\n

text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

Western elevation at dusk, October 2023. Photography by Mariko Reed. The Long House, Stinson Beach.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Button<\/p>\n<\/div><\/div>\n\n

text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

\n
View the Portfolio<\/a><\/div>\n\n
Begin An Inquiry<\/a><\/div>\n<\/div>\n<\/div>\n\n
\n

Fields<\/p>\n<\/div><\/div>\n\n

Min: ~13.3px \u00b7 Max: ~14.4px<\/p>\n<\/div><\/div>\n\n

text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)<\/p>\n<\/div><\/div>\n\n

Inter \u2022 Regular \u2022 All Caps \u2022 Lineheight:1.65em \u2022 Letter Spacing:.12em<\/p>\n<\/div><\/div>\n\n

<\/span>
<\/div>
\n