Contemporary font sizing for the concernedly lazy

Destry · 2020-11-27 09:28:48

I was wondering if I could get some perspectives on the old chestnut of font sizing. I just don’t follow these kinds of discussions anymore (I can’t remember when I last read an A List Apart article) and the web is so full of redundant content marketing and seo tracking on any subject of web design that it’s a real drag to wade through it all anymore.

I’m not looking for specs or explanations of what units are. That at least can be filtered out from the marketing pretty easily. I’m just looking for that succinct sweet spot info about how to set a low-overhead website with a good font plan that ticks the expected boxes for today’s laptops and mobile addiction devices.

What I’m attempting to do is set a base ‘size’ of some definition on the html element that targets mobile, of course, then override that as I see fit for children elements, then override any of the above in media queries again (usually just for the html element again) for larger screen sizes.

As it stands now, just when I think I have a scheme working, I come back later and think, crap that’s too small in mobile, and then I spend five weeks trying to tweak all the sizes again and thus forever a time-wasting game. Also relevent, I think, is the serif font I use is smaller than most, so I have to compensate for that too, though I’m never really sure what the best way for that is.

While I’m fairly happy with what I’ve painstakingly established now, I’m about ready to follow the lead of many rebels these days and just use default browser fonts and sizing as small, medium, large, etc.

So, what are people doing to handle a robust sizing scheme?

Also, I sometimes see font sizing set on elements in something that looks like a range. I don’t have an exact example off hand but it incorporates a slash in the value, something like this pattern, I think… p {font-size:size / size;. What does that actually mean and do?

gaekwad · 2020-11-27 09:46:58

This is my take:

Find a prefab CSS framework that has a subjectively good approach to typography
Set up a kitchen sink or boilerplate HTML template using their precompiled CSS
Try it in a browser with various viewport sizes
If you like what you see, pick it apart in their docs

For me, it was Tachyons that reignited interest in type a few years ago, now I’m interested in Tailwind. I liked Zurb Foundation for a while, but it fell by the wayside and although I still have fondness for it, I don’t see myself going back to it for anything apart from legacy sites.

philwareham · 2020-11-27 10:44:09

Not meaning to piss on Tailwind, but I get the feeling that in 3 years the web dev community will be scoffing at the huge amount of classnames you have to apply to elements in order to implement it, and throwing shade on it just like they now do to Bootstrap (which they all loved 4 years ago).

I mean, is this a good step forward – I’m not convinced?…

class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"

philwareham · 2020-11-27 11:10:50

Anyway, that was off-topic 😀; my suggestion would be to not use a framework if you are planning on keeping your site relatively simple.

Rather, for font size, set a baseline of between 16px to 20px (whichever you feel looks right, depending on font choices):

html {
    font-size: 20px;
    line-height: 1.5;
    text-size-adjust: 100%;
}

If you feel that then looks too small on desktop or too large on mobile you can always clamp the baseline so it scales larger depending on viewport width, for example:

html {
    font-size: 20px;
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.5;
    text-size-adjust: 100%;
}

With the second example, in supported browsers, your text will subtly grow from min 16px in narrow viewports through to max 24px in large viewports. The first font-size rule is a fallback for browsers that don’t support clamp() (although you could also fallback to min/max instead but that’s a separate discussion).

Note that although latest Safari (currently v14.0.1 for me) does support clamp(), in my experience it doesn’t seem to scale font size on the fly (you have to refresh the page). Firefox, Edge and Chrome all scale dynamically as you pull your window width in and out. This shouldn’t be a problem though apart form when you are developing the site initially and want to see the scaling as it happens. This may be a Safari bug, I assume.

Then, for your other font sizes (such as headings), ensure they are using rem measurements so they are sized based on the baseline size. For example:

h1 {
    font-size: 3rem;
}

You can also use clamp on these if you want fine-grained control over sizes deepening on viewport width:

h1 {
    font-size: 3rem;
    font-size: clamp(2.25rem, 4vw, 4rem);
}

One of the main benefits of clamp() is that you don’t need to start introducing breakpoints just to scale your text up/down. Hope that helps!

philwareham · 2020-11-27 11:19:49

Destry wrote #327086:

Also, I sometimes see font sizing set on elements in something that looks like a range. I don’t have an exact example off hand but it incorporates a slash in the value, something like this pattern, I think… p {font-size:size / size;. What does that actually mean and do?

Do you mean this shorthand?:

font: 12px / 14px;

If so, then the first value is font-size, second is line-height.

Destry · 2020-11-27 11:52:19

That was exactly what I was looking for, Phil. Thank you. I just want to a quickly knock what I have in shape and not have to worry about it much after that.

jakob · 2020-11-27 12:08:30

That clamp snippet that Phil posted is ‘the new thing’, but also an intelligent way to approach it.

Like Phil says, I’d go for larger nowadays and tailor especially for mobile sites. If you look around, you’ll see some have rather large type on mobile and I find the line length sometimes rather short, especially in German where there’s sometimes only a few words per line. Others, especially news sites with long-form text, have rather small type on mobile. I guess they’re trying to balance page length against readability – smaller type to avoid a humungously long page.

jakob · 2020-11-27 12:12:59

philwareham wrote #327089:

I mean, is this a good step forward – I’m not convinced?…

class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"...

I agree with you, but it has had exceptional take-up in the recent past. I can see there being a case for quick prototyping using such CSS. For larger sites that exist for a while and evolve over time, I’m not sure it’s so good because making layout changes means editing the HTML – potentially at many points in a site – instead of just editing the CSS.

Then again, it depends how much you go back and change or update layout on a site. Small clients tend to redo their homepage only after a long while, and I’ve frequently found the web and browsers have changed so considerably that more significant changes are necessary anyway.

Destry · 2020-11-27 12:29:55

Is there a way to temporarily turn browser cache off? It is really interfering with my ability to edit CSS, and it’s tenacious. I assume that’s the problem. I sometimes have to change the CSS file name and correct the header path just to get the changes to show up. Seriously annoying.

Actually, it changes fine in the browser’s style editor. It seems to be some kind of disconnect between the file on disc edited with TextMate and Txp. I don’t remember this non-updating behaviour being so sticky before.

Last edited by Destry (2020-11-27 12:33:47)

gaekwad · 2020-11-27 12:30:58

Destry – ignore this and listen to the designers!

I misinterpreted the level and type of lazy. I’ll go kick the servers and make them sing more sweetly.

Destry · 2020-11-27 12:34:58

Your input is always appreciated, Pete. Designers don’t know everything.

gaekwad · 2020-11-27 12:36:54

Destry wrote #327096:

Is there a way to temporarily turn browser cache off?

I think I can redeem myself…

For macOS/Safari (if that’s what you’re using…I dunno), open the Web Inspector, Network tab, then look over to the side for this icon:

Toggle on or off for taste.

Textpattern CMS

Textpattern CMS support forum

#1 2020-11-27 09:28:48