14 ms·
Five minute guide to better typography
- amelius 9y agoIf it's that simple, why can't we just let some ML application do typography for us?
- purerandomness 9y agoIt'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.
- DoodleBuggy 9y agoNice 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 9y agoHere'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 9y agoYes, 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#Prefer_unitless_numbers_for_line-height_values https://developer.mozilla.org/en-US/docs/Web/CSS/line-height... 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.
- supergreg 9y agoWhile 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 9y ago> I think that's more true for printed stuff than on the screen though. What makes you think that?
- supergreg 9y agoSans-serif seems easier to read on a screen when the font-size is small. Maybe that's just me though.
- deleted 9y ago[deleted]
- chipotle_coyote 9y agoNo, 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.
- hk__2 9y agoNo, it’s not just you. But that contradicts your earlier comment, which is why I found it strange: > … it is better to use a sans-serif font for the body … because it is easier to read. I think that's more true for printed stuff than on the screen though. It’s truer for the screen rather than the print.
- Sreyanth 9y agoA 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 9y agoReminds me of the FART photo technique (feel, ask, refine, take).
- tdeck 9y agoWe learned this in my tech writing class back in school and I still call it to mind when laying out slides and things. Seemed silly at the time but it's very memorable!
- Anthony-G 9y agoI 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)
- gkya 9y agoMy 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 9y agoI 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.
- Z1515M8147 9y agoI 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.
- Someone 9y agoThe book “the Mac is not a typewriter” (https://www.amazon.com/Mac-Not-Typewriter-2nd/dp/0201782634 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/0938151495 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)
- JohnHammersley 9y agoIf 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).
- sidedishes 9y agoA great guide to typography for the reader with a few hours to spare is Butterick's Practical Typography: https://practicaltypography.com/ https://practicaltypography.com/
- ankyth27 9y agoRead 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 9y agoI only see a white page when i open the link...
- anonfunction 9y agoIt'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 9y agoYes - I got a white page until I allowed ajax.googleapis.com.
- kgarten 9y agoIt's 10 min yet also a nice guide: https://practicaltypography.com/typography-in-ten-minutes.html 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 9y agoThe posted link leads to an article about typography. Your link leads to an add of some book.
- larkeith 9y agoIt'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 https://practicaltypography.com/index.html Edit: HN is graylisted by the site, presumably due to large numbers of non-paying referrals.
- programbreeding 9y agoIt 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
- 9y ago
- Perfect_Pitch 9y agoSuch a great guide. I think a lot of people don't realize just how essential typography is to UI design and development.
- Risible_Me 9y agoI 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.
- Effulgent 9y agoIt'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 9y agoHere is some nice typography’s https://goo.gl/eRL1vZ https://goo.gl/eRL1vZ
- twhb 9y agoIt'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.
- reilly3000 9y agoAs 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 9y agoYour 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 9y agoI 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 9y agoI 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.
- justinmk 9y agoJIRA 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.
- epx 9y agoGreat page, just remembered me that I have to control flow in my own site. More work to the pile :( :)
- stared 9y agoThe author hates us, see this xkcd on kerning: https://xkcd.com/1015/ https://xkcd.com/1015/ ;)
- dehef 9y agoThat's some brutalist website for sure
- Aardwolf 9y agoNice 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! :)
- hetfeld 9y agoMore like one and a half minute, still good reads
- peterrattew 9y agoNice 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.
- brendonjohn 9y agoHelvetica and you're done. ^ My one sentence guide to better typography.
- diggan 9y agoThat'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 9y agoI'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 9y agoHelvetica and its derivatives are beautiful, they're not boring.
- brendonjohn 9y agoI should of said Helvetica-derivatives.
- pvorb 9y agoUsing Helvetica doesn't magically increase readability.
- brendonjohn 9y agoThat really depends on what you're starting with. My one-liner didn't go into the care that this article went into, I couldn't do the topic justice.
- jamesmiller5 9y agoAnother good resource about typography with a focus in responsive layouts http://informationarchitects.net/blog/responsive-typography-the-basics/ http://informationarchitects.net/blog/responsive-typography-... .
- rukuu001 9y agoGreat 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.
- Yizahi 9y agoGood 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.
- todd8 9y agoWe "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.
- Sam_Harris 9y agoIs that site supposed to be a joke? It's barely usable.
- BrandoElFollito 9y agoI 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)
- dingo_bat 9y agoIronic for an article about good typography to be so hard to read.