
Stop Using Small Font Sizes - aranjedeath
http://hn.explodie.org/writings/stop-using-small-font-size.html
======
georgemcbay
I don't mind small font sizes as long as you don't do anything to break zoom
in the browser.

What is killing me a lot more lately is the trend towards extremely low
contrast sites, like white backgrounds with almost-white text. This is
starting to be _everywhere_ recently and it is horrible.

I'm sure that design looks great on your Pantone-calibrated monitor, designer,
but on mine I can barely even see there are words there let alone easily read
them. Supplying a user-defined CSS or constantly highlighting paragraphs is
much more painful than a zooming in with the scroll wheel or a simple gesture.

So I agree with the point the article is making but I think there are
currently bigger fish to fry when it comes to painful design trends on the
web.

~~~
crazygringo
Idea: a browser feature (plugin) just like zoom, only that would up the
contrast on sites (or decrease, too).

It would have to be semi-intelligent to adjust the brightness accordingly (so
it would work both on light-gray-on-white sites and dark-gray-on-black sites),
but having an in-browser contrast control would be _great_.

~~~
epinull
There's a Chrome extension that does something like that:
[https://chrome.google.com/webstore/detail/high-
contrast/djcf...](https://chrome.google.com/webstore/detail/high-
contrast/djcfdncoelnlbldjfhinnjlhdjlikmph)

------
dgunn
It's great to see this on HN where there are literally fonts as low as 7pt
being used...

Everyone keeps saying that it's fine as long as zoom functions correctly. Well
it's also fine to use a font size widely accepted as readable. 7pt? Really?
Why? Because zoom works?

I know a lot of people who read HN that use style bot to increase the font
size. To act like this isn't an issue seems really weird to me. Ctrl+- is
there for people who really need the help seeing. It's _actually_ being used
to make up for bad designers.

~~~
rhizome
And zoom does not function correctly on the default Android browser.

~~~
jay_kyburz
And if I pinch zoom in I can't see the whole line.

~~~
jsnell
First do a pinch zoom, then double-tap to make the text reflow using the new
size.

(Unfortunately not in Chrome for Android, since it's too cool for usability.
Should work on anything using Android's built-in webkit).

~~~
rhizome
For me and my Nexus 4, double-tap re-zooms to the width of the element tapped.

------
crazygringo
On the other hand, don't use font sizes that are too big (I've noticed that on
a number of blogs and startup sites recently).

It might look great on your large iMac screen, but when I read it with an 11"
MBA, it's pretty frustrating to only be able to see a handful of lines of text
at the same time.

Even this blog which is doing the complaining, I wish I could see more of the
text at the same time. Though it's a matter of personal preference, a find its
line-height to be a bit too tall. 1.5em is just too much for body text, in my
opinion -- it's almost like overcompensation, and you rarely see that in the
body text of printed books or magazines. 1.2 or 1.3 can be a lot better.

~~~
aranjedeath
How wide is your screen (in px)? Because the max width of my layout is around
the old 760px standard. You should be able to see everything (even if, as you
say, it's a bit too large).

On the other hand, it's a pretty valid critique. To be honest I forgot that
there are 11 inch screens (or, screens that are larger than phones but smaller
than 17inch desktop monitors). I'm not on any sort of a big screen.

And indeed, my lineheight is 1.618em (golden number in math, heh). I say 1.5
because it's a nice compromise. Perhaps 1.3 or so is better in certain
circumstances.

~~~
crazygringo
Not width I'm talking about (that's fine), it's the height.

It's funny, because screen height _shouldn't_ affect "readability" (other than
making you scroll more often), but with these large-font blogs/sites, they
give me a certain feeling of "claustrophobia" -- that I can't see a couple
paragraphs' worth to come, or can't see the last couple paragraphs I read.

I think it might be that it prevents me from being able to _scan_ content
easily, the way you can on a printed page, where you can quickly skip to the
part you can tell is relevant to you.

~~~
aranjedeath
I'll take that into consideration, thanks for the feedback :)

------
dredmorbius
I'd prefer seeing fonts specified as an offset from the browser's standard
display format, and in ems rather than pixels or points. Body text _must_ be
at the user-specified size.

Contrast is another huge and growing issue. <http://contrastrebellion.com/>

I'm growing increasingly annoyed at sites which offer zero padding between
text and display edges. At least a few pixels offset should be offered, and I
prefer 50-200 for most full-screen displays.

Interstitials, pop-up nags, requests, quizzes, and the like increasingly make
me likely to either close the a tab immediately, or use Firefox's RIP (Remove
It Permanently) plug-in.

Fixed-position elements, especially headers and footers, but also sidebars,
are similarly annoying. With the smaller overall screen resolutions of the
past few years, and wide, short format 10:9 displays, vertical real estate is
especially lacking. Sidebars frequently play poorly with mobile devices.

Most lately, I've found several sites which refuse to scroll vertically while
on my mobile (Android). The Atlantic's mobile site among them, but there are
others. Not a helpful feature.

------
bradwestness
12pt Times New Roman is the standard for publishing, so that's become the go-
to size for a lot of websites. It was plenty big on 800x600 displays, but I
agree that it's generally too small for today's resolutions.

However, the solution isn't to pick a new, slightly larger point size and just
set everything to that, it's to use media queries to set an appropriate size
for whatever medium the content is being displayed in, and to use sizes
relative to the user's default rather than specifying exact point sizes.

You can also use absolute sizes (in and cm in CSS) so that the browser will
display the font at the given size without regard to the display resolution or
DPI.

Edit: Also, I highly recommend Readability, but obviously it'd be preferable
if people just did the right thing to begin with.

~~~
pmb
1pt is a unit of length. One point is 1/72 of an inch. It should be the same
height now that it ever was, even on old monitors.

~~~
Too
Not in CSS, 1pt is always x pixels regardless of how many DPI you have.

~~~
steveax
Nope, it's way more complicated than that. Device pixels, CSS pixels, a pixel
is not a pixel. PPK on the subject:

[http://fronteers.nl/congres/2012/sessions/a-pixel-is-not-
a-p...](http://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-pixel-
peter-paul-koch)

Points are a terrible unit for specifying font sizes for the screen. Use px or
proportional units (em, percentages, etc.). Points are for print, not screen.

------
alecperkins
The idea that small font sizes are acceptable because “users can zoom” is
fucking _ridiculous_ , and I am extremely disappointed to see it suggested
here. That is absolutely the wrong attitude. If a user has to go out of their
way to use your interface, you're _doing it wrong_. No question. Interfaces
should bend over backward for their users, not the other way around. Yes, you
can't satisfy every edge case, but the default attitude must not be “well,
users can just use this workaround”. That thinking is why we have crappy
interfaces. If that's your approach for building interfaces, please _stop
building interfaces_ , for the sake of the user.

------
bcoates
While we're complaining, don't open sites in a new tab just for the hell of
it, especially when they're intended to be something you visit then return to.
I know where the middle button is.

------
simcop2387
This is one of the reasons that I can't leave firefox. It's got a really nice
feature in the Advanced fonts & colors configuration that lets you set a
minimum font size. These days I keep it set to 12pt so that sites can't start
putting 2-3pt fonts on there.

~~~
ANTSANTS
Chromium has this feature as well.

I do miss Firefox's ability to set a different font for pages written in
different languages though, if only for viewing silly SJIS art...

~~~
DanBC
Chrome's version is confusing and applies oddly. (IME, YMMV, etc.)

------
cynwoody
If you use an absolute font size and get it right, fine. If not, I won't read
your site. I'm too lazy to use ⌘-+. Sorry.

(Actually, if your site is _really_ interesting, I might be motivated to write
a user script to fix your fonts and other usability problems. But your site is
unlikely to be _that_ interesting.)

There is no need to specify an absolute font size. Use only relative font
sizes (and be careful about ratios below one).

Also, please favor liquid layouts. Just because my screen is 2560px wide
doesn't mean I want to use it all for your site (actually, just the
opposite!).

~~~
lloeki
> _Just because my screen is 2560px wide doesn't mean I want to use it all for
> your site_

Yet this is what you're telling your browser by maximising the window NSEW,
and the site obeys it, which is good. The point of so much real estate and a
windowing system is not to have it end up empty, unless asked to. I hate it
when sites make undue assumptions and reimplement in-browser window
management. My browser is _not_ my OS.

------
jwr
Also, if you break zooming on my iOS devices, I won't bother to read your
website. I find this an exceptionally stupid thing to do.

That includes the abomination known as Swype (I think) which breaks websites
for iPhone/iPad users presenting them with an interface which does something
different than it appears to, breaks zooming, introduces useless and
unintuitive "pagination" and generally makes users' lives miserable.

~~~
signed0
I don't have an IOS device. What do you mean by broken? Does the font size
stay constant while the page elements get bigger, or does zooming not work at
all?

~~~
nwh
Zooming just does nothing. It's meant for web apps that would be
inconvenienced by accidental zooming, but developers seem to insist on
enabling on everything.

------
jqrd
TL;DR: use vh/vw CSS units in your bookmarklets.

I have a 15" MBP (older than retina, but higher resolution than the default
configuration, 1680x1050) and another laptop with same screen size and even
higher resolution (1920x1200), and most of the time I need to zoom in to
comfortably read text for long periods.

I also have some grips with contrast, so I ended up using a bookmarklet that
increases the text size and improves contrast, based on the Darken bookmarklet
popularized in LifeHacker some time ago.

The interesting change is that since I browse with my browser window maximized
most of the time, I took advantage of the vh CSS (vh = Viewport Height) unit
to find the text size I'm most comfortable with, and then I can use the same
bookmarklet in both computers.

Unfortunately VH/VW is relative to the window size, not screen size, so I
wouldn't recommend using it for websites in general -- although for mobile web
apps it should be a great fit!

The gist of it is:

font-size:2.5vh !important; line-height:4vh !important; background: black !
important; color: #DDD !important; text-shadow: 0 0 black !important;

------
diiiimaaaa
I recommend to check these two articles by Oliver Reichenstein about this
topic, one of them he wrote about 7 years ago

<http://informationarchitects.net/blog/100e2r>

[http://informationarchitects.net/blog/responsive-
typography-...](http://informationarchitects.net/blog/responsive-typography-
the-basics/)

~~~
aranjedeath
Thanks!

------
fallenhitokiri
I agree that there can be problematic sites with too small fonts, a nearly non
existing line height or grey on white background. But to be honest I stopped
caring.

I am normally using Safari (on my Mac and on iOS) and if I visit a site which
is hard to read or if I disagree with the mobile no-zoom responsive decision
because it doesn't work for me I just turn on the "reader mode". Big enough
font size, line height, good contrast, focus on content. What else could I ask
for? (well, beside another font maybe)

I see no reason leaving a site or discussing the design taste of someone as
long as I have a one-button-read-nicely solution available. But if this won't
work (some sites, somehow manage to break it) I'm out.

There are design decisions which look good but are not useable for many
people. I believe most of the time someone is aware of this but decided he
either does not care or that it is okay. Still, some education and discussion
in this field is always good, especially for people just starting.

------
tokenadult
Some of this advice differs from the carefully thought out style advice in the
HTML5 Boilerplate project,

<http://html5boilerplate.com/>

(which, dismayingly, is loading very slowly in Chrome just now, but loading
fine in IE), the basis for my restyling my very old personal website. A line
height of 1.4 is plenty large. The author is fully correct, of course, that it
is best not to specify a font size at all, and especially not to specify a
size that can't be resized at will be any user who happens to visit your site.
Responsive Web design

<http://www.seomoz.org/blog/seo-of-responsive-web-design>

<http://www.abookapart.com/products/responsive-web-design>

is the way to go.

------
CharlesW
Only if you stop using fully-justified text first.

~~~
dgunn
What's wrong with justified text? I prefer reading justified text.

~~~
andyharl
Justified text is fine in printed material when a certain amount of control
can be exercised to make sure that terrible things don't happen.

Browsers are horrible at justifying text.

------
rurounijones
huh, initially I thought "It is not THAT big of a problem" but after reading
his article (easily) then trying to read an article in some of his example
offenders sites...I can see his point.

Consider my eyes opened... (and not squinting.)

~~~
_ZeD_
funnily, the article itself is an "offending site":
[http://tinypic.com/view.php?pic=1g14rd&s=6](http://tinypic.com/view.php?pic=1g14rd&s=6)

~~~
aranjedeath
What sort of browser do you use that doesn't support anti-aliasing of fonts?

------
znowi
Quite otherwise, I dislike the trend of large font sizes with huge line
heights. But is it really an issue today when you can easily zoom in or out to
your preferable size on practically any browser/device?

------
keeperofdakeys
I noticed that if I zoom in, then there is no margin defined on the sides.
This makes it quite hard to read both when zoomed in, or it's in a small
browser window. Defining a minimum margin would fix this.

------
shurcooL
It's a personal preference, not a general direction.

I like small fonts. I like the before pictures better. I bought a 30" monitor
so I can fit more content, more windows there, not to look at huge letters and
whitespace.

------
ibudiallo
You are right simply changing the font size and line height makes a big
difference. I always wondered why my fonts where not feeling right. I went
with so many different fonts but was still not satisfied . My solution was to
just go on the websites I like reading on and open inspector . Crazy how
increasing the margin on your paragraphs can make a difference.

So yes I completely agree with you. However I think you should include before
and after examples on your article to make it complete

~~~
aranjedeath
Yeah. The basic thing I evaluate on most "news" sites is I dive in and set
their font to 16 or 18px and 1.5em line height. I even leave their fonts in
tact, most of the time. It's an instantaneous readability increase.

Thanks for the suggestion, I'll prepare a few side-by-sides.

------
arxanas
I found the Atlantic more readable at the smaller type than the larger type.
Perhaps it's because it's serif, as opposed to the sans-serif in the other two
examples.

------
Legion
Everyone is talking about the font size and how zooming can fix small fonts.

That's only half of the discussion. The other half is line spacing. I think
that's much more important.

In his examples at the bottom, the Phoronix one really gets a big improvement
by not having the lines squished together. If I open up Phoronix in my browser
and add the 1.5em line-height CSS rule, the site becomes considerably more
comfortable to read, without even touching the 12px font size.

------
Suncho
I'm now starting to understand why what I consider to be obscenely large text
has been proliferating through the web in recent years. My assumption has been
that websites should use 12pt sans-serif fonts for standard content. Maybe my
assumptions need to be revised. While it's annoying to me to see websites with
text at 16pt, maybe that's what people want these days and I'll just have to
suck it up and zoom out.

------
kadavy
I redesigned my blog recently[1] and purposely made the type slightly bigger
than intuitively felt comfortable. The funny thing is, plenty of people
complain about it being too big, but nobody complained when it was way too
small.

[1] <http://kadavy.net/blog/posts/reverse-engineering-redesign/>

------
raingrove
Sub-pixel anti-aliasing doesn't seem to work on your site. I find that really
annoying. I am using Google Chrome 25 on OS X 10.8.2.

~~~
aranjedeath
There appears to be a bug!

<http://code.google.com/p/chromium/issues/detail?id=172281>

~~~
raingrove
removing -webkit-font-smoothing: antialiased in the CSS seems to restore
subpixel anti-alising.

~~~
aranjedeath
Thanks, I'll get rid of that.

------
luser001
Hear, hear! :) I'm really happy to see this get to the front page.

But why pixels (px) and not points (pt)?

I made a site using 12pt text and it looks good everywhere (ipad, iphone,
chromebook, linux, windows, mac).

I suspect 16px is going to look too small on a Retina Macbook (I don't own
one, so I wouldn't know).

~~~
mortehu
From the CSS specification:

px: pixel units — 1px is equal to 0.75pt.

[...]

The reference pixel is the visual angle of one pixel on a device with a pixel
density of 96dpi and a distance from the reader of an arm's length. For a
nominal arm's length of 28 inches, the visual angle is therefore about 0.0213
degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm
(1/96 inch).

<http://www.w3.org/TR/CSS21/syndata.html#length-units>

~~~
luser001
Thanks! I didn't know that a CSS px wasn't the same as a screen pixel.

~~~
nathos
Also, on Retina displays, OS X browsers automatically double pixel dimensions.

By default, something declared as 16px is actually rendered as 32px (but
sharper).

------
andyharl
I agree that lots of type is set too small. Trying to create global rules for
design when clearly something like font size needs to be addressed on a case
by case basis depending on what font you are using is not a way to solve the
issue.

------
redegg
People are lazy. They want to see how much text is there for them to read
before having the slightest intent.

Making text bigger makes that decision more difficult. It also creates the
delusion that there is more to read than there actually is.

------
mtitus16
This is literally a rehashing of this:
[http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-
ti...](http://jxnblk.tumblr.com/post/41796724549/im-sick-of-your-tiny-tiny-
type) from 3 weeks ago.

~~~
aranjedeath
Thanks for pointing it out, I didn't see that article.

After having read that article, I'll concede the fundamental argument is the
same. I don't have a smartphone, however. The only place I will ever read
something is on my desktop computer, and that's what I want. Media queries or
"mobile-first design" can be used to solve the issue from both sides of that
complaint.

~~~
john_butts
Your site is barely readable and unzoomable on my phone where I would normally
read a short blog post from an unknown but potentially interesting site. It's
a very real glass house situation.

~~~
aranjedeath
Perhaps it's a failing of your browser? I've set nothing to prevent you from
zooming.

Also, what makes it unreadable? I'm aware that I still have some work to do on
the stylesheet. I don't have a mobile device, a small-ish screen, or a retina
display so my testing of devices is limited. Constructive feedback welcome :)

------
motters
Couldn't agree more. It's a trend which I've also been noticing - i.e. tiny
text or tiny light grey text on a white background. A few CTRL-+'s fix the
problem, but I shouldn't really need to do that in the first place.

------
nXqd
I totally agree but this kind of post makes no sense because they may not
change to do anything about it. I personally use Clearly from Evernote for the
old new site and the content is much easier and joyful to read :)

------
jbondeson
Hilariously, the site is nearly unreadable on my iPhone and two-thirds of the
offending sites have larger font sizes on mobile safari.

Quick someone write a "Stop Using Mobile-Hostile Stylesheets" article.

------
Kiro
Why em in one case and px in another? Why em at all?

------
smoyer
The last month or so, I've taken the author's advice when they start an
article with TL;DR. Thanks for saving me time!

------
tzaman
What about applications? (I'm referring to short text or even words, like form
labels, errors, hints...)

------
gte910h
In almost every case, the bad example was more readable to me.

------
HiFish
german HN pendant <http://hackerbruecke.io/> tried to fix it

------
pinouchon
And stop vertical videos!

------
drivebyacct2
We _just_ went through this like a week or two ago. Yeesh. Every browser I use
has support for text resizing, default text sizes, or zoom levels. Android
WebKit has double-tap and reflow.

I don't see why this is a problem demanding such rants.

Ironically the first thing I did when the page loaded was tap Ctrl+- Ctrl+-.

~~~
joblessjunkie
The browsers I use most -- Safari on iPhone and iPad -- do not allow this. The
only way to increase font size is to zoom the entire page, which often results
in lines that are too wide for the screen.

And a growing number of websites take deliberate steps to prevent any zooming
on the page. I can't understand why any designer thinks this is helpful.

At least iOS Safari has "reader" mode now, which does what I wish most
websites would do: throw away all of the CSS, and render the page as a plain
list of H1's and P's.

~~~
aranjedeath
Yes unfortunately there is a set of meta tags you can use to set things like
default and max zoom level for the page. If they're both at 1.0, you can't
zoom at all. I'm not sure who thought that was a good idea to standardize, but
if I meet them they will not be receiving a beer.

