I’m Sick of Tiny, Tiny Type
jxnblk.tumblr.com
jxnblk.tumblr.com
Surely there's a special ring in Hell for those web anti-designers.
Essentially, when you rotate the device to landscape, it doesn't correctly reset your view the content, so you end up zoomed in.
From Scott Jehl / Filament Group
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
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/
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.
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.
This is a great post, at 100% zoom it was perfectly readable. HN by contrast gets zoomed habitually to around 150% on my desktop.
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)
I wish web designers would learn a thing or two from the writers of LaTeX.
I can remember when we used to optimize for 800x600.
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.
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!
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.
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 :(
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 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
:p How about you zoom out? That means you can have normal (huge) text for everyone.
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.
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.
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 can only imagine all those Designers that don't want to get their "stunning" designs getting destroyed.
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.)
In a year of using a large-phone / small-tablet, the only site the gets it wrong is Tumblr.
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.
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 ....
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.
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.
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-co...
I wonder how many comments here are from desktop machines, which ones are notebooks or tablets.
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.
It's hard to get font to be the same size on windows and os x.
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.
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.
That blog font-size looks great to me. 1600 x 900, laptop, rocking a casual, semi-hunched position.
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.
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.
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.
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.
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.
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...
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.
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.
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.
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.
Small fonts on mobile devices are a curse.
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.
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.
16px is a minimum, IMO.
I've read comments in this about differing DPI sizes, so I'll see if I can take that into consideration as well.
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.
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.
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. :-)
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.
If you're not making your site responsive, take care of font sizes. sure, your design will maybe look terrible, but it really helps.
Comments here are 9px Verdana.
Let's lead by example, all.
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.
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.
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.
Why in the world would they get rid of this feature?
Personally I use the Hacker Web (web-app) on iOS [1] and Georgify Chrome extension [2] on desktop and couldn't be happier.
[2] https://chrome.google.com/webstore/detail/georgify/ofjfdfale...