|
|
|
|
|
|
by varrock
1458 days ago
|
|
|
I'm curious: what do you consider best practices for font-size and line-height, as well as margins between paragraphs? I've recently revamped my website and used an online type scale tool [0] to get my typography, but margins don't seem to be as plug and chug. 0: https://type-scale.com/ |
|
|
This ensures that your eyes/brain can easily distinct between two lines and "hop" along. The upper limit ensures that you won't lose track of the line because two lines are too far away from each other.
Line length limit comes from this, too. It's hard work for the brain to save a line you just read, jump back to the start of the next line and continue. Short (but not too short!) lines help with that, too.
Paragraph margins are historically based on blank lines, so you can adapt that for your digital text, too and use margin-bottom: 1em or sth. like that (better use the line-height value for the margi, so you include that space, too).
Rules like these obviously date back to the print age, as there are several types of reading (more technical "ways to obtain the information") defined and refered to in "design rules".
You'll "read" a large poster different than a dictionary which is why you can/should deviate from these rules, depending on the setting.
Headlines for example don't need a line-height of 160% but will often work very well with 120% or even smaller. There are no strict rules but more guidelines, so you'll have to develop a sense and feel for that.
Other design rules and their implications play a role, too. Contrast of text to background, phenomena of large color areas, stroke-width of the font and lots of more.
For web typo with I am personally using sans-serif fonts with a larger font-size. Even with wider layouts this helps with getting shorter lines, slightly larger typo improves readability, more line-height reduces the "wall of text" effect, paragraph margins help to distinct different parts of text from each other.
There should be good beginners literature available if you find this interesting.
Also: Try fiddling with the etzh.ch page. Set the line-height to 1.2 and the font-size to 1 rem and you'll immediately see how not to do it. :-D