search

itfoundry / rajdhani

Rajdhani, a Devanagari + Latin family for Google Fonts.
58 stars 4 forks source link

Font breaks by using text-transform: uppercase; #2

Open Baedda opened 7 years ago

Baedda commented 7 years ago

I have a problem with using Rajdhani in combination with the css attribute text-transform: uppercase;. The bug can be seen in the documentaion on Google Fonts: https://fonts.google.com/specimen/Rajdhani

If you assign text-transform: uppercase; with developer tools to an element that displays the font some strange behaviours appear. Sometimes the uppercased letters are replaced with serif fonts and sometimes some letters appear smaller than others.

lianghai commented 7 years ago

It's horrible to only describe what you see with vague language but not provide screenshots. But anyway I guess I already know what the problem is here.

Afaik, CSS text-transform: uppercase;'s mechanism has nothing to do with fonts. Browsers simply replace original characters with corresponding uppercase characters for displaying.

I suppose the issue you encountered is because Google Fonts by default supplies subset fonts to web pages. And when you want to display some more uppercase characters without reloading (or re-requesting font files from Google Fonts), the subset fonts simply don't have them.

Baedda commented 7 years ago

Thank you for the response and the clear description of the behaviour what happens when we replace the style on the Google Fonts website. Still open is our issue that the letters in the font appear in different sizes after using the css attribute „text-transform: uppercase;“. This behavior seems to be depending on the font size. For example: 14px looks good – 19px too – but every size between 14px and 19px is not good. We have attached some examples out of a current project. As you can see the letters seem like they “dancing around”.

rajdhani_font_problem_01 rajdhani_font_problem_02

It would be great if you could take a second look on that problem! Thank you very much in advance!

lianghai commented 7 years ago

This looks like a hinting issue. If this issue is only obvious in smaller sizes (below 20 px or so) but not large sizes (say, 50 px), then it's a hinting issue.

We don't do manual hinting and can only try to influence the hinting result of Google Fonts ttfautohint solution. I can't promise a resolution soon.