Website Text Size
Font Size Options
Beyond the typeface selection are other font options such as font size. Font size is based on the "em" quad. Traditional typographers need no explanation about em quads, but for younger computer trained designers the "em" is a base size specified in points (do I need to define points?) upon which larger sizes are specified. The name "em" comes from the capital letter "M" which in metal type was usually a perfect square. The width of an em quad (used for spacing out lines of metal type) was equal to the width of the capital letter "M." How wide was that? Well that would depend on the point size of the chosen font. A 36pt. font would be about 36pt. wide. A 12pt. font would be 12pts. wide. In CSS, the base "em" setting is usually set to 10pt. Defining font size in "em" increments, when the base "em" is set to 10pt. means that 1.4em would equal 14pt., 1.6em would be the same as 16pt. But if you change the base the point sizes would increase proportionately. If this is confusing don't worry about it, just make sure that when spec'ing type for the web that you indicate a base em size of 10pt. and then just move that decimal point one place to the right to translate for a more the familiar point size specification.
Leading (a.k.a. Line Height)
For those who have not had the pleasure of setting metal type, leading refers to the thin slugs of lead that are slipped between lines of metal type to expand the space between each line. I remember once cutting strips of 2pt. leading into 38 pica widths for a letter-press piece I was working on. I was almost done hand-setting the piece when I needed a couple more lines worth of 2pt. leading and ran out. Ha! Running out of type is one thing we don't have to worry about on the web! Any who, leading can be spec'ed in em units too (by the way, type on the web does not have to be spec'ed in "ems"; points and pixels are possible too. But since "em" is the "right" way to do it, and because Typetester is set up that way, I'll continue to refer to these "em" settings.
Type Tracking
For all those Quark users out there, tracking is nothing new. Setting a negative or positive tracking will condense or expand the letter and word spacing. A quick typographic tip - tracking may very well improve the reading of lines set in all caps but spacing out lower case type, especially in body copy, is a typographic no-no. But you knew that already.
Color
As far a color goes - go for it. The days of "web safe color" are long gone. Go nuts.
Style
Scrolling down the page in Typetester shows the text in the specified typeface, size, color and leading. But it also shows it in all the various styles; italic, bold, bold italic, uppercase, uppercase italic, uppercase bold, uppercase bold italic, small caps, small caps italic, small caps bold, and yes - you guessed it - small case bold italic. next >
Beyond the typeface selection are other font options such as font size. Font size is based on the "em" quad. Traditional typographers need no explanation about em quads, but for younger computer trained designers the "em" is a base size specified in points (do I need to define points?) upon which larger sizes are specified. The name "em" comes from the capital letter "M" which in metal type was usually a perfect square. The width of an em quad (used for spacing out lines of metal type) was equal to the width of the capital letter "M." How wide was that? Well that would depend on the point size of the chosen font. A 36pt. font would be about 36pt. wide. A 12pt. font would be 12pts. wide. In CSS, the base "em" setting is usually set to 10pt. Defining font size in "em" increments, when the base "em" is set to 10pt. means that 1.4em would equal 14pt., 1.6em would be the same as 16pt. But if you change the base the point sizes would increase proportionately. If this is confusing don't worry about it, just make sure that when spec'ing type for the web that you indicate a base em size of 10pt. and then just move that decimal point one place to the right to translate for a more the familiar point size specification.
Leading (a.k.a. Line Height)
For those who have not had the pleasure of setting metal type, leading refers to the thin slugs of lead that are slipped between lines of metal type to expand the space between each line. I remember once cutting strips of 2pt. leading into 38 pica widths for a letter-press piece I was working on. I was almost done hand-setting the piece when I needed a couple more lines worth of 2pt. leading and ran out. Ha! Running out of type is one thing we don't have to worry about on the web! Any who, leading can be spec'ed in em units too (by the way, type on the web does not have to be spec'ed in "ems"; points and pixels are possible too. But since "em" is the "right" way to do it, and because Typetester is set up that way, I'll continue to refer to these "em" settings.
Type Tracking
For all those Quark users out there, tracking is nothing new. Setting a negative or positive tracking will condense or expand the letter and word spacing. A quick typographic tip - tracking may very well improve the reading of lines set in all caps but spacing out lower case type, especially in body copy, is a typographic no-no. But you knew that already.
Color
As far a color goes - go for it. The days of "web safe color" are long gone. Go nuts.
Style
Scrolling down the page in Typetester shows the text in the specified typeface, size, color and leading. But it also shows it in all the various styles; italic, bold, bold italic, uppercase, uppercase italic, uppercase bold, uppercase bold italic, small caps, small caps italic, small caps bold, and yes - you guessed it - small case bold italic. next >
 |    | |
 |  |  |  |  |  |  |  |
RSS
We're in HOW ® Magazine!
The October 2006 self-promotion annual includes an article about how advertising agencies and design firms can better use their websites. We're quoted all over it (pages 128-134). Check it out!