StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Be sure the font is the same for all browsers. If it is the same font, then the problem has <strong>no solution</strong> using <strong>cross-browser CSS</strong>.</p> <p>Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.</p> <p><strong>UPDATE</strong>: For those who do not understand the browser and OS font rendering differences, <a href="http://szafranek.net/works/articles/font-smoothing-explained/" rel="noreferrer">read this</a> and <a href="http://maxvoltar.com/archive/-webkit-font-smoothing" rel="noreferrer">this</a>.</p> <p>However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:</p> <ol> <li>Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)</li> <li>Using images (resources are demanding and hard to maintain)</li> <li>Replacing Flash (need some programming and doesn't work on iOS)</li> </ol> <hr> <p><strong>UPDATE</strong>: I checked the example page. Tuning the kerning by text-rendering should help:</p> <pre><code>text-rendering: optimizeLegibility; </code></pre> <p>More references here:</p> <ol> <li>Part of the font-rendering is controlled by <a href="http://www.usabilitypost.com/2010/08/26/font-smoothing/" rel="noreferrer"><code>font-smoothing</code></a> (as mentioned) and another part is <a href="http://www.aestheticallyloyal.com/public/optimize-legibility/" rel="noreferrer"><code>text-rendering</code></a>. Tuning these properties may help as their default values are not the same across browsers.</li> <li>For Chrome, if this is still not displaying OK for you, try this <a href="http://eligrey.com/blog/post/better-font-smoothing-in-google-chrome-on-windows" rel="noreferrer">text-shadow hack</a>. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload