If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Jun 2014
    Member #

    Question How mobile devices predict size of elements on websites?

    I've started work on some RWD website and I got confused.

    In many articles on font sizes in RWD I could find in Internet [like A More Modern Scale for Web Typography - Typecast or Font Size in Mobile Browsers or other] I see logical statement:

    "For smaller devices you should decrease font size a little bit to obtain similar perceived, legible font size, due to the fact of holding device closer to eyes.".

    Sounds reasonable, but it doesn't work exactly in the way I would expect. I'm not sure if I don't understand something here or don't see some obviousness or maybe I'm right and the problem is real.

    For further reading you may want to follow this post with illustration of problem:

    To dispel my concerns I've created simple html: Size test, but I only got more confused.

    In my example, I've created 3 elements:

    • 3em heading [48px]
    • 48px bitmap square
    • 1em paragraph text [16px]

    I've created also version with non-relative text sizes: Size test, but results are the same.


    Both tablet and smartphone, respectively Samsung Galaxy Tab 10.1 (resolution 768x1024 px, pixel density 149 ppi) and Samsung Galaxy S2 (resolution 480x800 px, pixel density 217 ppi) change sizes of every website element with little consistency.

    Experiment: First step

    I took screenshots from both mobile devices and pasted them to my monitor. It has 94 ppi, I measured it by drawing in Photoshop exactly 1000 px long line, put a ruler on it, it had 10,62 inches, so 1000/10,62 = ~94.

    Screenshots show, that every element on my test website has different size in px, and also different proportions to each other!

    Results are the following.

    On tablet:

    • 48 px bitmap square shrunk to 39 px,
    • 48 px heading to 36 px,
    • 16 px paragraph text increased to 19 px.
    • all proportions between elements have changed!

    On smartphone:

    • 48 px bitmap square shrunk to 23 px,
    • 48 px heading to 25 px,
    • 16 px paragraph text increased to 20 px.
    • all proportions between elements have changed!

    Experiment: Second step

    In second step I scaled tablet and smartphone screenshots to simulate their real-life dimensions. I calculated scale by proportions between pixel densities. For example, I scaled down smartphone screenshot to 43%, because 94/217 = 0,43.

    It fits almost perfectly if I literally put my devices on monitor.

    Experiment: Third step

    In a third step, I took a picture of all three devices screens holding them from the eye thereabouts respectively:

    • monitor: 70 cm
    • tablet: 50 cm
    • smartphone: 35 cm

    Step 3 shows that main statement read in articles mentioned at the beginning of this post is true only in regards to paragraph text. On all devices it has similar perceived font size.

    Bitmap square and heading are much smaller although they keep similar proportion to each other.

    Further calculations: How devices could calculate perceived font sizes?

    Theoretically, in order to achieve exactly the same perceived font size it could be calculated like this, from proportions:

    And it seems to be fairly OK with my experiment. I'll check this with my paragraph text on smartphone. What size it should be to perceive it the same as on desktop monitor?


    Distance eye - monitor is 70 cm.
    Distance eye - smartphone is 35 cm.
    Monitor pixel density is 94 px/inch.
    Smartphone pixel density is 217 px/inch.
    Paragraph font size on monitor is 16 px.

    16 [px] * 35 [cm] / 70 [cm] *217 [px/inch] / 94 [px/inch] = 18,46 px

    Target font size of paragraph text on smartphone should be: ~18,5 px, which is quite accurate. Of course, this font size changes when smartphone or desktop changes distance to the eye.

    Conclusion and final question

    I can imagine mobile device browsers during rendering fonts take into consideration pixel densities of devices and assume some distances from the eye.

    My questions are:

    • why they don't do the same with all rendered elements (in my example bitmap square resize is completely incomprehensible for me)?
    • why they don't render proportions between element properly?
    • how to design RWD then? ;) Is there a way other to design / test / amend / test / amend / test...?

    Additionally, it seems that decreasing font size for smaller devices is not always definitely true. In fact, some websites do increase it. Example: The Japan Times - News on Japan, Business News, Opinion, Sports, Entertainment and More (more on Media Queries)

    Pixel densities reference: List of displays by pixel density - Wikipedia, the free encyclopedia
    Attached Images Attached Images
    Last edited by thiefunny; Jun 03rd, 2014 at 02:39 AM. Reason: Legibility


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Tags for this Thread

All times are GMT -6. The time now is 07:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: