johoki Posted November 18, 2016 Share Posted November 18, 2016 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! Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2016 Share Posted November 19, 2016 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 More sharing options...
johoki Posted November 19, 2016 Author Share Posted November 19, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now