8
font-variant: small-caps;
font-size: 12px;

Firefox:

  • Capital letters: 12px
  • Lowercase letters: 10px

Chrome:

  • Capital letters: 12px
  • Lowercase letters: 8px

How to harmonize that without using JavaScript?

Marin
  • 263
  • 3
  • 9
  • One way is to use a font-family which provides a small-caps variant. Unless you use such a font, you're stuck with having to deal with the browser's own notion of what small caps should mean, because it's scaling the caps down itself. – Chris Morgan Nov 27 '11 at 03:19
  • Also, once you get to using fake caps, don't put a "full size" span around caps, put a "small size" span around lowercase letters. Whitespace, punctuation and other symbols should remain full-size. – Chris Morgan Nov 27 '11 at 03:20
  • seems like this issue goes deeper, I recently moved my site to another server and Chrome displays the lowercase letters in different sizes depending on the server that is serving up the files. One is Windows 7 with XAMPP, the other is Ubuntu with LAMP architecture. Windows server shows the lowercase letters 1px larger than the Linux version. – Matt K Mar 29 '12 at 21:35

3 Answers3

4

Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
    font-size: .85em 
 }
}
Alfonse Pinto
  • 1,371
  • 1
  • 9
  • 9
0

I am having a similar issue with a much weirder issue between Safari on iPad vs Safari on Desktops, showing a different scale for small-caps at 16px. For some reason small-caps is a bigger size on iPads, kinda matching that of Firefox.

Adjusting the font size or letter-spacing a half pixel less or so, can mitigate the issue without further additional hack. By essentially finding a tiny middle adjustment which trigger on one browser but not on another, to try and get as close as possible.

What I have observed for Firefox and IE, is that fonts tend to scale with many more intermediate sizes than that of Webkit. For example, in IE and Firefox, 15.6px is a tiny bit bigger or use more tracking to adjust, than that of 15.5px, and so is 15.7px, 15.8px etc. With a difference for nearly every 0.1 pixel. Whereas in Safari the difference is only perceived for every 0.4px or so.

For my small-caps case here which created an overflow issue, I used 15.5px, which is barely different from 16px on Safari (Desktop), yet bring down the small-caps size for IE and Firefox as close as possible to Safari's.

hexalys
  • 5,177
  • 3
  • 31
  • 56
0

You can target the browsers individually by using css hacks like this:

@-moz-document url-prefix() {
  //firefox specific css here
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  //chrome specific css here - this will also hit other webkit browsers like safari tho
}

A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.

in the end it would look something like this:

<html class="firefox">
...
</html>

.firefox .rulename {
  //firefox specific css here
}

and of course the same for chrome and whatever else browser

Martin Jespersen
  • 25,743
  • 8
  • 56
  • 68
  • 1
    Thanks, but the problem is to find the better way to fix the font size, not how to detect the browser :) – Marin Sep 28 '11 at 20:52
  • This is the better way, since there is no other way :) – Martin Jespersen Sep 28 '11 at 20:53
  • I'm talking about the rendering of font-variant (the proportionality of the size of the lowercase letters compared to the capital letters), not font-size. Should I just stop using font-variant and add a for each capital letter? – Marin Sep 28 '11 at 20:59
  • 2
    Well that doesn't sounds like a good solution, but then fonts are rendered differently in all browsers and always have. users are used to it, and tbh, since most users never visit a site in more then one browser, nobody notices.. if i was you id' ignore it... sorry that i can't be of help. – Martin Jespersen Sep 28 '11 at 21:02
  • @SimonSteinberger: Actually it isn't, it does however take a different view on this than the OP has, reason being there was no solution for what the OP wanted. And btw there still isn't today, 4 years after the question was made, and there won't be in the future, because, as i try to explain, this is irrelevant to the end user and thus to the people who develops the browsers. – Martin Jespersen Oct 22 '15 at 19:47