Strapi Series, Part 8: Font Sizes and Colors
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:
| base | sm | md | |
|---|---|---|---|
| a | 1.125rem | 1rem | |
| h1 | 3rem | 4.5rem | |
| p | 1.125rem | ||
| p | 1rem | ||
| a | 0.875rem | ||
| p | 1rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| p | 1.125rem | ||
| h3 | 1.125rem | ||
| p | 1rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| h3 | 0.875rem | ||
| p | 1.25rem | ||
| p | 0.875rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| p | 1.125rem | ||
| a | 0.875rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| p | 1.125rem | ||
| blockquote | 1.125rem | ||
| figcaption | 1rem | ||
| div | 0.875rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| p | 1.125rem | ||
| a | 0.875rem | ||
| p | 3rem | ||
| h3 | 1.125rem | ||
| p | 1rem | ||
| li | 0.875rem | ||
| h2 | 2rem | 2.5rem | 3rem |
| p | 1.125rem | ||
| h3 | 1.125rem | ||
| p | 0.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.
| light | dark | |
|---|---|---|
| bg | white | slate-900 |
| subhead text | slate-700 | slate-400 |
| primary text | slate-700 | slate-200 |
| slider | slate-200 | slate-500 |
| testimonials | slate-50 | slate-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.