Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Five minute guide to better typography

pierrickcalvez.com

Post reply on HN
Print view View original

51–60 of 133 posts

Re: Five minute guide to better typography

#51

Post by dragonne »

gkya wrote: post #9

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…

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.

Re: Five minute guide to better typography

#52

Post by sprokolopolis »

twhb wrote: post #34

It's a quest of mine to understand this subject mathematically. I'm convinced that typography is an exact science, it's just easier to use intuition than find the formulae that govern it. Like catching a baseball versus understanding gravity and drag. For example, when aligning that header, they're moving the leftmost pixels into alignment with the body's leftmost pixels. The correct state is well-defined, it's just…

Yes, in the example it looks like they are aligning the vertical stroke of the larger and small letterforms, but this isn't actually always the answer. The goal is to be optically aligned, rather than actually aligned and our brains' optics can really distort things based on size, weight, etc. If you zoom in about 300% you might notice that the larger text is actually still slightly indented, because the weight and size of it artificially occupy more space.

Curves artificially create more space around them in our brains in relation to other letterforms and straight letterforms create less. As an example, type out the word "Highlands" in a very large point size (like 300pt) or in vectors where you can zoom in, in a well designed font. Drop a guideline at the baseline of the letters. You will notice that all of the flat-bottomed letters sit on a baseline and all of the curved strokes drop below the baseline. This makes them optically equal and appear to sit on the same baseline in our minds.

The issue gets more complicated when you start using less geometric-looking fonts with serifs and higher contrast/different weight distributions in the characters. Even typefaces that look very simple and geometric, are still designed with subtle fluctuations in weight to make them feel optically even. Futura is a good example. The "O" character looks like a perfect circle, but if it were, it would look wrong.

There is definitely some science behind all of this, but measuring and testing it seem like it would be very difficult.

Re: Five minute guide to better typography

#54

Post by Aardwolf »

Nice guide, I only personally dislike the blinking animations because they don't allow me to properly stare at it, e.g. the "headless in a bar" example I would really prefer side by side, and the "Bonjour" example I'd really want to see that box all the time to properly be able to see how the lines are (mis)aligned. Fortunately second half of the article had less of those "aargh can't properly see what I want as long as I want" moments. Thanks nonetheless! :)

Re: Five minute guide to better typography

#55

Post by mixmastamyk »

fantispug wrote: post #37
mixmastamyk wrote: post #33

Earlier quoted context omitted.

Latex is too hard for mortals, but I’d suggest Sphinx or one of the markdown alternatives. I think atlassian confluence is another even friendlier alternative, with a price tag.

Tools won't make people care, but they can help produce consistent documents. Atlassian Confluence is a horrible recommendation; it has few tools for typesetting, PDF export is very mediocre and hard to control (there is a plugin that allows you to control pagination), and I once found something that was impossible to produce in its markup (my workaround was to insert a zero-width character and hope no one copied it…

We’re talking about alternatives to ms word for mortals.

Re: Five minute guide to better typography

#56

Post by mixmastamyk »

dragonne wrote: post #51
gkya wrote: post #9

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…

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 diff…

You seem to agreeing?

Re: Five minute guide to better typography

#57

Post by tux1968 »

reilly3000 wrote: post #35
twhb wrote: post #34

It's a quest of mine to understand this subject mathematically. I'm convinced that typography is an exact science, it's just easier to use intuition than find the formulae that govern it. Like catching a baseball versus understanding gravity and drag. For example, when aligning that header, they're moving the leftmost pixels into alignment with the body's leftmost pixels. The correct state is well-defined, it's just…

As far as I know, the people behind thegrid.io have put a lot of thought into constraint-based design, they may have some insight into ‘the rules’.

Your comment prompted me go go take a look at their website. It comes up a single black page with nothing on it other than a red social media button in the bottom right.

Re: Five minute guide to better typography

#59

Post by maddyboo »

dragonne wrote: post #51
gkya wrote: post #9

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…

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 diff…

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.

Re: Five minute guide to better typography

#60

Post by viraptor »

gkya wrote: post #9

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…

What's a dickbar?
Post reply on HN