Strapi Series, Part 8: Font Sizes and Colors

abstract shapes and colors, with letters, postpunk 80s retro --v 5 --ar 3:2

I chose to use a template to minimize the front-end part of the series, but I want to do a bit of auditing of what I’ve chosen. Tailwind will handle classes well, but there will be scenarios where large blocks will have rich text editing. In those, we’ll need some element selectors to apply styles since things will be out of our control. I debated swapping some classes to use clamp in the sections, but I don’t see enough patterns to make it worthwhile. The most common is almost all of the h2 elements have the same pattern. There’s 1 anomaly, which increases by one level at the medium breakpoint. Below, I’m sharing a table of the sizes for my fellow nerds:

basesmmd
a1.125rem1rem
h13rem4.5rem
p1.125rem
p1rem
a0.875rem
p1rem
h22rem2.5rem3rem
p1.125rem
h31.125rem
p1rem
h22rem2.5rem3rem
h30.875rem
p1.25rem
p0.875rem
h22rem2.5rem3rem
p1.125rem
a0.875rem
h22rem2.5rem3rem
p1.125rem
blockquote1.125rem
figcaption1rem
div0.875rem
h22rem2.5rem3rem
p1.125rem
a0.875rem
p3rem
h31.125rem
p1rem
li0.875rem
h22rem2.5rem3rem
p1.125rem
h31.125rem
p0.875rem

For the most part, it follows the trends you see on landing pages lately. There’s a large heading, some smaller headings followed by text slightly larger than the base, sometimes a CTA, and the small heading + large heading + paragraph combo. I won’t bother messing with the classes already coded for me, but this helps clarify sizes for the long-form styles for rich text blocks.

Colors

The page has both dark and light sections, so that gives me a baseline of how to swap things out.

lightdark
bgwhiteslate-900
subhead textslate-700slate-400
primary textslate-700slate-200
sliderslate-200slate-500
testimonialsslate-50slate-700

That’s the plan for now, but final decisions will be made when I create the components. I’ll update the table with any changes, but not the image parts. There’s at least one gradient background that will either just get hidden or replaced.

Series Posts