GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
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.