Looking for solutions on how to maintain consistent font sizes on devices with different pixel density.
Adding multiple mobile breakpoints is not suitable.
There is no universal solution to that. You can muck around after the fact, i.e. after publishing the HTML, by defining a default view size/ page zoom in the CSS to provide a base reference, but that's pretty much it. Even then the text rendering won't be perfectly consistent, though. It's the nature of the thing, though to be perfectly honest, I'm not sure why it's even a concern. On a high DPI device you would most likely simply use the desktop version, anyway, which ultimately is the whole point. "Mobile" layouts make only sense for lower resolution, give or take usability issues with touch screens that may affect high res content.
I'm probably splitting hairs but a recent client experience made we wonder if there was a solution to have such control over typography.
I am referring to mobile phones mostly, tablets second. All analytics I have collated, plus research and observation of users is that if the mobile site is not 'mobile friendly' or easy to use, the bounce rate increases and readership deceases dramatically. Therefore a mobile optimised version is paramount.
May I ask how you created your site, wether it is adaptive or responsive? And to be sure: 320 is no breakpoint but the minimum width of your site? I have seen a lot websites recently with breakpoints at 320.
This will occur from some 3rd party vendors and their templates, I already contacted one of them and they were not aware of this issue.
I read about "em" for font sizing and realize that you used just the 1em font size with 16 px so this should be OK so far.
I know Günter Heißenbüttel and invite him kindly to this as a typo guru as well, knowing fonts from Id as well and fonts in muse.
I have in mind that fonts are not really pixel perfect? From browser to browser?
Generally, this should be no real(!) problem – or better: no problem to be solved in Muse.
First, there is a difference between physical pixel and logical pixels. Just look at this http://iosres.com for example.
That means: An element isn’t displayed half the size, if the screen resolution is doubled.
Second, these kind of issues have to be resolved on operating system and/or browser level.
I understand it is not a 'problem' as such.
Just wondering what's out there to address it, if anything.
Motivated totally by a situation with a client previewing a website in progress on a different device to me.
In any case, the client's designer made a poor font choice for mobile body copy font (Mono spaced), and I had to be very particular on how to typeset it. It could have easily been solved if the font was changed.
They designer refused to change the font.
I have 6 different mobile devices to view my websites on, btw.
But of course we talk about web safe fonts, don`t we?
The site is Responsive .
I usually have the Master Page breakpoint for mobile set at around 440px (just enough to make the iPhone 7Plus use the mobile viewport) with the min width default of 320px.
I try to keep my site pages at the same 440px unless it is absolutely necessary to change them - just for ease of use, no other reason.
In addition to fotoroeder’s post:
I you look into the font menu: Are we dealing with a standard font, a web font or a system font?
Or, If you look into Muse’s the „View“ menu: Are the „Rasterized Text Frame Indicators“ switched visible and there is no rasterisation icon show bottom right at the text frames in question: