I'm having some major differences in the rendering of text between Chrome and Firefox. Chrome seems to apply some anti-aliasing rules to the text and shrinks it down quite a bit.
I've tried playing with -webkit-font-smoothing, letter-spacing and word-spacing but none seem to really have any effect.
See screenshots
Relevant CSS (computed):
color: #C4C4C4;
font-family: sans-serif;
font-size: 9px;
font-style: normal;
font-variant: normal;
font-weight: normal;
Relevant CSS (computed):
font-family: sans-serif;
font-size: 9px;
font-weight: 400;
font-style: normal;
font-size-adjust: none
color: #C4C4C4;
text-transform: none;
text-decoration: none;
letter-spacing: normal;
word-spacing: 0;
line-height: 11.0833px;
text-align: start;
vertical-align: baseline;
direction: ltr;
Note that the faded text in the background is just an image.. ignore that.
I have a feeling Chrome has a css switch for anti-aliasing rules, but not sure where to look for more info.
Edit:
jsfiddle: http://jsfiddle.net/mHzhQ/
For the record, I'm on Ubuntu. Possibly this has an impact ..
Any tips?
If you notice that your text fonts look different on different browsers, it is because different browsers and devices use different rendering engines, and therefore may result in minor differences. Sometimes these minor differences can have a domino effect.
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text. You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
Firefox is a free and open-source web browser that provides a number of features for easy web browsing. Google Chrome is a free web browser but it is not open source, it is the most used web browser for desktop. 2. Firefox development was done by Mozilla Foundation.
You can access Firefox's font settings by first clicking the menu icon (three stacked lines in the upper right corner), and selecting Preferences. Make sure you're on the General tab, then scroll down just a bit to the “Language and Appearance” section. You can now change the default font and font size for Firefox.
Different browsers use different rendering engines that (are meant to) produce different results. This is especially the case with smaller font sizes. There's generally not a whole lot you can do about it. If the difference is not intended by the browser's designers, it's also quite possible that this is a kink that has been worked out on other OSs, but not yours (Ubuntu).
(That said: have you checked your "minimum font size" in Chrome — Preferences > Under the Hood > Customize Fonts... — and Firefox — Preferences > Content?)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With