Highlighted

Typesetting and Pixel Density

Engaged ,
Nov 19, 2017

Copy link to clipboard

Copied

Looking for solutions on how to maintain consistent font sizes on devices with different pixel density.

Adding multiple mobile breakpoints is not suitable.

Example:

  • Mobile layout breakpoint size 440px >320px viewed on mobile devices with different pixel densities will result in the device with a high pixel density displaying fonts smaller than a device with a low pixel density
  • 16pt body copy font may appear like 16pt on low a pixel density device
  • 16pt body copy font may appear like 13pt on high a pixel density device

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:

Text_conversion.jpg

Views

417

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Typesetting and Pixel Density

Engaged ,
Nov 19, 2017

Copy link to clipboard

Copied

Looking for solutions on how to maintain consistent font sizes on devices with different pixel density.

Adding multiple mobile breakpoints is not suitable.

Example:

  • Mobile layout breakpoint size 440px >320px viewed on mobile devices with different pixel densities will result in the device with a high pixel density displaying fonts smaller than a device with a low pixel density
  • 16pt body copy font may appear like 16pt on low a pixel density device
  • 16pt body copy font may appear like 13pt on high a pixel density device

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:

Text_conversion.jpg

Views

418

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 19, 2017 0
Most Valuable Participant ,
Nov 19, 2017

Copy link to clipboard

Copied

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.

Mylenium

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Engaged ,
Nov 19, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Adobe Community Professional ,
Nov 19, 2017

Copy link to clipboard

Copied

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?

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
LEGEND ,
Nov 20, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0
Engaged ,
Nov 20, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0
Engaged ,
Nov 20, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0
Adobe Community Professional ,
Nov 20, 2017

Copy link to clipboard

Copied

But of course we talk about web safe fonts, don`t we?

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0
LEGEND ,
Nov 20, 2017

Copy link to clipboard

Copied

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:

Text_conversion.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0