Jump to content

Small caps rendering


johoki

Recommended Posts

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! :aggressive: 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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...