|
TypographyModule
Notes on the Typography Module.
Typography ModuleLocation/stylesheets/modules/typography.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/typography.css SummaryThe typography module sets a base text size, colour and font for the page. It also sets default styling of margins, line-spacing (leading) and font size, for the headings and paragraphs. HTML Design PatternThis module affects any element that contains text, for example: <h3>The Typography Module</h3> <p> This module sets a base text size, colour and font. </p> DescriptionWhen you build a website, the typography module will ensure that the text on your page can be resized in most browsers by the user. You can also be confindent that headings, paragraphs and lists will all have suitable top and bottom margins that will maintain the vertical rhythm of the page and maintain the visual consistency. All elements can be then sized using ems or percentages. 1.0em is approximately equal to 10px, so 2.4em would be used to achieve a text size similar to 24px. The whole size of one section can be changed using percentages. For example, if you want all the text in the tertiary content section to be smaller, then using the rule ...
#tertiaryContent
{
font-size: 75%;
}
... will make all the text inside smaller, but still maintain the vertical rhythm and visual consistency of the page. Why It's BulletproofBecause the text-size is set in ems, rather than pixels, it means that the text size can be changed in all browsers, including Internet Explorer. This is really important for people with limited vision and allows them to choose a text size that they find readable. How it worksThis module begins by setting the font-size to 100% on the html element. This stops some browsers from letting the text go microscopic. It then sets the body font to "Nimbus Sans L", helvetica, arial, sans-serif - these are standard sans-serif fonts (Nimbus Sans L will be appreciated by Linux users!). The standard text colour is set to #696969 (a darkish grey) and the font size to 62.5%. This is a strange number, but is very important as it has the effect of making the default text size of 1.0em approximately equal to 10px. So, you can be reasonably confident that if you want a text size of 14px, just set it to 1.4em. The headings are styled next.They are all bold and have a line-height of 1 for consistency. The headings are then each given a size that ensures that their is a heirachy of size, gradually getting smaller as the heading becomes less important. The paragraph and heading elements are both given a maximum width of 30em - this will stop the text becoming overly long and difficult to read. The line-height is set to 1.3 for paragraphs as the extra whitespace between lines of text will aid readability. A default text-size of 1.6em (approximately 16px) is set on the paragraph and various list elements as this is a good, readable size, without being too big. The lists are then given some default padding to allow the bullet points to be seen and space them out a little. The default list-style on the ordered lists is set to 'decimal'. IE FixesNone specifically needed, although a lot of the need to give text-sizes in ems is because some versions of Internet Explorer refuses to let the user resize text that is specified in px units. IssuesBe careful when nesting elements. In the following code:
<div class="section">
<p>blah blah blah</p>
</div>
div.section
{
font-size: 2.0em;
}
div.section p
{
font-size: 1.5em;
}
You may have meant to set the paragraph text-size to approximately 15px, but it will actually be closer to 30px. This is because the size of 1.5em is actually 1 and a half times bigger than the text size of the parent element, which in this case is set to 2.0em (approximately 20px). To get a text-size close to 15px, you'd have to use div.section p{font-size: 0.75em} as 0.75 multiplied by 2.0em is 1.5em, which is approximately 15px. Further ReadingThe vertical rhythm of the page could be improved by playing with the margins and line heights. See: http://24ways.org/2006/compose-to-a-vertical-rhythm Other Modules
|
Sign in to add a comment
