Menu
I watched some conference recently online, talking abt web typography. There was something mentioned about a web calculator for calculating font-size/line-height with the golden ratio. Any ideas where can I find it? Or what sizes do you use for your headers?
270
For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1. 8= 28.8pt (180%) maximum value.
Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.
Line Height and Font Size #Smaller type tends to need more line height, not less. A generous line height helps the eye to recognize small word shapes more easily, and it encourages horizontal motion when the eye gets tired of reading small text. Left: A line height set at 150% is a bit too tight on an iPhone.
For example, suppose the font-size of the <body> of the page is set to 16px . If the font-size you want is 12px , then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px , then specify 0.625em (10/16 = 0.625); for 22px , specify 1.375em (22/16).
The CSS property 'line-height' actually accepts a pure numerical value, which will work out the line height based on the font size set. If you want to use the golden ratio (1.61803399), then you could set this as the line height in the body.
body { font: 100%/1.618 sans-serif; } As an example, setting a H1's font-size to 24px would produce a line-height of 39px (rounded up from 38.832).
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
