I’m Sick of Tiny, Tiny Type(jxnblk.tumblr.com)
jxnblk.tumblr.com
I’m Sick of Tiny, Tiny Type
http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-tiny-tiny-type
53 comments
I think this happened because people started copy/pasting the following meta tag in to their HTML, thinking they were adding better support for mobile safari, and not fully understanding what it does.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
While it is inexcusable to do this as a web developer, there is a layout bug in Mobile Safari to which this is the easiest and sometimes only solution. The designers aren't disabling zooming because they hate people who zoom, just because they're inconsiderate of them.
What is more annoying is that using an Android device, which doesn't have this bug, you suddenly can't zoom either. Now that this is fixed in iOS, it will take a long while for sites to re-enable it. It's very unfortunate that web developers needed to disable features on all platforms to work around a bug in one.
What's the layout bug?
http://webdesignerwall.com/tutorials/iphone-safari-viewport-...
Essentially, when you rotate the device to landscape, it doesn't correctly reset your view the content, so you end up zoomed in.
Essentially, when you rotate the device to landscape, it doesn't correctly reset your view the content, so you end up zoomed in.
It's fixed is iOS6 but here is an additional js fix for this bug: https://github.com/scottjehl/iOS-Orientationchange-Fix
From Scott Jehl / Filament Group
From Scott Jehl / Filament Group
Thanks. I think I've run into that before (as a user), but just didn't think about it. Seems better to just make the user zoom back out than to disable zooming altogether, in any case.
I don't understand the hatred people level at mobile sites that do not let you zoom when contrasted with the lack of hatred for mobile apps, which almost uniformly do not let you zoom.
Upvoted because this drives me crazy. It's especially bad when I'm viewing links from in-app browsers that don't use the full screen width.
[deleted]
I think my biggest frustration is when there is a pop up designed to go to the center of your screen. This never works properly in a phone browser, making it impossible to either close or even view the pop up. I just give up and don't even try to get the content anymore.
[deleted]
So wrong. And its like - we know better how big letters you can read. You don't. I zoom almost all sites on my iphone, on 13" mac and on my work's 27" imac. Its all the same - I need at least some font increase to read it comfortably, because every time I sit on different distance from the screen. Or I maybe need glasses (although my doctor does not seems to think so).
Agreed, this is why I prefer desktop rendering on my phone, because most 'mobile' sites feel like 2003 blackberry sites. iPhones and other modern smartphones can read read regular html pages fine.
I use a Firefox addon called NoSquint,[1] which lets me set zoom levels globally and per-site. It's one of the most useful Firefox addons I have, and really makes my browsing experience much more pleasant.
I also used to use an addon called Stylish[2] to force a nice CSS style on websites. I've since switched to using a Stylish stylesheet I like directly with Pentadactyl[3], which gives me the same effect of using Stylish but without needing an extra addon (since I'm using Pentadactyl for its other features anyway).
Using the above combination standardizes the look of virtually every website I go to and makes it a pleasant experience for me, where both the font sizes, font colors, and background colors are all quite pleasant and readable.
Unfortunately, this does mean I don't get to see occasionally pleasant original website designs, but it's a sacrifice I'm more than happy to make for a painless websurfing experience.
[1] - https://addons.mozilla.org/en-us/firefox/addon/nosquint/
[2] - https://addons.mozilla.org/en-US/firefox/addon/stylish/
[3] - https://addons.mozilla.org/en-Us/firefox/addon/pentadactyl/
I also used to use an addon called Stylish[2] to force a nice CSS style on websites. I've since switched to using a Stylish stylesheet I like directly with Pentadactyl[3], which gives me the same effect of using Stylish but without needing an extra addon (since I'm using Pentadactyl for its other features anyway).
Using the above combination standardizes the look of virtually every website I go to and makes it a pleasant experience for me, where both the font sizes, font colors, and background colors are all quite pleasant and readable.
Unfortunately, this does mean I don't get to see occasionally pleasant original website designs, but it's a sacrifice I'm more than happy to make for a painless websurfing experience.
[1] - https://addons.mozilla.org/en-us/firefox/addon/nosquint/
[2] - https://addons.mozilla.org/en-US/firefox/addon/stylish/
[3] - https://addons.mozilla.org/en-Us/firefox/addon/pentadactyl/
FWIW, Chrome implements this out of the box. Changing zoom on one tab will automatically update for all current and future tabs of the same domain.
A simpler solution would be to set the "Minimum Font Size" setting in Firefox's preferences.
That is indeed simpler, but not nearly as powerful or as flexible.
As far as I know, no default Firefox setting will allow you to impose different font sizes per website. Also, the setting you mention will change only the font size, and not the zoom level as a whole (NoSquint can change either).
Finally, the setting you mention does not affect font colors or background colors, as the Stylish stylesheet does.
As far as I know, no default Firefox setting will allow you to impose different font sizes per website. Also, the setting you mention will change only the font size, and not the zoom level as a whole (NoSquint can change either).
Finally, the setting you mention does not affect font colors or background colors, as the Stylish stylesheet does.
With view > zoom > zoom text only, you are just increasing the font size per site, and it is persistent.
Among other problems, this breaks Google Docs.
It "breaks" some sites but most of them only visually not functionally.
I'm glad I'm not the only one who generally surfs the web at 150% magnification.
I also have decent eye-sight and am 29, so I don't think it's an age related thing.
Anecdotally, I find reading large text to be a lot more comfortable. I don't have to strain my eyes to read.
I also have decent eye-sight and am 29, so I don't think it's an age related thing.
Anecdotally, I find reading large text to be a lot more comfortable. I don't have to strain my eyes to read.
Thank you for saying this. For years I have been slightly ashamed to be browsing at 150%. I occasionally get comments like "what's wrong with your CSS" when my friends are showing me their websites on my computer.
I need "Zoom: 175%" when reading Hacker News comments. My eye-sight is great, but reading larger fonts is much easier.
Same here. 1080p on a 15" laptop. I can't read it (at least without getting profoundly annoyed) if it's anything less than 130%
I'm in the same boat.
This is a great post, at 100% zoom it was perfectly readable. HN by contrast gets zoomed habitually to around 150% on my desktop.
This is a great post, at 100% zoom it was perfectly readable. HN by contrast gets zoomed habitually to around 150% on my desktop.
Same here, 150%. I can't wait for an oculus rift or similar for reading text - text size won't be constrained by screen size anymore.
The vast majority of sites are designed for horrible low resolution devices - 1366x768 or 1024x768.
When viewed on the screens most people here are using, they're unreadable.
I find that 200% zoom works for Full HD screens (and is acceptable, if a little big, at 1680x1050)
When viewed on the screens most people here are using, they're unreadable.
I find that 200% zoom works for Full HD screens (and is acceptable, if a little big, at 1680x1050)
It's this. If you look at the stats on the % of visitors to most web sites, 1280x1024 or 1024x768 (and the non-retina Macbook equivalent) remain the dominant approximate screen sizes, so developers optimize for them on the assumption that things will work ok for folks with bigger screens.
I can remember when we used to optimize for 800x600.
I can remember when we used to optimize for 800x600.
I usually keep my resolution low. 1366x768 is fine for everything I do -- including movies, gaming, and development.
The main reason I do this is to make the default font sizes for programs, websites, and OS's more readable without visual glitches or breaking layouts, as zooming has an unfortunate tendency to do.
The main reason I do this is to make the default font sizes for programs, websites, and OS's more readable without visual glitches or breaking layouts, as zooming has an unfortunate tendency to do.
Interesting. I suppose that this makes some sense, but when I have a 27" 1920x1080 screen three feet from my face, it's still absurd.
I wish web designers would learn a thing or two from the writers of LaTeX.
I wish web designers would learn a thing or two from the writers of LaTeX.
I wish I could get a list of every web developer in the world and mail them a copy of this in a holiday card with a cookie attached.
I'd like to see a report that has the age curve of internet users, a projection of that curve over the next 20 years, and that curve in relation to the average decline of eye sight over time.
My hypothesis is that given the declining birth rates all over the world, most users are going to be older and therefore have worse eyesight than younger folks.
Make your fonts bigger!
I'd like to see a report that has the age curve of internet users, a projection of that curve over the next 20 years, and that curve in relation to the average decline of eye sight over time.
My hypothesis is that given the declining birth rates all over the world, most users are going to be older and therefore have worse eyesight than younger folks.
Make your fonts bigger!
Yeah... I've also noticed some sites for some reason won't let me re-size the text. It may be just a bug in tablet's browser but it's damned annoying.
I have terrible eye-sight at the ripe old age of 21. I've had terrible eye-sight since my age was a single digit.
All I ask of web designers is to consider us as much as they would somebody who has no sight as all.
If I sound pretentious, I invite you to read my reply below.
All I ask of web designers is to consider us as much as they would somebody who has no sight as all.
If I sound pretentious, I invite you to read my reply below.
I have terrible eye-sight
So do I, but even then I prefer text sizes such as seen on HN, I don't like excessive scrolling and lots line spacing, or serifs for that matter. This new trend of websites with huge, fancy fonts is not for me, and it honestly never occured to me there might be more going on than just trading reading speed for pretentiousness; but I can't see through the eyes of others, so I'll just have to continue to make websites how they look best to me.
It's up to me to make sure it's resizable and not too hung up on being presented a specific way, but it's up to the web surfers to configure their browsers accordingly. To me that's kind of the point of HTML, that I can't know and shouldn't care how you read the site. A lot of websites fail real hard in that regard, but increasing their font-sizes won't fix the problem. You should be able to ultimately define how you consume the information... some people disagree, they'd rather make brochures; blame those, blame that mindet, and leave small fonts alone :(
So do I, but even then I prefer text sizes such as seen on HN, I don't like excessive scrolling and lots line spacing, or serifs for that matter. This new trend of websites with huge, fancy fonts is not for me, and it honestly never occured to me there might be more going on than just trading reading speed for pretentiousness; but I can't see through the eyes of others, so I'll just have to continue to make websites how they look best to me.
It's up to me to make sure it's resizable and not too hung up on being presented a specific way, but it's up to the web surfers to configure their browsers accordingly. To me that's kind of the point of HTML, that I can't know and shouldn't care how you read the site. A lot of websites fail real hard in that regard, but increasing their font-sizes won't fix the problem. You should be able to ultimately define how you consume the information... some people disagree, they'd rather make brochures; blame those, blame that mindet, and leave small fonts alone :(
You don't have to make fonts larger, just give me a way of increasing the size without either destroying the website layout or making the site that much more unreadable. I would like more flexibility and less rigidity. More times than not I have been plagued by text hiding behind a side-bar, narrow containers constraining the sections like a straw, and/or the layout breaking completely in the process.
I'd like to see less designers make presumptions about their audience. While ignoring a smaller section of their audience is fine when the "fix" is hundreds of man-hours away and many dollars burned, this situation is completely rectifiable within short time-periods in most cases and little money spent. Being responsive to your audience isn't a slippery-slope into dystopian large-textinship; it's a way to treat all of your visitors without leaving any wanting of a good experience.
I'd like to see less designers make presumptions about their audience. While ignoring a smaller section of their audience is fine when the "fix" is hundreds of man-hours away and many dollars burned, this situation is completely rectifiable within short time-periods in most cases and little money spent. Being responsive to your audience isn't a slippery-slope into dystopian large-textinship; it's a way to treat all of your visitors without leaving any wanting of a good experience.
I would like more flexibility and less rigidity.
I completely agree, and I guess I'm in the clear then... I religiously believed in fluid layouts way before responsive web design and whatnot where even concepts. It's just that I like the default "more tight" than what seems to be the preference of many, reading these posts - but if you're willing to zoom, I'm willing to make that as painless as possible :D
I completely agree, and I guess I'm in the clear then... I religiously believed in fluid layouts way before responsive web design and whatnot where even concepts. It's just that I like the default "more tight" than what seems to be the preference of many, reading these posts - but if you're willing to zoom, I'm willing to make that as painless as possible :D
> but if you're willing to zoom,
:p How about you zoom out? That means you can have normal (huge) text for everyone.
:p How about you zoom out? That means you can have normal (huge) text for everyone.
Because I have glasses the nearly thickness of coke bottle bottoms and no problems with small text, because I didn't wait decades for high-res displays that don't flicker just to throw the resolution away again, and mostly because I don't really look at individual letters as glance across them when reading a normal text with known words, so for me smaller fonts allow scanning larger chunks more quickly, and parsing words and phrases in chunks as well, while moving the eyes back and forth and scrolling a whole lot hinder me from simply absorbing the text. In short, because it's more efficient for me and there are bound to be people for whom it's the same. Because designing for my own actual eyes strikes me as honest or something.
> Make your fonts bigger!
Within a 600px vertical column with 150% line spacing. With gentle contrast. Please.
Or at least test your site on all the big article reformatters.
Within a 600px vertical column with 150% line spacing. With gentle contrast. Please.
Or at least test your site on all the big article reformatters.
Horizontal, right? Or are you thinking of tablet scrolling?
600px? Are you using a 1024x768 monitor from 2000?
Depending on the font size, 600px gets you pretty close to the ideal of 50-75 characters per line: http://baymard.com/blog/line-length-readability
Nope. But I am reading it on a 1280x800 tablet in portrait mode. Or I have two side by side 0n a 2560x1440 monitor (effectively 1280 px wide each). Or even worse, two side by side on a laptop with 1920x1200 (960 px wide each). 600px makes all of the above scenarios doable with reasonable margins and other layout items like a navigation menu and ads.
> 600px? Are you using a 1024x768 monitor from 2000?
Why do you think they call it "newspaper column" and not "newspaper spread"? It's because the best way to read is in a narrow column (1/3 ... 1/2 the width of the screen). Otherwise the eyes need to move horizontally too much and risk losing position.
Why do you think they call it "newspaper column" and not "newspaper spread"? It's because the best way to read is in a narrow column (1/3 ... 1/2 the width of the screen). Otherwise the eyes need to move horizontally too much and risk losing position.
You are aware that we have multi-tasking operating systems today?
While I too dislike small fonts, I'm particularly rageful of web designers that force this on the user using -webkit-text-size-adjust:none; [1]
That bit of CSS will prevent Chrome and Safari from allowing the text to be resized at all.
The Facebook Social Comments plugin is one such occurrence, but I see it all over the web.
[1] http://stackoverflow.com/questions/1831922/how-to-prevent-us...
That bit of CSS will prevent Chrome and Safari from allowing the text to be resized at all.
The Facebook Social Comments plugin is one such occurrence, but I see it all over the web.
[1] http://stackoverflow.com/questions/1831922/how-to-prevent-us...
i didn't even know about this CSS function. It's so stupid, unbelievable.
I can only imagine all those Designers that don't want to get their "stunning" designs getting destroyed.
I can only imagine all those Designers that don't want to get their "stunning" designs getting destroyed.
I suspect (but am too lazy to research) that it's intended for captions on buttons and similar non-content elements. Seems reasonable in that context.
Two comments:
1. I agree that type is typically too small. Even Bootstrap's 14px default, while better than the popular 12px and 11px, is inferior to the browser's default of 16px. Funnily enough, on the website for my new business which I'm polishing off now, I include no text below 16px. The result? It's always readable.
2. I personally have complained of text too large: by default, tumblr seems to have this utterly idiotic notion of treating my 10" Android tablet (with Firefox as the browser) as a mobile browser, applying some extremely strange mathematics and winding up displaying massive text, with a line-height of almost an inch. This results in a page that on my laptop fits in one screen (to be fair, at 16px it'd be a page and a half) taking a couple of dozen screenfuls, with my finger needing to work overtime scrolling. All this in spite of the fact that the laptop's viewport's physical size is less than double that of the tablet's. This article's site is one of an extreme minority that don't break on my tablet. Many WordPress blogs are also tedious; I have come to hate WPTouch. (Admittedly, I don't have a phone, so I don't know exactly how it affects the experience there, but far too many sites on the Internet treat a tablet as a third- or even seventy-ninth-class citizen, actively destroying their site for some reason.)
1. I agree that type is typically too small. Even Bootstrap's 14px default, while better than the popular 12px and 11px, is inferior to the browser's default of 16px. Funnily enough, on the website for my new business which I'm polishing off now, I include no text below 16px. The result? It's always readable.
2. I personally have complained of text too large: by default, tumblr seems to have this utterly idiotic notion of treating my 10" Android tablet (with Firefox as the browser) as a mobile browser, applying some extremely strange mathematics and winding up displaying massive text, with a line-height of almost an inch. This results in a page that on my laptop fits in one screen (to be fair, at 16px it'd be a page and a half) taking a couple of dozen screenfuls, with my finger needing to work overtime scrolling. All this in spite of the fact that the laptop's viewport's physical size is less than double that of the tablet's. This article's site is one of an extreme minority that don't break on my tablet. Many WordPress blogs are also tedious; I have come to hate WPTouch. (Admittedly, I don't have a phone, so I don't know exactly how it affects the experience there, but far too many sites on the Internet treat a tablet as a third- or even seventy-ninth-class citizen, actively destroying their site for some reason.)
Ah! Thanks for mentioning this. I thought the Tumblr massive-font-size thing was just my Galaxy Note.
In a year of using a large-phone / small-tablet, the only site the gets it wrong is Tumblr.
In a year of using a large-phone / small-tablet, the only site the gets it wrong is Tumblr.
People keep talking about px. Mac and Windows use different DPI thus a reasonable size on one will be too small on the other.
Don't set a font size. Set anything that needs to be set relative to that; H1 is 200% bigger etc.
You have no idea what monitors people are using, nor what dpi they have, nor what resolution they're using, nor what fonts are on their machine.
Everyone can scroll. Not everyone can hit ctrl +, or install extensions like readbility, or install client side CSS.
Don't set a font size. Set anything that needs to be set relative to that; H1 is 200% bigger etc.
You have no idea what monitors people are using, nor what dpi they have, nor what resolution they're using, nor what fonts are on their machine.
Everyone can scroll. Not everyone can hit ctrl +, or install extensions like readbility, or install client side CSS.
I'm sick of tiny, tiny type too, but not in my browser....
Rather, almost all modern video games seem to have huge amounts of insanely small type, that's in many cases literally unreadable on my TV because I have a smallish (20") olde-style CRT television with only analogue inputs, not a wall-sized HDTV. The pixels in the characters are blurred into unreadability—even putting my nose 10cm away from the screen and using a magnifying glass, there's text which cannot be deciphered (seriously, I've tried this).
This is particularly bad with CJK text, because it has more fine details, and especially for CJK text translated from English, as they typically don't increase the character size enough to compensate for the differences (I guess they're trying to re-use the same layouts).
I find it hard to believe that even those people who do own wall-sized HDTVs are comfortable reading much of this text, because people generally sit fairly far away from their television. I suppose it's a sign that video game makers are designing for the PC, and then doing a very poor job of adapting for consoles ....
Rather, almost all modern video games seem to have huge amounts of insanely small type, that's in many cases literally unreadable on my TV because I have a smallish (20") olde-style CRT television with only analogue inputs, not a wall-sized HDTV. The pixels in the characters are blurred into unreadability—even putting my nose 10cm away from the screen and using a magnifying glass, there's text which cannot be deciphered (seriously, I've tried this).
This is particularly bad with CJK text, because it has more fine details, and especially for CJK text translated from English, as they typically don't increase the character size enough to compensate for the differences (I guess they're trying to re-use the same layouts).
I find it hard to believe that even those people who do own wall-sized HDTVs are comfortable reading much of this text, because people generally sit fairly far away from their television. I suppose it's a sign that video game makers are designing for the PC, and then doing a very poor job of adapting for consoles ....
Text simply doesn't work very well with SDTV resolutions. You could always use a monitor instead.
Text on an SDTV worked perfectly fine through to the PS2 days and on the Wii. The problem is that nowadays with HD consoles taking the forefront, developers are all targeting HDTV resolutions, leaving SDTV users to deal with the unreadable text size.
Text works fine with SDTV resolutions, if made large enough.
And "large enough" doesn't mean absurdly large either, simply not the insane small sizes they're using. In most cases there really isn't a huge amount of text (we're talking video games here, not novels, here), and there's little apparent justification for the small size other than "hey it looked good on my dev monitor!"
Moreover, it's not just an "SDTV vs. HDTV" issue; as I mentioned, in most cases, the sizes used would be uncomfortable for almost anyone playing with a typical TV setup (where one tends to sit fairly far away from the display), even if their television is capable of resolving it. The sizes used seem pretty clearly intended for people using a typical desktop PC setup, where the monitor is much closer.
And "large enough" doesn't mean absurdly large either, simply not the insane small sizes they're using. In most cases there really isn't a huge amount of text (we're talking video games here, not novels, here), and there's little apparent justification for the small size other than "hey it looked good on my dev monitor!"
Moreover, it's not just an "SDTV vs. HDTV" issue; as I mentioned, in most cases, the sizes used would be uncomfortable for almost anyone playing with a typical TV setup (where one tends to sit fairly far away from the display), even if their television is capable of resolving it. The sizes used seem pretty clearly intended for people using a typical desktop PC setup, where the monitor is much closer.
Put me in the opposite camp: I'm young and nearsighted, which means my close vision is very good. I usually read HN on my iPhone at min zoom, and I find it really frustrating when mobile sites helpfully won't let me zoom out to read more than a paragraph at a time. (In fact, I found hitting ⌘- a few times made this post much more readable.)
Your complaint is really the same: designers are imposing their will over users, in a manner which ultimately negatively affects user experience.
I find myself frustrated in both directions: sites whose default font is too small (and isn't resizable), and those whose default fonts are too large, and non-resizable. To say nothing of color choices which negatively impact readability.
I find myself frustrated in both directions: sites whose default font is too small (and isn't resizable), and those whose default fonts are too large, and non-resizable. To say nothing of color choices which negatively impact readability.
In general, web developers (and the designers commandeering them around) need to stop resetting font sizes on body {} or something similarily silly. The default browser font size should be the base value, and all other fonts should simply be bigger or smaller by some factor. In an ideal world, people would also start using ems instead of pxs for media queries, but alas, we probably won't see that for quite some time.
This ought to be stapled to the forehead of every web designer and programmer (and client!) in the world.
16px is the new minimum. You START there.
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-co...
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-co...
[deleted]
Counterpoint: On a 22", 1680x1050 screen, the text on that website is way too big to be comfortable to read.
I wonder how many comments here are from desktop machines, which ones are notebooks or tablets.
I wonder how many comments here are from desktop machines, which ones are notebooks or tablets.
I'm on a desktop machine. Also using a 22-inch monitor at 1680x1050. I do not maximize my browser window (mybrowserinfo.com tells me my browser dimensions are currently 1112 x 945).
The font size in question looks great to me. I should add I often sit with my head as far as 24 inches away from the monitor.
The font size in question looks great to me. I should add I often sit with my head as far as 24 inches away from the monitor.
Also way too big for me on 1920x1200 23" monitors. I think some of it is preference and comfort level, but I think it's a also less efficient to read oversize text unless one's eyesight is poor.
On my 15" retina MBP at 1920x1200 it looks perfect. That said, most people run lower resolutions. I think it would be far too big at anything less than 1920x1200 or on a bigger display. A font size of 20px is too large for most users.
I don't personally find it too big to read, but I will go out on a limb and propose that if the main goal of your site is to provide text content to readers, don't set a font size at all.
Unfortunately I don't know of any way to get a mobile browser to display at a normal size. It seems that both Android and iPhone are configured to use microscopic text as default to guarantee a desktop-like layout.
Unfortunately I don't know of any way to get a mobile browser to display at a normal size. It seems that both Android and iPhone are configured to use microscopic text as default to guarantee a desktop-like layout.
Their default text size isn't that small, it's just that they render pages to a larger surface than then display by default, in order to avoid breaking old sites. This can be avoided by adding the appropriate meta tag to the site, but that has to be done by the developer.
True. But I'm also sick of your giant, giant body font. Fluid layouts are especially bad at this, to the point that I need to resize my browser window every time I load a page, to make the font smaller.
The body font on - for example - this blog is way, way too big for me. My eyes hurt by reading it. I would make it 2px smaller and give it better line-height.
The body font on - for example - this blog is way, way too big for me. My eyes hurt by reading it. I would make it 2px smaller and give it better line-height.
Agreed, and I'm surprised there aren't more of us. I don't advocate for 12px font sizes, but somewhere around 14 is probably correct. 16px is typically absurd. I wasn't even able to finish reading this blog post because it hurt so bad. Maybe if my monitor was another foot back or so, but unfortunately I'm in the common position of a cubicle with limited desktop mobility, so that's not an option.
Really, I find myself just not reading any site with absurdly big font sizes, or absurdly small. Keep designing for that 60 year old market if you want, but you're alienating the younger demographics.
Really, I find myself just not reading any site with absurdly big font sizes, or absurdly small. Keep designing for that 60 year old market if you want, but you're alienating the younger demographics.
Hmm... I though it was about right.
Zoom in.
I find that pretty odd tbh. What size monitor? Do you sit leaning towards the screen or leant back in your chair?
That blog font-size looks great to me. 1600 x 900, laptop, rocking a casual, semi-hunched position.
That blog font-size looks great to me. 1600 x 900, laptop, rocking a casual, semi-hunched position.
The opposite of one man's "tiny-tiny" is another man's "10 lines per screen" in humongous "screw-you-,-i-have-a-retina-mbp" designer typeface.
The solution is there, but it's not working. The CSS 'pt' size measure was supposed to address this exact issue, but in reality it doesn't. "Reality" being the most of Windows world that still runs at 96 DPI (dots-per-inch), regardless of whether one has 1080 scan lines on 12" display or 768 - on 20" one. What's twice as unfortunate is that Windows added mainstream support for higher DPIs starting with Vista. So, in theory, if I were to get a high-res laptop, it'd come with a manufacturer's .inf that sets my DPI to 120 if my display is physically small. In practice - na-da. I've seen this done only on selected ThinkPads, but that's it.
The solution is there, but it's not working. The CSS 'pt' size measure was supposed to address this exact issue, but in reality it doesn't. "Reality" being the most of Windows world that still runs at 96 DPI (dots-per-inch), regardless of whether one has 1080 scan lines on 12" display or 768 - on 20" one. What's twice as unfortunate is that Windows added mainstream support for higher DPIs starting with Vista. So, in theory, if I were to get a high-res laptop, it'd come with a manufacturer's .inf that sets my DPI to 120 if my display is physically small. In practice - na-da. I've seen this done only on selected ThinkPads, but that's it.
The real solution here is to base all font size calculations off the default font in the user's browser (which the user can change). If everyone did this, you would be able to enjoy a consistent font size across most sites. It will probably never happen though.
I just wish all sites used something like the CSS3 rem (root ems) unit so we could at least make it a bit easier for the user to have a say in the font size the site uses.
I just wish all sites used something like the CSS3 rem (root ems) unit so we could at least make it a bit easier for the user to have a say in the font size the site uses.
Ohh, thank you so much. I knew of the upcoming viewport-dimension-relative units, but I never heard of rem.. I already use em wherever I can, but that sometimes can get a bit hairy when nesting lots of things, so I often wished something like this existed without realizing it does. Thanks again!
I strongly disagree. Provided you have a properly configured system (correct DPI settings), anything above 14-16 font size is large and anything below 9-10 is small.
You have to code your site for the norm and not for the outliers.
There are times I like to sit back and surf, about 0.75m away from the monitor. In this case I just adjust my browser's zoom level.
You have to code your site for the norm and not for the outliers.
There are times I like to sit back and surf, about 0.75m away from the monitor. In this case I just adjust my browser's zoom level.
This is the point the author seems to be ignoring. Most users don't have high res displays. Your font size should work well for the majority of your users.
I'm curious if any other HN readers set their browser to 110% for this site because I do, I find it a lot more readable.
yes, and HN is especially bad on mobile because the bad antiquated html code prevents mobile browsers from optimizing it a bit.
I sit a good 2m from my screens to avoid headaches, and have HN at around a font size around 14.
Yes! Looking at the sites I frequently visit this site is the worst offender. Me personally browse HN with a zoom of 150%.
At the beginning of my current gig I was a one-person web development shop inside a larger agency. The agency has a team of quite talented print designers who would often be tasked with providing designs for web projects. Every single time I got a design from one of them it would contain impossibly small lorem ipsum. I would make it bigger during implementation, often resulting in comments of me "messing up the design", or having the type look "goofily large".
One of the primary reasons for the small type, I learned, was that they were used to seeing type set on an 8.5"x11" page. If you open up a magazine and hold it as far away from your face as a monitor would be, you'll see some pretty small type. They just wanted the web to work the same way.
One of the primary reasons for the small type, I learned, was that they were used to seeing type set on an 8.5"x11" page. If you open up a magazine and hold it as far away from your face as a monitor would be, you'll see some pretty small type. They just wanted the web to work the same way.
The real problem here is column width--magnifying doesn't help if the column width is screwed, but it seems nobody gets this on the web for some reason. Why, in 2013, don't people understand that really long lines of text are difficult to read?
Its funny that I am currently viewing this page after pressing command + a couple times because this site is guilty of this as well.
I know how you feel. I'm partially sight-impaired. I don't necessarily try for larger text in the OS itself (I'm using OS X at the moment, and the text is "just right"), but on some websites I feel the need to constantly zoom every time I visit.
I'm using HackerNew[1] right now, which gives a larger text layout, but is also a bit more flexible when I zoom in. I hope that helps a bit.
[1]: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...
I'm using HackerNew[1] right now, which gives a larger text layout, but is also a bit more flexible when I zoom in. I hope that helps a bit.
[1]: https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...
I like massive fonts. This blog's font is about the right size.
The other thing I don't like is Helvetica Neue in a very light weight, especially if it's grey on bright white.
Readability and others fix the problem, but it's weird that some designers get this so wrong.
The other thing I don't like is Helvetica Neue in a very light weight, especially if it's grey on bright white.
Readability and others fix the problem, but it's weird that some designers get this so wrong.
While this is completely true and by far the more prevalent problem, I also dislike the other extreme, large fonts on a narrow layout. I don't see why you need a layout (for a desktop) that only manages to put 7 words per line.
I don't get it either. I'd like to hear from a designer on why this ever happens. I used to work with a designer who set h2 to 11px. Boggles my mind. Does tiny type look better? I honestly don't get it.
there are a few reasons I can think of to use tiny type. For one, designers who are used to print might not understand that things should be bigger on the web, because you generally read websites at a further distance. Second, most fonts aren't designed for screens; and thus don't look good at larger sizes. 18pt for a font designed for body copy in print can be jarring sometimes. Lastly, and this might sound silly, but smaller type leaves more room for other stuff. Some people think scrolling is a pain.
“More times than I’ve heard them complain about fonts being too large—wait, I’ve never heard a user complain about that.”
For what it’s worth, several people at my office do complain that they can’t read my display because the text is often too large (~18pt) for their comfort. I don’t have vision problems, but would prefer not to strain my eyes any more than necessary.
For what it’s worth, several people at my office do complain that they can’t read my display because the text is often too large (~18pt) for their comfort. I don’t have vision problems, but would prefer not to strain my eyes any more than necessary.
When I open a print book at the typeface is large, I know I'm either reading a children's book, the elderly version, or something from an author attempting to hide his lack of content.
Certainly I am not the only person who finds large type font hard to read and obnoxious?
If small font is giving you a headache you probably need a better monitor or glasses.
Certainly I am not the only person who finds large type font hard to read and obnoxious?
If small font is giving you a headache you probably need a better monitor or glasses.
Yes to this article. Using small fonts on a website makes too many bad assumptions about the audience.
The problem is that using large fonts on a website makes an equally bad batch of assumptions.
The tiny type thing doesn't seem to be such a problem as it used to be. In fact I often find the reverse problem of sites with type so big that it prevents much information fitting on the screen. The early 2000s where everyone used 8pt verdana seem to be behind us.
I regularly have my zoom set to 150%-200%.
> Sometimes I’m on my computer, and Reader doesn’t work on your web app. I hit CMD + two or three times... then the layout falls apart.
In ML, in Safari, double tap a text column with two fingers. It will zoom the text to fill browser width, just like the double tap with one finger on an iPhone or iPad.
The browser will zoom into that column without changing layout, and then re-render the page to make the text full resolution. Scroll will be lightly tied to the newly zoomed column.
Double tap with two fingers again to zoom back out to full page width.
Still, agree with the premise. Designs should anticipate text size of "content" areas being changed by the user, and the layout should support reflow of arbitrary text size changes without breaking.
In ML, in Safari, double tap a text column with two fingers. It will zoom the text to fill browser width, just like the double tap with one finger on an iPhone or iPad.
The browser will zoom into that column without changing layout, and then re-render the page to make the text full resolution. Scroll will be lightly tied to the newly zoomed column.
Double tap with two fingers again to zoom back out to full page width.
Still, agree with the premise. Designs should anticipate text size of "content" areas being changed by the user, and the layout should support reflow of arbitrary text size changes without breaking.
I use "Readability" in Chrome, "Reader" in Safari Mobile, and "Readability" on AlienBlue for reddit. But the best is when I also use the "Alex" voice on Mac OS to read the text aloud. That's how I read nowadays.
Small fonts on mobile devices are a curse.
Small fonts on mobile devices are a curse.
I read Hacker News with 150% zoom. It's the same thing.
Personal preference ahead.
I love small type. I love dense information. I prefer the dense gmail layout over the "comfortable" one with huge fonts and gaps between text.
I really dislike how text got larger and more spread out in Windows 7 over Windows XP. I dislike how huge the fonts in Ubuntu are out of the box. It makes it nearly impossible to have even 2 apps on a 1920x1080 screen without them overlapping each other.
I love small type. I love dense information. I prefer the dense gmail layout over the "comfortable" one with huge fonts and gaps between text.
I really dislike how text got larger and more spread out in Windows 7 over Windows XP. I dislike how huge the fonts in Ubuntu are out of the box. It makes it nearly impossible to have even 2 apps on a 1920x1080 screen without them overlapping each other.
One of my favorite things about Mac laptops has long been the lower DPI (72 vs 96 for Windows, IIRC). Fonts rendered smaller, and I could fit more of it onto a small laptop screen. But I guess I'm in the minority on this, and MS had it right all along.
Except now people are making more and more sites on Macs, with text that I find overly large whenever I'm on a PC. Sigh.
Except now people are making more and more sites on Macs, with text that I find overly large whenever I'm on a PC. Sigh.
I can only vouch for this. Until I had to get glasses, I didn't mind; I have been zooming in ever since.
16px is a minimum, IMO.
16px is a minimum, IMO.
I refuse to write anything with less than 18px default font size, for this very reason. It's so infuriating when text is small. I have silly old screens and I still can't read your content!
I've read comments in this about differing DPI sizes, so I'll see if I can take that into consideration as well.
I've read comments in this about differing DPI sizes, so I'll see if I can take that into consideration as well.
The underlying problem is that people are still, to this day, treating presentation as more important than data.
Here's an idea: use the absolute bare-minimum of styling and layout, and let me decide via OS and browser preferences what default font faces and styles to use.
Here's an idea: use the absolute bare-minimum of styling and layout, and let me decide via OS and browser preferences what default font faces and styles to use.
I've been convinced that I shouldn't use small font sizes.
Now, re-reading and looking around the further reading section, I can't find the answer to the question this immediately brings up: what font sizes aren't too small?
edit: vbl posted a link that suggests 16px is a good minimum.
Now, re-reading and looking around the further reading section, I can't find the answer to the question this immediately brings up: what font sizes aren't too small?
edit: vbl posted a link that suggests 16px is a good minimum.
I posted this further up, but the ideal font size for main body text is supposedly between 50-75 characters per line. The first reference I found was this one: http://baymard.com/blog/line-length-readability but this is a very common rule of thumb
I actually did a bunch of research a while back on this very topic. I put the best links at the bottom of my resulting blog post. https://explodie.org/writings/researching-longform-styleshee...
Perfect size, font, line height and column width on that post. Kudos!
the ideal font size for main body text is supposedly between 50-75 characters per line [...] this is a very common rule of thumb
There are lots of common “rules of thumb” in typography and graphic design. Unfortunately, a disturbing number of them turn out to be little better than old wives’ tales, with precious little scientific evidence to support them even as well-meaning people repeat them as some sort of objective, absolute standard. As far as I can tell, having looked through a fair bit of research on this over the years, this is one of the most common examples of that phenomenon.
Reasonable studies have come to very different conclusions about which line lengths offer good readability, recommending anywhere from 40 characters or even fewer right up to 100 characters or more. The thing is, those studies usually consider a fairly small number of different line lengths while fixing other layout factors like margin size, text size, leading, and number of columns. However, these other typographical factors are not necessarily consistent from one study to the next, so the results are not directly comparable, nor are conclusions that different line lengths offered the best readability under the specific conditions of each particular study necessarily contradictory. One thing that does seem clear from the relatively few multivariate studies available is that line length is not an independent variable as far as measured readability is concerned. It interacts with those other factors in ways we don’t fully understand yet.
In short, it’s surprisingly unhelpful to propose rules of thumb like “2½ alphabets” or “60 characters” as optimal line lengths, without specifying any context. Those are probably safe choices, in that they have been found to offer good measured readability and to be subjectively pleasing to readers under quite a range of different conditions now. However, that does not mean that they are ideal or optimal and that setting text with a narrower or wider measure would be objectively worse. And if you’re dealing with an audience with more specialised needs, for example the very young or people who have reading difficulties, even those widely suggested rules might turn out to be a bad idea.
Another thing that is clear from the available empirical data is that measured readability is not even close to the same as perceived readability. Readers’ subjective preferences (what they found most comfortable to read) and self-reported performance (what they believe gave the best results in terms of accuracy of retention, reading speed or other objective criteria) may be quite different to their actual, measured performance. Now and then, studies even find a negative correlation: readers actually prefer settings that give measurably worse objective performance. However, it seems much more common that readers express a relatively strong subjective preference for (say) a certain range of line lengths in a study, even though their measured performance didn’t show any significant improvement for those lengths over others that were considered.
TL;DR: While typical guidelines like 60 characters-per-line aren’t absurd and in most conditions would be a reasonable choice, the evidence as a whole shows mixed results, and suggests that while readers may have quite strong subjective preferences, their objective performance doesn’t tend to vary a huge amount until you get to much longer or shorter lines. Describing these mid-length lines as “ideal” or “optimal” is therefore unwarranted.
Amusing irony to finish with: Many of the web-based sources I looked up again while writing this post have terrible line lengths and other typographic settings, blatantly contradicting their own advice. :-)
There are lots of common “rules of thumb” in typography and graphic design. Unfortunately, a disturbing number of them turn out to be little better than old wives’ tales, with precious little scientific evidence to support them even as well-meaning people repeat them as some sort of objective, absolute standard. As far as I can tell, having looked through a fair bit of research on this over the years, this is one of the most common examples of that phenomenon.
Reasonable studies have come to very different conclusions about which line lengths offer good readability, recommending anywhere from 40 characters or even fewer right up to 100 characters or more. The thing is, those studies usually consider a fairly small number of different line lengths while fixing other layout factors like margin size, text size, leading, and number of columns. However, these other typographical factors are not necessarily consistent from one study to the next, so the results are not directly comparable, nor are conclusions that different line lengths offered the best readability under the specific conditions of each particular study necessarily contradictory. One thing that does seem clear from the relatively few multivariate studies available is that line length is not an independent variable as far as measured readability is concerned. It interacts with those other factors in ways we don’t fully understand yet.
In short, it’s surprisingly unhelpful to propose rules of thumb like “2½ alphabets” or “60 characters” as optimal line lengths, without specifying any context. Those are probably safe choices, in that they have been found to offer good measured readability and to be subjectively pleasing to readers under quite a range of different conditions now. However, that does not mean that they are ideal or optimal and that setting text with a narrower or wider measure would be objectively worse. And if you’re dealing with an audience with more specialised needs, for example the very young or people who have reading difficulties, even those widely suggested rules might turn out to be a bad idea.
Another thing that is clear from the available empirical data is that measured readability is not even close to the same as perceived readability. Readers’ subjective preferences (what they found most comfortable to read) and self-reported performance (what they believe gave the best results in terms of accuracy of retention, reading speed or other objective criteria) may be quite different to their actual, measured performance. Now and then, studies even find a negative correlation: readers actually prefer settings that give measurably worse objective performance. However, it seems much more common that readers express a relatively strong subjective preference for (say) a certain range of line lengths in a study, even though their measured performance didn’t show any significant improvement for those lengths over others that were considered.
TL;DR: While typical guidelines like 60 characters-per-line aren’t absurd and in most conditions would be a reasonable choice, the evidence as a whole shows mixed results, and suggests that while readers may have quite strong subjective preferences, their objective performance doesn’t tend to vary a huge amount until you get to much longer or shorter lines. Describing these mid-length lines as “ideal” or “optimal” is therefore unwarranted.
Amusing irony to finish with: Many of the web-based sources I looked up again while writing this post have terrible line lengths and other typographic settings, blatantly contradicting their own advice. :-)
I don't even really mind it, since I can manually adjust the size. What drives me up walls in a murderous rage is when they lock it down with CSS, so my zooming has no impact. I'm all for your site looking however you want, but don't force it on me.
1280x800 13" non-retina MBP here, I prefer 12pt when reading, 10pt when writing code.
I wonder whether http://csslint.net/ would be receptive to the idea of warning against a font-size declaration on html/body which led to smaller-than-16px text?
It was certainly worse back in the day though ;-) Around 1999-2001 there was an annoying Web design fad of 10px or 11px Verdana or Tahoma (when both were relatively new yet widespread due to Windows 98).
I thought it was just me that likes my font to look like Safari's reader at all times. Good thing I know I'm not alone. I designed my blog the same way.
Amen bro. If a site has tiny tiny type, I leave.
My pet peeve is low contrast font colors.
If you think you're cool because you have #ddd font on #fff background, YOU'RE NOT. JUST STOP.
My pet peeve is low contrast font colors.
If you think you're cool because you have #ddd font on #fff background, YOU'RE NOT. JUST STOP.
So like the tiny type and low contrast colors of Hacker News...? Everyone seems to be complaining about other sites but the default font size on Hacker News is difficult to read as well. So much so that I use a custom stylesheet.
HN isn't that bad on it. It's a crappy design, but it's readable.
That being said, I ironically found the font type on this blog website too large and I've reduced it, which is sometimes I really rarely do.
this is really a problem. as developers we really need to take care of this problem. I think we don't need to build everything "responsive" (sure, it's the best solution, but not every budget makes that possible).
If you're not making your site responsive, take care of font sizes. sure, your design will maybe look terrible, but it really helps.
If you're not making your site responsive, take care of font sizes. sure, your design will maybe look terrible, but it really helps.
[deleted]
On this same note, why is the font size on HN so damn small?
Comments here are 9px Verdana.
Let's lead by example, all.
Comments here are 9px Verdana.
Let's lead by example, all.
The answer to your question seems obvious: a larger font would make for poorer information density. I'm always surprised at how the alternative-to-HN websites that people build don't seem to get how important this is. They invariably show fewer posts per page.
Based on your logic, a 1 px font would be the best as it conveys the highest density of information. However, that is wrong.
My comment originally spelled out that there is a tradeoff between information density and readability, but then I deleted that part as obvious. Anyhow, the point is that HN's font sizes, as well as much of the rest of its design, are clearly an attempt to balance those two values.
I'm sick of 6 words per line when I'm using my phone to view websites.
The design for your phone would have different sizes from the design that is used for the web. After all, the distance between your eyes and the device (monitor or phone) are different when each device is being used. That means the font sizes need to change. The recommendation is 50 to 75 character per line (as mentioned in a previous comment here).
50 to 75 characters would be great but most "mobile optimised" websites don't allow for that. The website linked to in the original post is around 20 per line and takes a paragraph of text and stretches it out over several pages of my phones display.
No doubt, and that's a failure of the design, not of the theory of the font size. Don't use bad execution as evidence of a bad idea.
No need to read. You're not missing anything.
I think it's important to know who your audience is. Your design speaks to that and so should your font size.
[deleted]
This is why Android reflows text on double-tap zoom. No more tiny text or zoom-and-pan. (I didn't know until recently that Mobile Safari has no comparable feature)
By the way, downvotes don't change the fact that this is a non-issue on Android and desktop because double-tap zoom puts the content at a comfortable and customizable font size effectively solving this issue and that desktop browsers have the same ability to set minimum font sizes and zoom levels.
edit: Apparently Mobile Safari now has this as well. I don't know if it also allows you to adjust the font size but it just goes to show that there are existing solutions to this subjective problem.
By the way, downvotes don't change the fact that this is a non-issue on Android and desktop because double-tap zoom puts the content at a comfortable and customizable font size effectively solving this issue and that desktop browsers have the same ability to set minimum font sizes and zoom levels.
edit: Apparently Mobile Safari now has this as well. I don't know if it also allows you to adjust the font size but it just goes to show that there are existing solutions to this subjective problem.
You aren't being downvoted for being pro-Android. You're being downvoted for making non-constructive commentary. If you don't have anything to commit to a conversation, remain silent.
Really? A comment pointing out that this problem is solveable using existing features isn't relevant? Surely an angry rant about someone's preferences will force everyone to change their opinions about a subjective matter and is FAR more constructive. I expect all fonts on the Internet to be exactly up to Brent's expectations by next week.
Ironically, the right reply to my post was "this is something that Mobile Safari now does as well" according to this comment. http://news.ycombinator.com/item?id=5193498
Again, existing solutions to a subjective problem. Or an angry rant. Hm. Maybe we'll get lucky and next week we can have a "Fonts are too big" post in typical HN-opinion-volley style.
Ironically, the right reply to my post was "this is something that Mobile Safari now does as well" according to this comment. http://news.ycombinator.com/item?id=5193498
Again, existing solutions to a subjective problem. Or an angry rant. Hm. Maybe we'll get lucky and next week we can have a "Fonts are too big" post in typical HN-opinion-volley style.
Actually Mobile Safari does not do this. It simply has: double tap on an element, and it zooms such that the element's width matches the width of your screen.
No reflowing is done. It may not be of much use; when I do this on HN, it only zooms in by a few percent because the elements already stretch most of the way across the screen. You are taking a magnifying glass to the page when you do this, NOT changing the layout to fit the screen and reflowing all the text.
No reflowing is done. It may not be of much use; when I do this on HN, it only zooms in by a few percent because the elements already stretch most of the way across the screen. You are taking a magnifying glass to the page when you do this, NOT changing the layout to fit the screen and reflowing all the text.
Sadly, this feature has gone away now that I have the latest greatest Nexus phone with Chrome and Jelly Bean.
Why in the world would they get rid of this feature?
Why in the world would they get rid of this feature?
I suspect they got rid of the feature because users don't like it. I found it extremely frustrating.
Instead of manually zooming and constantly having to pan back and forth to read every single line of text? No thanks.
Well WebKit in Chrome already does font resizing on the fly (hence some of the weirdness in HN comments for exmaple). I rarely, rarely find myself manually resizing, zoom or double tap in Chrome for Android.
That's actually true about Hacker News on mobile screens. Yes, you can zoom in, but then you have to scroll left and right to see the text. Extremely annoying.
Yep, the Hacker News default font size is tiny, period. And I find the 'pro-zoomer croud' pretty odd to be honest. It's more work, and it's tedious. You wouldn't pan around a book.
Personally I use the Hacker Web (web-app) on iOS [1] and Georgify Chrome extension [2] on desktop and couldn't be happier.
[1] http://hackerwebapp.com
[2] https://chrome.google.com/webstore/detail/georgify/ofjfdfale...
Personally I use the Hacker Web (web-app) on iOS [1] and Georgify Chrome extension [2] on desktop and couldn't be happier.
[1] http://hackerwebapp.com
[2] https://chrome.google.com/webstore/detail/georgify/ofjfdfale...
[deleted]
I'm also sick of tiny fonts. 14px is way too small.
Surely there's a special ring in Hell for those web anti-designers.