8 Replies Latest reply on Nov 20, 2017 1:20 AM by Günter Heißenbüttel

    Typesetting and Pixel Density

    Christo14 Level 3

      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
        • 1. Re: Typesetting and Pixel Density
          Mylenium Most Valuable Participant

          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

          • 2. Re: Typesetting and Pixel Density
            Christo14 Level 3

            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.

            • 3. Re: Typesetting and Pixel Density
              fotoroeder Adobe Community Professional

              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 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

              • 4. Re: Typesetting and Pixel Density
                Günter Heißenbüttel Adobe Community Professional

                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.

                • 5. Re: Typesetting and Pixel Density
                  Christo14 Level 3

                  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.

                  • 6. Re: Typesetting and Pixel Density
                    Christo14 Level 3

                    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.

                    • 7. Re: Typesetting and Pixel Density
                      fotoroeder Adobe Community Professional

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

                       

                      Uwe

                      • 8. Re: Typesetting and Pixel Density
                        Günter Heißenbüttel Adobe Community Professional

                        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