
Five minute guide to better typography - reacharavindh
http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
======
twhb
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 not understood by the program.

More complex, the amount of space under a heading. A heading's bottom is
neither its bottommost pixel (the space between the bottom of an "a" and "g"
is mostly empty), nor its baseline (that space isn't entirely empty); it has a
soft bottom, a fade to emptiness. The ideal spacing is a function not only of
what's being separated and by how much, but also the gradients that border it.

Does anybody know of good resources on this subject? What I find tends to be
more about habit than derivation.

~~~
jtolmar
I agree that typography could be an exact science, but I think starting with
mathematics would be the wrong choice. Rather, it would be better to devise
perceptual experiments and back fit a mathematical model to the results.

The excellent LAB color space was created this way. Scientists used
experiments - for example the MacAdam ellipse to measure what colors are
distinguishable - then backfit a model to that. It involves a bunch of cube
roots and funny constants, not something you'd reach from a standpoint of
mathematical purity. But it works really well.

So if you were looking at rigorously defining typography, I'd look at
quantifying how spread out a pattern of ink needs to be before it looks
smaller (aligning I and L might not be the leftmost pixel). I'd also look at
quantifying some of the gestalt laws of grouping.

~~~
npgatech
Edwin Land also made tremendous contributions to color science through
empirical measurements and finding the deeper "mathematical" models[1].
Besides his scientific achievements, he was a real renaissance man, a tour de
force of human intellect. Unfortunately, Josef Albers's pseudoscience[2] and
artistic non-sense get most of the credit[3] when it comes to color theory.

[1] [https://news.harvard.edu/gazette/story/2016/12/the-story-
of-...](https://news.harvard.edu/gazette/story/2016/12/the-story-of-edwin-
land/) [2]
[http://depts.washington.edu/jrphys/ph214A07/albers.pdf](http://depts.washington.edu/jrphys/ph214A07/albers.pdf)
[3] [https://www.nytimes.com/2016/12/01/arts/design/josef-
alberss...](https://www.nytimes.com/2016/12/01/arts/design/josef-alberss-
science-and-soul-of-seeing.html)

~~~
jacobolus
I don’t think it’s fair to criticize Albers in this context, and this
particular critique seems mostly like pedantic nitpicking at a fairly concise
non-technical book; he wasn’t trying to establish a detailed technical model,
but rather to teach artists to think. ( _“The book does not begin with optics
and physiology of visual perception, nor with any presentation of the physics
of light and wave length…. What counts here—first and last—is not so-called
knowledge of so-called facts, but vision—seeing.”_ )

His book and teaching method are all about learning to work with colors
through direct experience. To that end, he made students do numerous small
projects with colored paper, etc.

(Have you read Albers’s book? I would definitely recommend it, with the
proviso that you actually try to do Albers’s recommended exercises, which are
really the important part of the book, instead of worrying too much about the
text. Reading Albers’s book straight through is like reading a math textbook
straight through without doing the problems.)

If you want to call Itten out for nonsensical babble though, go right ahead.

* * *

Edit: here’s Dorothea Jameson’s response to Alan Lee
[http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.470...](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.470.2468&rep=rep1&type=pdf)

~~~
npgatech
I read Josef Albers' Interaction of Color years ago and I've also bought the
iPad app. I've been disappointed by both.

The problem is that "experiential" teaching without any scientific explanation
is inadequate and misleading. Teaching part is where you explain the students
- _why_. It is perhaps the approach in art colleges where rigorous science
doesn't matter.

The problem stems when Josef Albers made scientific claims which go
unquestioned as the factual basis for his cool color experiments. That is
wrong and that's exactly the kind of nitpicking we need to do. What you call
'Pedantic nitpicking' is necessary and essential to the scientific process.

It is rather misleading to start the book with "The book does not begin with
optics and physiology of visual perception, nor with any presentation of the
physics of light and wavelength…. What counts here—first and last—is not so-
called knowledge of so-called facts, but vision—seeing." and then go on to
explaining his experiments using false claims (which again are highlighted and
detailed in Alan Lee's criticism).

Anyhow, even if I am considering Josef's Interaction of Color from an artistic
standpoint, he simply points out the cool illusions without any follow up on
how to use/implement his concepts. I find it as a casual book that sits on the
coffee table, not on my work desk.

~~~
jacobolus
You’re approaching the book the wrong way. The original came with a big pile
of colored papers. You are supposed to spend dozens of hours over the course
of months doing careful visual study of various arrangements of them. If you
don’t do the exercises in the book you’re not going to get much out of it.

Albers is not dogmatic. His purpose is not to prescribe a particular style or
method. This is not a recipe book. He wants his students to explore deeply and
learn how colors interact by spending a whole lot of time looking at them
carefully, and then develop their own methods and styles.

The book is not supposed to be about “scientific progress”. It’s supposed to
be a pedagogical tool aimed at artists. If you want a technical explanation,
you are looking at the wrong book.

It sounds like you wanted to read a technical color science book. There are
plenty of those out there, pitched at various audiences.

~~~
npgatech
I know what you're saying - I've done a few of his exercises and using the
iPad app makes that very easy to do. Literally, simulates the same experience
of getting the $200 edition with all the color plates. Drag a shape over
another and see the effect.

Color is relative. Got it. What else does it offer?

>> The book is not supposed to be about “scientific progress”. It’s supposed
to be a pedagogical tool aimed at artists. If you want a technical
explanation, you are looking at the wrong book.

I understand and I wish that was the case! However, the popularity of it and
its fame as a text book (see Amazon reviews) combined with his claims of
explaining how brain perceives color - indicates that it is used as THE color
theory reference. I have a problem with that.

~~~
jacobolus
> _indicates that it is used as THE color theory reference_

That’s just not true though. These Amazon reviewers apparently have no idea
what they’re talking about. People looking for color science books, or even
for dogmatic advice about how to make color combinations (most of which is
bullshit, but anyway ...) have many other books to study.

Your criticism is kind of like judging a book about meditation techniques for
being neither an answer to all of your life’s problems (despite Amazon reviews
claiming so!) nor a complete psychology textbook.

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

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

~~~
maddyboo
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)

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

------
Z1515M8147
I have persistently encountered the same problem in this space. Most people
I've worked with write documents using the last formatted document they made
as a template for the next. Tracing back through their history of documents
you find that they are all based off one person who decided it was a good idea
to mix fonts and colours of headings, and mess around with font sizes and then
save it all as default heading and text styles, and then everyone after them
just uses these saved styles to save time because changing them would mean
having to work with frustrating aspects of the tool (MS Word).

So my question is, how can I get people to care about this? I've argued for a
properly defined corporate style guides as well as adoption of typesetting
systems like LaTeX but nobody wants to hear it. Am I just in a minority by
being put off by poor typographic and formatting choices and should find more
important battles at work? It concerns me that customer facing documentation
is severely lacking in quality.

~~~
mixmastamyk
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.

~~~
fantispug
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 into a terminal).

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

------
kgarten
It's 10 min yet also a nice guide:
[https://practicaltypography.com/typography-in-ten-
minutes.ht...](https://practicaltypography.com/typography-in-ten-minutes.html)

Just love the book and his fonts :)

I know it has been posted before, but I just had to ...

~~~
programbreeding
It looks like the author has chosen to "graylist" HackerNews in an attempt to
sell copies of his book. I'm not saying there's anything wrong with that, but
warning you that anyone clicking on your link is actually redirected to
[https://practicaltypography.com/graylist.html](https://practicaltypography.com/graylist.html)

~~~
colejohnson66
Graylist?

~~~
programbreeding
I have never personally seen it used the way it was used on this website, but
graylisting is the middle-ground between blacklisting and whitelisting.

In a blacklist something is completely blocked. In a whitelist something is
absolutely allowed. In a graylist you may be allowed after a certain number of
attempts, or after completing some sort of task, etc. It's kind of like a soft
block.

In this scenario the website detects the link is coming from HN and
"graylists" your visit to the website. You are redirected to a page that
explains he's trying to sell a book and people coming from this site just use
his bandwidth and never pay. But the website explains if you don't want to pay
you can still get to the book by browsing to the website directly -- as
opposed to being redirected there from HN.

------
sidedishes
A great guide to typography for the reader with a few hours to spare is
Butterick's Practical Typography:
[https://practicaltypography.com/](https://practicaltypography.com/)

------
Sreyanth
A nice quick guide. Definitely eliminates a lot of experimentation when in
hurry to get going.

Here's a 10 second theory class: stick to the four principles of design -
remember CRAP (not my theory though)

\- C: Contrast -> use contrasting design to make things that are supposed to
be dissimilar look dissimilar.

\- R: Repetition -> repeat design patterns for similar items. Remember CSS?

\- A: Alignment -> don't leave anything just hang in air on the canvas. Align
things together.

\- P: Proximity -> birds of the same feather flock together. Similar things
are closer. Dissimilar ones are farther.

~~~
Anthony-G
I first came across these guidelines in Robin William's books[1]. I read a
couple of them ( _The Non-Designer 's Design Book_ and _The PC is Not a
Typewriter_ ) back in the mid 2000s and found them to be very useful as an
amateur desktop publisher. I thoroughly recommend her books for any lay person
with an interest in understanding the basic principles of typography.

1\.
[https://en.wikipedia.org/wiki/Robin_Williams_(writer)](https://en.wikipedia.org/wiki/Robin_Williams_\(writer\))

------
justinmk
JIRA could benefit from this. After their big fancy redesign, I was shocked to
see that they had re-arranged the old pile of shit into a new pile of shit.

------
JohnHammersley
If you're looking for some ideas / examples for nicely formatted documents,
there are some amazing LaTeX templates out there, e.g. try browsing
[https://www.overleaf.com/latex/templates](https://www.overleaf.com/latex/templates)

You can open them for editing online in Overleaf to try them out - if you do,
any feedback is appreciated, thanks (I'm one of the founders).

------
DoodleBuggy
Nice display of typography, so much data is poorly presented nowadays.

Here's a 5 second guide: use larger fonts that are easy to read with lots of
white space.

~~~
pvorb
Here's a 5 second guide for typography on the web:

Set max-with and increase line-height. Everything else is just fine as it is.

~~~
rvern
Yes, and use the correct units when setting max-width and line-height. This is
good:

    
    
      line-height: 1.4;
      max-width: 30em;
    

This is not:

    
    
      line-height: 120%;
      max-width: 700px;
    

[https://developer.mozilla.org/en-US/docs/Web/CSS/line-
height...](https://developer.mozilla.org/en-US/docs/Web/CSS/line-
height#Prefer_unitless_numbers_for_line-height_values)

[http://maxdesign.com.au/articles/ideal-line-length-in-
ems/](http://maxdesign.com.au/articles/ideal-line-length-in-ems/)

Also, use the proper typographic characters in body text:
[https://www.w3.org/2009/cheatsheet/#typo](https://www.w3.org/2009/cheatsheet/#typo).

------
todd8
We "see better" than the optical system of our eyes allow. Image processing
happens to the signals from our retinas before it arrives at the visual cortex
and especially before it arrives at higher levels within the brain. This means
that _logical_ letter forms may not be ideal and that actual experiments need
to be performed to understand what works well when considering visual
perception.

For example, Kuffler units within the retina are triggered by the presence of
intensity transitions so we have edge detection and enhancement happening very
early in the visual system. We don't actually see edges as clearly as we think
we do. A number of optical illusions are due to this fact.

------
rukuu001
Great guide.

Interested to see the advice on doubling type-size for contrast. I thought
sticking to the typography scale (10, 11, 12, 14, 16 etc) was a golden rule.
The x2 factor looks good though.

And now I can reliably type -, –, and –. That alone's worth the read.

------
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!
:)

------
jamesmiller5
Another good resource about typography with a focus in responsive layouts
[http://informationarchitects.net/blog/responsive-
typography-...](http://informationarchitects.net/blog/responsive-typography-
the-basics/) .

------
Yizahi
Good intentions with bad implementation. Some UX guy could probably use it for
his own "five minute guide to better UX", about spacing, blinking elements
etc. And dear author, not everyone uses Apple PCs these days. Sincerely,
Windows user.

------
BrandoElFollito
I like this article for its lack of philosophy. It gives practical advice for
people like me who are dumb with typography - what one gets using it is not
the next Mona Lisa artwork but something acceptable and readable.

(* sorry the lack of em-dash)

------
amelius
If it's that simple, why can't we just let some ML application do typography
for us?

~~~
purerandomness
It's such an easy task that a set of rules are totally sufficient - no need to
throw ML at it.

In fact, typography is a solved problem since Donald Knuth gave us TeX in the
80s.

The problem isn't typography. It's people not caring enough, or forgetting and
then repeating history.

------
supergreg
While visiting a newspaper for a project, I heard them talk about how it is
better to use a sans-serif font for the body and a serif for the heading
because it is easier to read. I think that's more true for printed stuff than
on the screen though.

~~~
hk__2
> I think that's more true for printed stuff than on the screen though.

What makes you think that?

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

~~~
chipotle_coyote
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.

------
dingo_bat
Ironic for an article about good typography to be so hard to read.

------
peterrattew
Nice quick guide! I definitely need to learn more about typography as I'm
convinced the designers I work with don't know enough and what they design
doesn't translate correctly in build.

------
Effulgent
It's a good guide, the only I specifically disagree with for web design might
be the 'choose four font weights' bit since Google Fonts warns me of slow
loading times when I choose that many.

------
ankyth27
Read this initially a few days back through codrops. This information did
helped me a lot and the idea of choosing a font with 3+ variations is just
awesome. Very helpful, recommended for everyone.

------
epx
Great page, just remembered me that I have to control flow in my own site.
More work to the pile :( :)

------
brendonjohn
Helvetica and you're done.

^ My one sentence guide to better typography.

~~~
diggan
That's your guide to better typography for OSX users. Then we also have folks
using Windows and Linux that doesn't ship with Helvetica. Worth knowing!

~~~
wildrhythms
I'm always sad to see people say things like "Helvetica and you're done!"
There are so many beautiful different fonts to use... imagine if everything
was Helvetica? Boring :(

~~~
brendonjohn
Helvetica and its derivatives are beautiful, they're not boring.

------
mirko22
I only see a white page when i open the link...

~~~
anonfunction
It's almost all images / gifs, maybe they failed to load or you have them
blocked?

I was thinking it would be interesting to recreate the site with CSS but the
animations that show the before and after state change might prove tricky.

~~~
leephillips
Yes - I got a white page until I allowed ajax.googleapis.com.

------
stared
The author hates us, see this xkcd on kerning:
[https://xkcd.com/1015/](https://xkcd.com/1015/) ;)

~~~
dehef
That's some brutalist website for sure

------
Risible_Me
I think en dashes are good enough to use as comma replacements. I especially
like The Economist's style of using a thin space, then an en dash, then
another thin space to punctuate the break properly. But in plain text, I'm
perfectly fine with using two hyphens together.

------
Perfect_Pitch
Such a great guide. I think a lot of people don't realize just how essential
typography is to UI design and development.

------
cooljl31
Here is some nice typography’s [https://goo.gl/eRL1vZ](https://goo.gl/eRL1vZ)

