necolas / normalize.css

A modern alternative to CSS resets
http://necolas.github.io/normalize.css/
MIT License
52.28k stars 10.67k forks source link

Line-height should be 1.5 to comply the WCAG guideline #864

Open NagayamaToshiaki opened 3 years ago

NagayamaToshiaki commented 3 years ago

normalize's base line-height is 1.15 and this violates the WCAG Success Criterion 1.4.12: Text Spacing. To suits the criterion, line-height must be "at least 1.5 times the font size". So, html element's style should be: html { line-height: 1.5; /* 1 / -webkit-text-size-adjust: 100%; / 2 / }

GaetanBt commented 3 years ago

That is not what the 1.4.12 criterion is about. It says that no loss of content or functionality should occur by changing line-height, spacing, letter spacing or word spacing. You could have a line-heightset to 1 and it still would be valid as long as any user could increase its value without having any loss of information or functionality.

bhekuwenza commented 3 years ago

It is also important to note that this general rule of thumb of 1.5 for line-height is merely a guide. Design of typefaces vary, thus no such violation exists when one has to almost always alter the leading/line-height for a particular layout or design intent.

volkantash commented 2 years ago

normalize's base line-height is 1.15 and this violates the WCAG Success Criterion 1.4.12: Text Spacing. To suits the criterion, line-height must be "at least 1.5 times the font size". So, html element's style should be: html { line-height: 1.5; /* 1 / -webkit-text-size-adjust: 100%; / 2 / }

👊😎 Söylediklerine katılıyorum. İngiliz abecesinde Türk abecesindeki gibi ÖöÇçÜüŞşİĞğ harfler yok. İngilizce için sorun yaratmıyor. Ancak Türkçe ve başka dillerin yazıları için böyle değil. Harflerin üzerindeki işaretler denk geldiğinde yazılar üst üste binmiş görünüyor.

English with Google Translate
I agree with what you said. There are no ÖöÇçÜüŞşİĞğ letters in the English alphabet as in the Turkish alphabet. No problem for English. However, this is not the case for articles in Turkish and other languages. When the markings on the letters coincide, the texts seem to overlap.

line-height: 1.15; resim

line-height: 1.5; resim

Her şey İngilizcenin çevresinde dönmez. 😁

English with Google Translate
Everything does not revolve around English. 😁

html{
    line-height: 1.5;
}
html[lang*="en"]{
    line-height: 1.15;
}