HN Gopher Feed (2017-10-07) - page 1 of 10 ___________________________________________________________________
Five minute guide to better typography
404 points by reacharavindh
http://pierrickcalvez.com/journal/a-five-minutes-guide-to-better...___________________________________________________________________
kgarten - 4 hours ago
It's 10 min yet also a nice guide: https://practicaltypography.com
/typography-in-ten-minutes.ht...Just love the book and his fonts
:)I know it has been posted before, but I just had to ...
MikusR - 3 hours ago
The posted link leads to an article about typography. Your link
leads to an add of some book.
larkeith - 3 hours ago
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.htmlEdit: HN is
graylisted by the site, presumably due to large numbers of non-
paying referrals.
MikusR - 3 hours ago
Your link leads to the same adpage.
programbreeding - 3 hours ago
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
[deleted]
twhb - 3 hours ago
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.
brianpan - 2 hours ago
Typography can be understood mathematically to the extent that
communication can be understood mathematically. You're never
going to account for style, trends, or connotation.Same with
baseball, by the way. Advanced analytics can complement and
enhance your understanding of baseball. But there are people
involved. It will never be as straightforward as throw a curve
because the count is 3 and 1 in this situation.Human interaction
is always going to be art (and fashion) as much as science.
galeforcewinds - 1 hours ago
I agree that the number of data points needed for study and the
number of variables involved are both key factors. The one
area that comes to mind where a approach might be easiest is
closed platforms like the hardware Kindle reader -- for
example, measuring read times by a large population of the same
text, with varying fonts, on the same hardware. Improved
typography might reduce read times some modest percentage over
baseline due to improved readability.
IgorPartola - 59 minutes ago
Baseball is... I mean if a team of engineers can design a
rocket that lands vertically, I am fairly certain they could
design a robot that hits balls with a bat. In fact I am
surprised we don?t already have robot baseball.Typography is
supposed to be perceived by human brains. So it will be subject
to interpretation. Baseball is absolute: you can measure where
the ball flew, where it landed, and who caught it.
reilly3000 - 3 hours ago
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?.
tux1968 - 1 hours ago
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.
reilly3000 - 20 minutes ago
I guess I was hoping to point in the direction of Grid Style
Sheets (made by/for thegrid.io folks) using cassowary
constraints. It looks like their site is hacked, and the repo
of it hasn?t been updated since 2014.
jtolmar - 3 hours ago
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 - 2 hours ago
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-... [2]
http://depts.washington.edu/jrphys/ph214A07/albers.pdf [3]
https://www.nytimes.com/2016/12/01/arts/design/josef-alberss...
[deleted]
anonfunction - 2 hours ago
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 it will never be an
exact science or a mathematical formula that will work
universally.
yodon - 2 hours ago
One can of course make a precise set of rules that one will
follow, and one might even come up with some pretty good ones.
But typography is an art as well, by which I mean the range of
optimizations potentially desired from a professional layout is
intractably large, presenting huge problems for creating an
algorithm that can equal or exceed a good human designer. Focus
of the eye, retention, recall, mood to be instilled,
characteristics of the speaker/brand to be projected, all factor
into those decisions.That said, if you want to go analytical on
typography, you should focus on how it is used in advertising.
The original work in the field, Ogilvy on Advertising[0], is
still important and fun to read. Given when it was written most
of the ads it discusses are quite retro (from what I can tell
every industry plot point in the first season of Mad Men came
directly out of this book), but Ogilvy was a giant in the field
who transformed advertising from "people who write good" to a
data driven research activity, starting with typography and
layout.[0]https://www.amazon.com/Ogilvy-Advertising-
David/dp/039472903...
sprokolopolis - 1 hours ago
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.
cjoy - 2 hours ago
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.
jankassens - 2 hours ago
The TeXbook and the METAFONTbook explore the mathematics of
typesetting in great detail
[deleted]
supergreg - 5 hours ago
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 - 5 hours ago
> I think that's more true for printed stuff than on the screen
though.What makes you think that?
supergreg - 4 hours ago
Sans-serif seems easier to read on a screen when the font-size
is small. Maybe that's just me though.
[deleted]
[deleted]
sogen - 3 hours ago
On the contrary, serif is easier to read in print.Source: I've
worked with magazines and newspapers.Just check any newspaper or
magazine, they all use serif.
Sreyanth - 5 hours ago
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.
dom0 - 4 hours ago
Reminds me of the FART photo technique (feel, ask, refine, take).
[deleted]
gkya - 4 hours 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/.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.
viraptor - 1 hours ago
What's a dickbar?
rflrob - 1 hours 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
gjm11 - 58 minutes 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.
The term was coined by John "Daring Fireball" Gruber.
dragonne - 1 hours 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.
maddyboo - 1 hours 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 - 55 minutes 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).
eljs - 1 hours ago
#666 > #333 And #666 is lighter so less contrast. You?re both
saying the same thing.
gkya - 53 minutes ago
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?
mixmastamyk - 1 hours ago
You seem to agreeing?
Z1515M8147 - 4 hours ago
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 - 3 hours ago
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.
jsjohnst - 22 minutes ago
Confluence? You mean the terrible wiki like software put out by
Atlassian? It?s about as relevant as handing someone a
typewriter and telling them to use it as an IDE/code editor.
Sure, you can type characters out with both, but does that
really make them similar tools?
fantispug - 3 hours ago
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 - 1 hours ago
We?re talking about alternatives to ms word for mortals.
falsedan - 2 hours ago
> atlassian confluencel o lReplying separately because the
other response is good and deserves upvotes, please vent your
confluence antipathy on this comment?s karma instead.
mamcx - 2 hours ago
You will need a semantic word procesor.Even if people understand
that this thing matter, if not matter MORE than his others
problems then don't expect much change...
MikusR - 3 hours ago
There are countless kinds of cheese. How can we make people care
about all those. The subtle taste differences, countries of
origin or rippening time. Same with typography. If you want
quality customer facing documentation generate it from plain
text.
Obi_Juan_Kenobi - 3 hours ago
Consistent styles might be a battle you could win, but you're
mental if you think people are going to learn LaTeX.
Someone - 4 hours ago
The book ?the Mac is not a typewriter? (https://www.amazon.com
/Mac-Not-Typewriter-2nd/dp/0201782634) may help get them some
idea about style. It is 15 years old, targets print, and is aimed
at Mac users, but that doesn?t matter that much.(For PC users,
there is ?the PC is not a typewriter? (https://www.amazon.com/Pc-
not-typewriter-Robin-Williams/dp/0...), but that is even older,
so I?m not sure it will be more useful than the original, unless
your users are using WordPerfect or Ventura Publisher)
jsjohnst - 4 hours ago
> Am I just in a minorityIn one word, YES.But you aren?t alone
either. I feel the same way and use LaTeX for any important
writing (and I didn?t start using till after uni either oddly).
My resume, a bunch of guides and documents I wrote in it, as well
as a book I published. My editor (with WROX) insisted I had to
use a Word template for it, but I just couldn?t force myself to.
Instead I wrote it in LaTeX and then made a converter to output
into their specific crappy template.
[deleted]
justinmk - 2 hours ago
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.
amelius - 3 hours ago
If it's that simple, why can't we just let some ML application do
typography for us?
JohnHammersley - 4 hours ago
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/templatesYou 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).
sidedishes - 4 hours ago
A great guide to typography for the reader with a few hours to
spare is Butterick's Practical Typography:
https://practicaltypography.com/
DoodleBuggy - 5 hours ago
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 - 5 hours ago
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 - 4 hours ago
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...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.
stared - 1 hours ago
The author hates us, see this xkcd on kerning:
https://xkcd.com/1015/ ;)
Effulgent - 3 hours ago
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.
cooljl31 - 3 hours ago
Here is some nice typography?s https://goo.gl/eRL1vZ
Aardwolf - 1 hours ago
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! :)
epx - 2 hours ago
Great page, just remembered me that I have to control flow in my
own site. More work to the pile :( :)
ankyth27 - 4 hours ago
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.
mirko22 - 4 hours ago
I only see a white page when i open the link...
anonfunction - 2 hours ago
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 - 59 minutes ago
Yes - I got a white page until I allowed ajax.googleapis.com.