Five minute guide to better typography
pierrickcalvez.com
Five minute guide to better typography
1–10 of 133 posts
Re: Five minute guide to better typography
#2Nice 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.
Re: Five minute guide to better typography
#3Nice 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.
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.
Re: Five minute guide to better typography
#4While 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.
Re: Five minute guide to better typography
#5While 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.
> I think that's more true for printed stuff than on the screen though.
What makes you think that?
Re: Five minute guide to better typography
#6A 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.
Re: Five minute guide to better typography
#7While 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.
[deleted]
Re: Five minute guide to better typography
#8While 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.
> 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.
Re: Five minute guide to better typography
#9My 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.