Google Webfont text size varying problem

Question

Hi,

I've got a weird issue where the size of my heading texts vary throughout the font. The 'x-height' in the typography is obviously different from one letter to the next. I've tried adjusting the size of the headings but it doesn't help. I'm using Cormorant Garamond.

The top slider heading text with 4rem sizing as opposed to px sizing doesn't appear to have the same problem.

It's obvious if you look at the Kaye Osborne text. The 'y' and second 'o' are larger than they should be.

I've also attached a grab with a couple of lines overlaid.

Any help would be greatly appreciated.

Thanks,
Nick.

SemiColonWeb · Accepted Answer

Hello,

There is no code in the Canvas Template to stylize the x-heights of the Fonts letter-by-letter. That would make the CSS huge. Additionally, the codes used in Canvas is to make it simpler to use any font stylings/sizes or family. This issue appears to be with the Browser Rendering the Fonts in a different way or in any case maybe the Font itself. You can consider checking out this same font on any other Template using the same settings and we are sure that you would et the same results.

Additionally, you can also consider changing the px value to rem to see if there are any differences or improvements.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

agent8design · Answer

http://testpod.co.uk/osborne html/

Semicolon Web · Answer

Hello,

Please consider using the following font-feature-settings: "lnum"; CSS Property on the Classes where the Font has been applied.

This should fix your issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.