StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This article posted in "A List Apart" by Richard Rutter is still relevant,</p> <p>How to Size Text in CSS <a href="http://www.alistapart.com/articles/howtosizetextincss/" rel="nofollow noreferrer">http://www.alistapart.com/articles/howtosizetextincss/</a></p> <p>If you look at the iterations, you'll see that,</p> <p>Text size in pixels – iteration 1</p> <blockquote> <p>The result is that Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.</p> </blockquote> <p>Text size in ems – iteration 2</p> <blockquote> <p>The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text.</p> </blockquote> <p>Body sized as percentage – iteration 3</p> <blockquote> <p>The results show that the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.</p> </blockquote> <p>Setting line height in pixels – iteration 4</p> <blockquote> <p>The results show that the 18px line-height is inherited by all text on the page....Unfortunately the results show that the 18px line-height is not scaled by IE6 and IE7 when text is resized, meaning the largest setting appears to squash the text.</p> </blockquote> <p>Setting line height in ems – iteration 5</p> <blockquote> <p>The results show accurate, consistently resized text and line-height across all browsers. Perfect. Or nearly so.</p> </blockquote> <p>The Safari monospace problem – iteration 6</p> <blockquote> <p>The results show consistently resized text and line-height across all browsers, including the monospaced text in Safari 2.</p> </blockquote> <p>Even though this article is dated 2007, it's still very much relevant. Setting font sizes is more than just setting an em (or px).</p>

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