Add font size increase / decrease buttons

[sveinbjornpalsson]

Type-x is already the easiest way to use websites to audition fonts and font combinations. It would work even better if you could nudge type size up and down with buttons, and maybe throw in a numeric field for good measure.

I was testing it out by applying some fonts I have active to a few sites. I noticed that when I tried a serif font, like Blanco, it appears a bit smaller than a typical sans, so I wanted to increase font size while leaving line spacing the same, to compensate.

To be clear, this means that if a site font is say 18pt and linespacing at 20pt, the controls would change the font size value and leave the linespacing untouched. My theory is that this is the bare minimum you need, and it steers clear of becoming a css testing thing, and it should not make the interface less intuitive through clutter.

I think that if you could do this, type-x would be a brilliant tool for typographers to audition fonts. Quite simply put, when you can just go to facebook or wikipedia and switch their standard font for the font family that you would like to get a feel for, you get that feel much quicker than you would by just trying it out in your design software, since this makes the whole web your metaphorical type specimen.

Alternatively one font size control and one line height control could be better, but since it's a brilliantly uncluttered interface, I suggest starting with just the font size.

[arrowtype]

Thanks for taking the time to write this – it would definitely be a handy feature!

I would maybe imagine this working as a plus/minus control in each font override, which would control size percentage.

To say the obvious, we can't simply set font size, because it would size everything on the page in that way – defeating the purpose of general overrides, as that simple approach would break the layout.

I've looked into it very briefly, wondering whether there is any CSS that could scale a font up by a relative amount, across all sizes on a page.

Looks like font-size-adjust might be exactly what we need, but ... it's only supported in Firefox:

https://caniuse.com/?search=font-size-adjust

Short of that, I'm slightly unsure how we might approach this. We might have to see whether there is some kind of JavaScript approach that could scale the sizing of each use of the font ... but it seems like that might be pretty slow to do.

A solution that might be hard, and might technically break font licenses: we could scale the font's UPM right in the tool. If we scale that down (e.g. from 1000 to 950), I think that all the coordinates inside it would then scale up relatively. But, then again, this might just break everything, or be really tough to do, or be on sketchy legal grounds, or all of the above. 🤔

@RoelN might have ideas here. But, this is likely something that will have to wait for some stability improvements, first. If we can get through those and then have more time to put in, we could then prioritize this based on effort vs usefulness.

[sveinbjornpalsson]

yeah i was thinking that this would affect the em value somehow, and obviously just whatever tags were specified. But since web typography has lots of different kinds of values I'm sure this is a bit more of a headache than I imagine. But I do hope you give it a shake.