johoki

I think you can get a consistent result among all browsers if, instead of using small caps, you just make it all uppercase with text-transform and then reduce the font size. Each browser may be using different algorithms to generate the small caps.

That sounds like an idea! Thank you!

Hi guys!

I'm currently working on a new online store and i have a small issue that really bugs me. I'm using "font variant: small-caps" + "text-transform: lowercase" for the menu and all headlines (Font: "Questrial"). It looks great in Chrome and Safari on my Mac and almost as good on my Galaxy S6.. but Firefox, it looks like the small caps ate too much food. They are too thick! The body text is as far as i can see the same.

I'm no expert, but i understand that the browsers render fonts (or the small caps in my case) differently. My question is if there is any way to work around this or should i just accept the fact?

Many thanks!