Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NagayamaToshiaki opened this issue Jul 30, 2021 · 3 comments
Open

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

NagayamaToshiaki opened this issue Jul 30, 2021 · 3 comments

Comments

@NagayamaToshiaki
Copy link

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
Copy link

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
Copy link

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
Copy link

volkantash commented Mar 9, 2022

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants