CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
San
San

Reputation: 1247

font kerning differs in chrome and firefox even after using the reset.css

this is something new to me. My html font renders differently in chrome and firefox even after using the reset.css. This is my url

http://spheretekk.com/form1/fct14-grpap-marseille-Paris.html

If you see in firefox the title being overlapped by the right hand side start balloon

enter image description here

Upvotes: 1

Views: 948

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

It’s not kerning, it’s differing implementations of font-variant: small-caps.

Common default fonts used by browsers (or the Noto Serif font for that matter) do not contain genuine small caps, i.e. small cap glyphs designed by a typographer. Even if they did, current browsers are unable to use them to implement the CSS setting. Instead, they generate fake small caps by replacing a lowercase letter by the corresponding uppercase letter in reduced size. This is typographically all wrong – the stroke widths become too small, and uppercase letters thus differ in style from the fake small-caps (look bolder than they).

Apparently, browsers do the size reduction slightly differently.

You can work around this by removing small-caps and doing the font reduction yourself, e.g. writing

C<small>ULINARY</small> F<small>RENCH</small> W<small>ATERWAYS</small>

and setting e.g.

small { font-size: 70% }

in CSS (tune the percentage to your liking). It will still be typographically awful, but at least as similar across browsers as you can get – provided that you either use Noto Serif as a downloadable font or put some widely available font(s) like Times New Roman before or in place of serif in the list.

Upvotes: 3

Doug
Doug

Reputation: 821

Browsers tend to vary in their interpretation of font size. Personally I tend to set the body font size to 62.4%, by doing this you can then use ems to set the font size for individual elements when, for example, 1.4em = 14px, 1.8em = 18px, etc. This might work for you.

Having said all this... the discrepancy is really tiny... is it really worth all the hassle?? There are more important things in life :)

Upvotes: -1

Related Questions