4 ms·

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 w

by gkya 9y ago

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

dragonne 9y ago
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.
- mixmastamyk 9y ago
  You seem to agreeing?
- maddyboo 9y ago
  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.
  - gkya 9y ago
    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).
    - alpha_squared 9y ago
      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.
    - maddyboo 9y ago
      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 http://leaverou.github.io/contrast-ratio/#%23333-on-%23fff
viraptor 9y ago
What's a dickbar?
- rflrob 9y ago
  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 https://daringfireball.net/2017/06/medium_dickbars
- gjm11 9y ago
  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 http://scripting.com/stories/2011/03/06/whatIsADickbar.html. The term was coined by John "Daring Fireball" Gruber.
- colejohnson66 9y ago
  A clickbar with bad keming. But seriously, it’s any clickbar that is bad for the UX

by gkya 9y ago

dragonne 9y ago

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.

mixmastamyk 9y ago
You seem to agreeing?
maddyboo 9y ago
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.
- gkya 9y ago
  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).
  - alpha_squared 9y ago
    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.
  - maddyboo 9y ago
    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 http://leaverou.github.io/contrast-ratio/#%23333-on-%23fff

viraptor 9y ago

What's a dickbar?

rflrob 9y ago
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 https://daringfireball.net/2017/06/medium_dickbars
gjm11 9y ago
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 http://scripting.com/stories/2011/03/06/whatIsADickbar.html. The term was coined by John "Daring Fireball" Gruber.
colejohnson66 9y ago
A clickbar with bad keming. But seriously, it’s any clickbar that is bad for the UX