Controlling text on screen
Having pixel precision of your text on screen can be a fiddly task, especially across a complex site where there are data tables, forms and lists etc. Here are some of the css rules that can help you along the way to styling and controlling your text.
CSS Rules (not exhaustive):
- font-family (sans-serif;)
- font-style (italic; oblique; normal;)
- font-variant (italic; normal;)
- font-weight (normal; bold; bolder; lighter; 100;)
- font-stretch (normal; wider; narrower; ultra-condensed;)
- font-size (keywords; length; percentage;)
- text-indent (length; percentage;)
- text-align (left; right; center; justify;)
- text-decoration (none; underline; overline;)
- letter-spacing (normal; length;)
- word-spacing (normal; length;)
- text-transform (capitalize; uppercase; lowercase; none;)
Here are some examples of the above rules.
text-indent
This property indents the first line in a block of text to the specified value. Note that this will not indent the whole block of text and ONLY the first line.
Example:text-indent:3em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices mauris. Quisque laoreet rhoncus nunc. Etiam cursus tortor ut mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Text-indent is also used in some image replacements methods.
letter-spacing
This sets an additional value of spacing to be applied to the default spacing between characters of text. The default value is “normal”. If you have text set to justify it may effect the value you apply here.
CSS1 core: UAs may interpret any value of ‘letter-spacing’ as ‘normal’.
Example: letter-spacing: 0.2em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices mauris. Quisque laoreet rhoncus nunc. Etiam cursus tortor ut mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
word-spacing
This is similar to letter spacing, except for words. This also applies to the default spacing already set. If you are catering for an IE audience you will need to note that this property works in IE6 only. There is no backward compatibility for this.
Example:word-spacing:1em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices mauris. Quisque laoreet rhoncus nunc. Etiam cursus tortor ut mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Example:word-spacing:-0.1em;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ultrices mauris. Quisque laoreet rhoncus nunc. Etiam cursus tortor ut mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
text-transform
This sets the casing value for any text you apply it to. I find this very useful to format my h1, h2 tags. Things to note from the w3c:
Conforming user agents may consider the value of ‘text-transform’ to be ‘none’ for characters that are not from the Latin-1 repertoire and for elements in languages for which the transformation is different from that specified by the case-conversion tables of ISO 10646 ([ISO10646]).
Examples:
This is my heading with text transform capitalise
This is my heading with text transform uppercase
This is my heading with text transform lowercase
For some more help and information on the rest of the css rules mentioned above please see the Cascading Style Sheets, level 2 CSS2 Specification, [15 Fonts] and [16 Text].
