Jump to content
Sign in to follow this  
johoki

Small caps rendering

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!

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...