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 http://typecast.com/blog/a-more-modern-scale-for-web-typography or http://kdpeterson.net/blog/2011/06/font-size-in-mobile-browsers.html 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: http://walanus.com/share/perceived-font-size-issue/perceived-font-size-issue.jpg To dispel my concerns I've created simple html: http://walanus.com/font4.html, 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: http://walanus.com/font3.html, but results are the same. Thesis 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: http://walanus.com/share/perceived-font-size-issue/perceived-font-size-formula.jpg 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? Assumptions: 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: http://www.japantimes.co.jp/ (more on http://mediaqueri.es/) Pixel densities reference: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Samsung
Hm. I don't know why there are no links visible in my post, they are build properly with BB Code... I'm sorry for that...
For most of your content, dicking around with the font size MANUALLY from the CSS, even in a responsive layout, is ignorant bull. While you might want to shrink down things like headings, for the majority of your flow content if you need to play with the font size, you've made piss poor choices in your font sizes. What you SHOULD be using is called "EM's" -- so that the fonts are dynamically sizing to the users preferences be it in the browser or the OS. That ENTIRE set of calculation nonsense you posted? Pitch that garbage in the trash that's NOT how you go about it. But really if you are dicking around with pixel measurements, you're doing it all wrong! PARTICULARLY for font sizes, but also for layouts elements, media query breakpoints, etc, etc... remember, good layouts should be semi-fluid, elastic AND responsive; and if you don't start out with those first two, you've shot yourself in the foot for the last one. But then, as someone who has a laptop set to 120dpi/125%, a media center set to 144dpi/150%, and a netbook set to 75dpi/80% -- I'm more aware than most of why EM's used properly beats the ever living tar out of pixel fonts, how to design for accessibility, and am always ragging on people for their "inaccessible fixed metric (px) font sizes" Since if I have to dive for the zoom, you didn't do your job as a developer.
Hello, thanks you your response, however you didn't notice, that in fact I use in my html "EM's", not pixels... view-source:http://walanus.com/font4.html EDIT: I'm not a developer, I'm a designer.
That is NOT the page you were linking to before -- though I don't know if the issue you had with getting links in your post was messing with things. What I saw was, well... your home page, the painfully and agonizingly slow loading inaccessible train wreck... with the broken line-heights and "perfect fixed widths" resulting in overlap where you tried to use EM's, accidentally overriding EM's with PX in one spot so certain sections are illegible, and complete lack of responsiveness -- what I fully expect from, well, you said it yourself: Which means you don't know enough about HTML, CSS, accessibility norms or limitations of the medium to be designing a blasted thing. No offense, but that's what trips up most PSD jockeys is they dick around with appearance and design concepts that have NO business on a website in the first place because they don't know enough about implementation or accessibility to realize they "shouldn't be doing things"... Like using EM's inside a fixed-width fixed-height element and not even adjusting the line-heights. Like using paragraphs on quotes or citations without blockquote or CITE and instead relying on classes... Like putting numbered headings inside a list (It's called redundant semantics, and it's as bad as not having any)... like having multiple H1 on a page in anything before HTML 5. (or even after if you care about implementation instead of the ALLEGED specification... and I do mean ALLEGED when it comes to HTML 5). Like serif fonts on a screen target... Though at least unlike MOST PSD Jockeys, it sounds like you're at least trying to learn about things like EM's and delving into the accessibility concepts -- it's a long road, but an important one if you want to be anything more than the typical scam artist "designer".