@erretres Thanks! I’m familiar with tools like that. When I view my sites with these tools on larger viewports, they look fine to me but I feel like it’s not the same as if I were looking at the sites on a physical monitor.
I think the overall problem is that I’m not understanding how to code font sizes to accommodate all screen sizes and shapes. For instance, when I use the viewport units (
vmax), I get strange results at certain sizes. This makes me think that I have to combine them with media queries in order to get good results. However, I thought those units were created to span across a large spectrum of viewport sizes so media queries wouldn’t be necessary? If media queries are needed, then how do I know I’m hitting all of the important breakpoints?
Also, what are recommended font sizes for varying types of text? Are there any industry standards or best practices for paragraph text font size on 4k monitors or heading text size on 1440px viewports, for instance? Maybe something that says, “When designing for 4k monitors, paragraph text should be no smaller than 24px. If it’s smaller, it’s too difficult for most people to read” or something like that.
Does 16px font size look the same in all viewports? Does it look too big in smaller viewports or too small in larger viewports? There’s a lot of subjectivity in this because everyone prefers different sizes. However, maybe there are standards/research out there to help designers figure things out.
I know some of this is designer preference and what fits with a particular design, but I’m really hoping there’s a good resource out there that goes into more detail about this. So far, the only resources I’ve found are introducing font size units rather than explaining how they’re used in production.
Does this make sense or am I focusing too much on something that’s not a problem?
Thanks for your response and help with this!