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

71–80 of 133 posts

Re: Five minute guide to better typography

#71

Post by crispinb »

cjoy wrote: post #44
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…

Typography is not just concerned with maximising readability. It is subject to aesthetics and taste, which are strongly linked to habit and consensus. Most prolific type designers have at least once toyed with the idea of a mathematically constructed, ideal letter form. The final design is either allowed to offend the human eye or mathematics. I do not know a case where this was not true.

> which are strongly linked to habit and consensus

And hence influenced by culture. Much of typography (the aesthetic appeal aspect) is very clearly culture-bound.

But even the one aspect which might seem to be universal/objective (different things but that's another story), ie. legibility, turns out IIRC to be highly variable. I don't have the references, but I'm pretty sure recent research has shown legibility to be generational. The advantages of serifs has dropped off as later generations have been more exposed to sans serif typefaces. And gothic typefaces were more legible to pre-WWII Germans, etc.

If that's right, the best one could do mathematically would be to model a snapshot of the current cultural state. Perhaps the model could have parameters that could be tweaked as culture changed.

Re: Five minute guide to better typography

#72

Post by [deleted] »

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…

[deleted]

Re: Five minute guide to better typography

#73

Post by crispinb »

anonfunction wrote: post #39
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…

I disagree completely, typography is an artform and therefore completely subjective. I actually preferred the unaligned header example. Sometimes there is a lot of white-space that makes people perceive things to be aligned. Often perfectly aligned text calls for something unaligned to stand out. There may be a scientific approach to finding the best typography to convey information to a specific group of people but…

One of the problems with modelling culture-bound phenomena as 'objective' rule-based systems is that the latter can become normative. If a mathematical model of typography gained hold, eventually someone would point to your 'unaligned header' preference, and demand you relinquish it because the model proved you were wrong.

This is analogous to that famous Sydney J Harris quote:

The real danger is not that computers will begin to think like men, but that men will begin to think like computers

Re: Five minute guide to better typography

#75

Post by alpha_squared »

gkya wrote: post #67
maddyboo wrote: post #59

Earlier quoted context omitted.

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.

Re: Five minute guide to better typography

#76

Post by maddyboo »

gkya wrote: post #67
maddyboo wrote: post #59

Earlier quoted context omitted.

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

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

Re: Five minute guide to better typography

#77

Post by jkraker »

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…

This might be a really interesting read for you in your quest:

By Hand and Eye by George Walker and Jim Tolpin https://lostartpress.com/products/by-hand-eye-1

It's by a couple woodworkers who have been learning about fundamental design principles that used to be used extensively before the introduction of tape measures, calipers and tools that have served to drive design almost entirely into imperial or metric measurement systems. I don't think it can address all of it (e.g. kerning), but some of the things I saw in the guide relate directly (1.2x/1.5x spacing, typeface sized in multiples, etc. I found it fascinating. They have a couple other books about it now too.

Re: Five minute guide to better typography

#78

Post by chipotle_coyote »

supergreg wrote: post #8
hk__2 wrote: post #5

Earlier quoted context omitted.

> I think that's more true for printed stuff than on the screen though. What makes you think that?

Sans-serif seems easier to read on a screen when the font-size is small. Maybe that's just me though.

No, it's not just you. It's been a long-standing "rule of thumb" in typography that serif typefaces are better for longer passages of text (which is why nearly every magazine and book uses serif type for body), but sans serif type tends to be more legible on screen, in part because screen resolution isn't high enough to make serifs look good.

There are always exceptions, of course; Georgia was explicitly designed to be a screen typeface, and there are other serif fonts that look pretty readable once they're at 18px or higher sizes--which is perfectly reasonable as a web font size in today's world, rather than the 13px that everyone seemed to adopt circa 2000. And "high-DPI" displays make even more delicate serif fonts a lot more readable these days.

Personally, I tend to choose serif fonts for body typefaces even on the web nowadays, but tend to keep "UI" elements sans serif.

Re: Five minute guide to better typography

#79

Post by goochtek »

MikusR wrote: post #29
larkeith wrote: post #27

Earlier quoted context omitted.

It's an online free-to-read, donation-supported book on typography. He just linked to the wrong page. Which is described in the page he linked, by the way. Index page link: https://practicaltypography.com/index.html Edit: HN is graylisted by the site, presumably due to large numbers of non-paying referrals.

Your link leads to the same adpage.

Copy and paste the link in to a new browser window and then you will be able to read the book.

Re: Five minute guide to better typography

#80

Post by neoncontrails »

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…

Hope your analysis yields interesting fruit, and that it makes it to a forthcoming front page. My hunch is yours, I've noticed that what I perceive as "pleasing" vertical indent for example can usually be expressed exactly as a continued fraction expansion. Which is a totally straightforward heuristic to implement by hand or programmatically: define a hierarchy of tags, then for each element in the block of priority N multiply the 0th element's height by some fractional constant N times. In practice this seems to work pretty well, there's a lot more features latent in a block of text than just vertical whitespace though and the ideal way to split the prescribed amount of whitespace between margin-top and padding-top attributes isn't obvious to me.
Post reply on HN