Menu
I must override the body style of my page:
body{ font-size:14px; line-height:20px; } override:
body{ font-size:100%; line-height:?????; } What is the defualt value of line-height property if I specified font-size:100% ?
Is there a strict relation between this properties ?
888
Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element's font-family . The used value is this unitless <number> multiplied by the element's own font size.
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.
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
line-height: 150% will take 150% of the element's computed font size to compute the line height, which is equivalent to multiply it by 1.5 .
The default line-height is normal, so use:
body { font-size: 100%; line-height: normal; } FYI, you can confirm this if you have Chrome by opening up a website, inspecting the <body> element and viewing the inherited computed styles.
191
Set a unitless value of 1, which will multiply the calculated font-size (i.e. how big the font turns out to be) with 1, making for a high-enough line-height.
You can also use 1.5 for a little more spacing.
So to finish your code it would be
body{ font-size:100%; line-height: 1.5; } See the part on at https://developer.mozilla.org/en-US/docs/CSS/line-height for more details. Using a unitless number is stated as the preferred way of setting line-height.
44
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
