Notes for Self

Just making notes on readings issued in class:

Defining text size across browsers should take user zooming into account, and thus different ways of defining text size have been examined and one found to be "better" than the others across the main browsing platforms.

In summary of the first reading (found here):

Defining text in pixels: works across Safari and Firefox however Internet Explorer and Opera do not resize (unless using page zoom which magnifies all content)

Defining text in ems: When rendered in browsers, original size (before text size change) is identical to pixel size. However, IE6 and IE7 (whilst resizing) show an excessive degree of change.

Defining text using base of percentage: Using a base 100% and defining em differences in body text (etc) works across browsers, and a less pronounced difference in IE 6 and 7.

Verdict: Define Text size using percentage, then define differences using em values.

Taking line height into consideration

Line height should be consistent despite size of text throughout document to maintain rhythm. Thus we need to find a line height that scales with the text (when users change the size of text as a whole - but not when text size varies as a result of em value changes made by web designer).

Defining line height by pixel:
Specifing a unit stops the line-height being changed by text size em value. However, it is not scaled in IE6 and IE7 - so the text becomes squished.

Defining line height by em:
Em values are scales consitently across browsers, except for a monospace glitch in Safari.

So the proposed solution is a conditional comment programmed into the CSS.

a syntax [if !IE] is ignored by Internet Explorer browsers, and by defining a font size in pixels in here, the Safari browser renders as pixels and glitch is solved.