Comment by gkya | Hacker News Reader

Comment by gkya | Hacker News Reader

My humble appendix wrt online typography ("-" means IM-not-so-HO):

- If your font colour is more thant #333 on white, you're being cruel, especially to those who suffer astigmatism.

- Make sure the font colour contrasts the background for prose.

- Except from "fi" and "ffi", avoid ligatures in Latin scripts. They were useful when fonts were forged in metal and typesetting was manual labour. Dots may connect to serifs, but those "st"s and the ilk hurt my eyes.

- Do not use huge fonts. That's illegible on plebeian displays.

- Do not use very narrow or very light serifs for long texts. Looks cool with titles, brand names and logos, but they are really hard on eyes with anything longer than a short sentence.

- Account for when the user disables your fonts. Use defaults for things that are not needed to be stylised for your brand / website identity (i.e. any prose).

- Avoid stuff that obscures the text on your page (dickbars, links to top, etc).

- Repeating this, but can't repeat enough: make sure you understand the difference between brand identity and prose. If you style your prose too much, it'll become hard to read.

- Honour conventions (i.e. links have underlines, use hyphens and en- and em- dashes correctly, etc.)

- Use the space economically, and try to hit a balance between making things stick out, and making things miles apart. IDK how it is right now, but the Deck network's website was one of the best product websites around. Another good example is https://www.mcsweeneys.net/.

Many of theese the user may overcome by using the likes of reading mode in Firefox (that's a life saver), but why would you want the user to just skip away all that styling you worked on for maybe weeks? Just respect how the eyes work when you're putting together a webpage.

I think most of your advice is solid, but I take issue with one point:

> - If your font colour is more thant #333 on white, you're being cruel, especially to those who suffer astigmatism.

A designer should think hard before reducing contrast. You may be improving the experience for one group at the expense of others:

- A low contrast page is difficult to read on a cell phone in daylight.

- A low contrast page is difficult to read at night on a dimmed display.

I don't meant to discount folks for whom high contrast is a problem, but don't they have a simple recourse? Reduce the brightness or contrast of the display. Most monitors and laptops have controls that allow this.

You seem to agreeing?

I read the OP's comment to argue _for_ increased contrast, not against it. Though it isn't fully clear exactly what "more than #333 on white" means.

Colour codes are hexadecimal numbers, 000000 is basically zero, and is for black. FFFFFF is 16777215 and is white. The more the numerical value of the colour the lighter it is, the lower the darker (well, not exactly, but kind of).

Expanding on this a little more, it's actually broken up into hexadecimal pairings (or 8-bit numbers).

00 00 00 = R(0) G(0) B(0) for Red, Green Blue

FF FF FF = R(255) G(255) G(255)

That makes 16,777,216 possible combinations (256^3).

For pure red, that's FF0000; green, #00FF00; blue, #0000FF. Mixing those is how you get intermediary colors: red + green = yellow; red + blue = magenta; green + blue = cyan.

When the colors are referenced as single-digit hex numbers, that value is applied for the pairing. This would make #F00 (red) actually be applied as #FF0000.

Right, but to be pedantic, the OP's original statement was ambiguous.

"more thant[sic] #333 on white"... You could interpret this many ways.

A) You could interpret "#333 on white" to refer to the contrast ratio of "#333/#fff", which according to this calculator [1] is 12.6. In this case "more" is referring to a higher contrast ratio. "#000 on #fff" would fit - even though "#000" is less than "#333" - because the contrast ratio of the two colors is 21.

B) You could interpret the statement as "(more than #333) on #fff", e.g. increasing the numerical value of "#333". Something like "#444 on #fff" - which actually has a lower contrast ratio of 9.7 - fits, because "#444" is more than "#333".

This is dumb, I'm just pointing out that it can be important to be precise with your language.

1: http://leaverou.github.io/contrast-ratio/#%23333-on-%23fff

I'm the OP, and yes, I should've worded that out better.

#666 > #333 And #666 is lighter so less contrast. You’re both saying the same thing.

We actually agree, but I've phrased that one a bit bad. See my other comment downthread. I was going to edit to clarify, but it does not let me anymore. Comments become fixed way quicker these days ain't it?

Ah, I see what you meant. Thanks for clarifying!

What's a dickbar?

Any bar that someone put across your screen as a Dick move that makes it harder to read the text. https://daringfireball.net/2017/06/medium_dickbars

A bar across your screen / webpage containing stuff that's of negative value to the user, like ads or please-share-this buttons. See e.g. this: http://scripting.com/stories/2011/03/06/whatIsADickbar.html. The term was coined by John "Daring Fireball" Gruber.

A clickbar with bad keming. But seriously, it’s any clickbar that is bad for the UX

Reply on news.ycombinator.com