Now that I have a minimum screen-size to target for my future responsive e-commerce pages, I am now wondering how to handle font-sizes…
Tonight I went to Amazon.com in Chrome using the responsive view in developer tools. I chose an iPhone 5/SE and then an iPhone 6/7 Plus.
To me, it seems like Amazon is using really tiny font (and image sizes), and so that got me to wondering what is the right way to develop for all of this?
On the desktop, I think you are encouraged to use things like 1EM for body text because then it matches the users preferred font-size in their browser, right?
Well, does that same logic apply to mobile, or is there another strategy to use?
I am getting up there in age, and I know that it is harder for me to view tiny type (e.g. 6pt font in a Word document) versus when I was in my 20s!
Attached to this post are some screenshots I took. (Beware that my screenshots my not appear in the actual size by default. I know that when I opened these up, I had to zoom in/out to get them to mimic the actual size of my iPhone. Not sure why that is?!)
I think it would be the same strategy, 1em would be 100% the size set to the parent container and in its defect the device’s default font size. I would not put my hand on the fire for this. There are other people here who know much more about the topic. You can use rem instead, which is relative to the default device or root HTML font size without caring about the container’s font size.
I didn’t follow your response - especially the second link.
In my OP I included two screenshots in an attempt to show how small the font that Amazon uses is at the 320px width. It seems to me that their font-size choice would be too small for a lot of people - especially older with poor eyesight and with disabilities.
So I am asking what is a safe minimum font-size to use for mobile.
Looks perfectly readable in Firefox’s Responsive View
for a Nokia 8110 4G 240x320 device …
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</body>
</html>
Because Amazon.com is a billion dollar company, and so I figure they know a little about e-commerce.
And because I am trying to figure out how to best lay out my product details page for mobile, and so I went to Amazon’s site for some ideas, and in my opinion what they have doesn’t look right. But since I know nothing about mobile, maybe I am the one who is wrong?
Not being someone who uses mobile, I don’t have a proper sense of what people need for a website to be usable/accessible, but even on a computer I can attest that if the text is too small it can make things frustrating.
If anything, I would think that mobile users would want the text to be larger than on a desktop.
I guess an EM is a “relative” font-size whereas PX and PT are “absolute” font-sizes, right?
What is generally considered a “standard” font-size for people to read on a computer?
What about on a mobile device?
Long ago when I was in typing class in junior high, it seems to me that 12pt Courier was the 'standard" font-size that you’d expect to see in a book or on a typed piece of paper. (Or maybe it was 10pt?)
Not sure how that translates to electronic screens?
What is typically the default (absolute) font-size on most computers? (Or is that defined by the browser?)
What is typically the default (absolute) font-size on a smart phone?
Do people ever tweak those settings, or is it fair to assume they are set to make things readable if you used a 1em approach?
Have you access to upload and test your site online?
Did you try the link on Google’s Mobile Friendly site? It is free and the reports are comprehensive with links on why and how to make the URL mobile friendly.
I believe that successful sites should satisfy the majority of users. All Amazon web pages may not be perfect but appear to have achieved their objectives. They far outnumber their competitors with perfect pages trying to achieve similar exposure… go with the flow
Thank you for the link - it might be useful down the road. What is done of my website is local on my computer, and what I am asking about here is in my head, i.e. I am trying to better understand this and other concepts before I code my next web page so that it will be closer to being mobile-friendly.
[quote=“John_Betong, post:11, topic:343753, full:true”
I believe that successful sites should satisfy the majority of users. All Amazon web pages may not be perfect but appear to have achieved their objectives. They far outnumber their competitors with perfect pages trying to achieve similar exposure… go with the flow
[/quote]
Were you able to download my attachments, size them to their proper size, and then form an opinion of how readable they are?
If you have a moment, that would be really helpful. (Or you could just go to that page on Amazon’s site and view the live site in Chrome’s responsive view tool.
The text look very small to me, and even the picture looks too small. And that is what inspired this thread - how small can I make the font-size on mobile before it breaks “best practices”?
Funny thing about that Amazon site, it serves up an diffrrent experiance for mobile. After you emulate in chrome dev tools, refresh the page, you’ll see what I mean. Looks like the classes on the html tag update to match the device your on so some device detection is happening.
About the font sizes, I believe ‘standard’ is 16px. On mobile, I try to keep body copy around the same. I use REMS not EMS because I do want a relative unit of measure AND I don’t want to have to do a bunch of calculations to figure out what 20px calculates to on a nested component.
Here’a a helpful little snipit:
html {
box-sizing: border-box;
font-size: 62.5%;
line-height: 1.5;
}
If you set font size like that on the html, then REM calculations are easy and become:
1.6rem = 16px
2.4rem = 24px
3.8rem = 38px
… you get the point.
I could read the very small text and grateful for “pinch and zoom” if viewed on a mobile.
No doubt Chrome does it’s best to scale mobile pages and curious to know if the JavaScript and CSS are correctly implemented because reducing the browser dimensions has different results.
Unfortunately I was not able to view the site using Chrome.
62.5% based of the default browser font size. I said “standard” with quotes for a reason as MOST browsers have 16px font as the default, but you’ll see in a second, even the ones that aren’t fall in line with this.
REMS are based on the root font size, Ems on the parent. So … lets say for example you haven’t touched the html, body font size and have just started at baseline. You create a div and want all the text inside to be 20px. With EMs you set the div font size to 1.25em (which equals 20px). Now, inside this div you have an anchor tag you want to be 16px. 1em right??? Nope, 1em is now retaliative to the font size of the div it’s inside of so you would have to calculate the em for 16px with the parent being 20px(0.8em).
Now if you take the whole thing and calculate in rem (technically you would only have to set the anchor tag to rem but, do a developer a solid and don’t mix/match units), it becomes 1rem which will be 16 as its relative to the root (in this case since we haven’t changed anything regarding browser default), not the parent div.
As for the why to set it to 62.5%. Just makes life easier. If a designer says " I need that to be 23px", I INSTANTLY know setting that element to font size 2.3rem is going to equal 23px. As for the odd ducks that don’t have 16px as there default… Lets do the mathz using “some odd browser” that just happens to have 32 as its default font size:
62.5% of 32 is 20
1.6 rem of 20 is … yup…32
So no in the major browsers I have a way of quickly giving a font size that is still relative to what ever the browser default is without having to calculate just what the hell 37px with a relative of 16px default is. Try it, its life changing.
If the “standard” default browser font-size is 16px, then 62.5% of that would be (16px * 5/8 = 10px).
So why are you always starting off with 10px font as your root?
Yes, I can see the benefit of that.
But what happens if the user’s default browser font is set to some extreme value like 36px or 10px?
What about forcing a default root font of 16px and then using REM on everything from there, and if that is too small or big for the user, can’t they just use ctrl + or ctrl - to scale everything up or down?
I think one counter argument to using REM is that if you have some web component (e.g. search box, registration form, shopping cart) structure where you want the sub-component fonts to remain proportional within that web component, then REMs would require a lot more work if you end up scaling said web component.
I guess it depends on if you think you are more likely to scale web components (i.e. use EMs) or if you expect any scaling to occur website wide (i.e. use REMs).
For most cases, I can see where REMs maybe make more sense.
Presumably the user’s default browser font-size is what they want it to be, whether that be 16px, 10px, 32px or whatever. So that being said, why wouldn’t you set your root font to be 100%?
Hi, use text that’s big enough to read on smaller screens. Make sure your page’s links and buttons aren’t too small and - or too close to be easily clicked on a mobile device. The average fingertip area is 48 pixels in width and height. The average width of the index finger for most adults translates to about 45-57 pixels.
