I’ve been looking at various ways to implement responsive (or fluid) typography, but haven’t found a solution that isn’t overly complicated.
I also searched the forum and couldn’t find a recent topic on this, so thought it’d be a good idea to start something so that others can benefit from it.
After hours of watching videos and reading articles, it seems like using VW might be the best way to make typography responsive - but I’d like other people’s opinions.
Using VW, all of your headings and body copy will scale proportionally, but could your text could scale to be too big, or too small?
If so, to avoid this, could you just use VW and set it for each Breakpoint? For example:
Mobile 240-479px - Use VW
Mobile Landscape 480-767 - Use VW
Tablet 768-991 - Use VW
Desktop 992-1279 - Use VW
Hopefully you can see what I’m trying to do here. Its really bugging me, so I’d appreciate your thoughts, advice or ideas.
I don’t think there is a “one size fits all” answer to the question of controlling font sizes. I think different projects need different approaches to controlling font size depending on the overall design goals and exactly what it is the designer/stakeholders want to achieve. I’m sure many designers have a preference for the way they like to do it (and some may feel very strongly about it) but I’m not sure it would be possible to get everyone to agree that one approach is any better than another for every conceivable project that may come along.
I ended up using t.ricks wizardry. Yeah, it was a pain to switch over the site I was almost finished with to use EMs but now that I understand how it works it will make any new site much easier to make responsive.