I’m Sick of Tiny, Tiny Type

http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-tiny-tiny-type

by Jonhoo • 13 years ago

201 142 13 years ago

jxnblk.tumblr.com

geuis2• 13 years ago

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!

flogic3• 13 years ago

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.

Posibyte3• 13 years ago

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.

PavlovsCat4• 13 years ago

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 :(

visarga3• 13 years ago

> 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.

driverdan3• 13 years ago

600px? Are you using a 1024x768 monitor from 2000?

klapinat0r• 13 years ago

Horizontal, right? Or are you thinking of tablet scrolling?

nicoritschel• 13 years ago

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.

runemadsen• 13 years ago

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.

flogic3• 13 years ago

Hmm... I though it was about right.

MaysonL• 13 years ago

Zoom in.

nilliams2• 13 years ago

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.

drharris• 13 years ago

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.

kimmel• 13 years ago

Yes to this article. Using small fonts on a website makes too many bad assumptions about the audience.

huhtenberg• 13 years ago

The problem is that using large fonts on a website makes an equally bad batch of assumptions.

jiggy2011• 13 years ago

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.

flogic3• 13 years ago

I regularly have my zoom set to 150%-200%.

drivebyacct24• 13 years ago

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.

geuis2• 13 years ago

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.

drivebyacct24• 13 years ago

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.

robbrown451• 13 years ago

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?

drivebyacct24• 13 years ago

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.

baddox• 13 years ago

I suspect they got rid of the feature because users don't like it. I found it extremely frustrating.

MatthewPhillips• 13 years ago

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.

rjvin• 13 years ago

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.

bionsuba• 13 years ago

Its funny that I am currently viewing this page after pressing command + a couple times because this site is guilty of this as well.

Posibyte3• 13 years ago

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...

B-Con• 13 years ago

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.

evo_9• 13 years ago

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.

micampe• 13 years ago

yes, and HN is especially bad on mobile because the bad antiquated html code prevents mobile browsers from optimizing it a bit.

zanny2• 13 years ago

I sit a good 2m from my screens to avoid headaches, and have HN at around a font size around 14.

muuck• 13 years ago

Yes! Looking at the sites I frequently visit this site is the worst offender. Me personally browse HN with a zoom of 150%.

vbl• 13 years ago

16px is the new minimum. You START there.

http://www.smashingmagazine.com/2011/10/07/16-pixels-body-co...

joblessjunkie• 13 years ago

And what's up with the growing number of websites which take deliberate pains to prevent me from using pinch-to-zoom on iOS?

Surely there's a special ring in Hell for those web anti-designers.

meej• 13 years ago

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.

neltnerb2• 13 years ago

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.

Ingon• 13 years ago

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).

benaiah3• 13 years ago

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.

mikeash2• 13 years ago

What's the layout bug?

keeperofdakeys• 13 years ago

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.

TechNewb• 13 years ago

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.

jameswyse• 13 years ago

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">

Really you should only consider adding this element if your site is optimised for mobile, either through a responsive design or with a dedicated mobile site, and even then maximum-scale=1 is usually a bad idea.

weareconvo• 13 years ago

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.

Terretta• 13 years ago

> 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.

Jonhoo6• 13 years ago

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.

cylinder714• 13 years ago

This ought to be stapled to the forehead of every web designer and programmer (and client!) in the world.

jvzr• 13 years ago

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.

lee• 13 years ago

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.

bane• 13 years ago

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.

Scene_Cast2• 13 years ago

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.

radicalbyte• 13 years ago

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)

neltnerb2• 13 years ago

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.

tomkarlo• 13 years ago

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.

csense• 13 years ago

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.

flaviojuvenal• 13 years ago

I need "Zoom: 175%" when reading Hacker News comments. My eye-sight is great, but reading larger fonts is much easier.

clicks• 13 years ago

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%

whathappenedto• 13 years ago

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.

DanBC4• 13 years ago

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.

GavinAnderegg• 13 years ago

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.

thedrbrian2• 13 years ago

I'm sick of 6 words per line when I'm using my phone to view websites.

jasonlotito2• 13 years ago

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).

thedrbrian2• 13 years ago

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.

sprobertson• 13 years ago

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.

Jonhoo6• 13 years ago

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

aranjedeath2• 13 years ago

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...

Chris_Newton• 13 years ago

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. :-)

visarga3• 13 years ago

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.

Cushman• 13 years ago

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.)

dredmorbius• 13 years ago

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.

aw3c2• 13 years ago

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.

teach• 13 years ago

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.

yareally• 13 years ago

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.

Jonhoo6• 13 years ago

This sounds like a DPI issue though? If the DPI is set correctly, the same font in the same font size should look the same size on two different screens, no?

DanBC4• 13 years ago

Some machines use 75 dpi, others use 96 (96? 92?) dpi.

It's hard to get font to be the same size on windows and os x.

driverdan3• 13 years ago

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.

kevinpet2• 13 years ago

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.

benaiah3• 13 years ago

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.

abcd_f• 13 years ago

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.

Jonhoo6• 13 years ago

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.

PavlovsCat4• 13 years ago

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!

iwaffles• 13 years ago

I think it's important to know who your audience is. Your design speaks to that and so should your font size.

axelfreeman• 13 years ago

I read Hacker News with 150% zoom. It's the same thing.

evincarofautumn• 13 years ago

“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.

gnosis2• 13 years ago

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/

naner• 13 years ago

A simpler solution would be to set the "Minimum Font Size" setting in Firefox's preferences.

gnosis2• 13 years ago

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.

jellicle• 13 years ago

Among other problems, this breaks Google Docs.

ComputerGuru• 13 years ago

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.

andmarios• 13 years ago

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.

driverdan3• 13 years ago

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.

tater• 13 years ago

1280x800 13" non-retina MBP here, I prefer 12pt when reading, 10pt when writing code.

GIFtheory• 13 years ago

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?

DanBC4• 13 years ago

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.

chrismorgan2• 13 years ago

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.)

sivers• 13 years ago

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.

chrismorgan2• 13 years ago

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?

rorrr• 13 years ago

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.

nilliams2• 13 years ago

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...

eddieroger• 13 years ago

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.

wamatt• 13 years ago

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...

axx3• 13 years ago

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.

kevinpet2• 13 years ago

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.

axx3• 13 years ago

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.

AJ007• 13 years ago

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.

petercooper• 13 years ago

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).

d0m• 13 years ago

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.

readme2• 13 years ago

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.

hadem• 13 years ago

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.

readme2• 13 years ago

HN isn't that bad on it. It's a crappy design, but it's readable.

aranjedeath2• 13 years ago

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.

majormajor• 13 years ago

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.

shurcooL• 13 years ago

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.

snogglethorpe2• 13 years ago

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 ....

illuminate• 13 years ago

Text simply doesn't work very well with SDTV resolutions. You could always use a monitor instead.

Kronopath• 13 years ago

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.

snogglethorpe2• 13 years ago

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.

dmcdougall_• 13 years ago

No need to read. You're not missing anything.

kingnothing2• 13 years ago

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.

gruseom2• 13 years ago

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.

kingnothing2• 13 years ago

Based on your logic, a 1 px font would be the best as it conveys the highest density of information. However, that is wrong.

duncan_bayne• 13 years ago

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.

josephwesley• 13 years ago

I'm also sick of tiny fonts. 14px is way too small.

I’m Sick of Tiny, Tiny Type

Related Stories