Most designers have an appreciation for well-designed typfaces and want to utilize them a design element in their work. Thanks to CSS and webfonts, we have many options now when it comes to bringing type into web pages.
This page is intended for use in practicing applying CSS to style type. A basic stylesheet has been set up and organized as a starting point and the content of this page contains some notes about various typographic CSS properties.
Have fun with this and use it to help become familiar with type-related CSS.
There are several CSS properties relating to typographic styles that most designers are familiar with from working in page layout and design software.
Here are the properties we can use:
color sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).font-size can take values measured in most of the available CSS length and size units, however the most common units you'll use to size text are px (pixels), em, and rem.font-style is used to turn italic text on and off. Possible values are normal (no italics), italic (uses italic version of the font, if available), and oblique (uses a simulated font-weight sets the weight of text within an element. Can use keyword values (lighter, normal, bold, bolder) or numeric values relating to weight variants in a font.text-transform Allows you to set your font to be transformed. Values include:
none: Prevents any transformation.uppercase: Transforms ALL TEXT TO CAPITALS.lowercase: Transforms all text to lower case.capitalize: Transforms all words to Have The First Letter Capitalized.full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).text-decoration: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
none: Unsets any text decorations already present.underline: Underlines the text.overline: Gives the text an overline.line-through: Puts a strikethrough over the text. The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:
left: Left-justifies the text.right: Right-justifies the text.center: Centers the text.justify: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as hyphens, to break some of the longer words across lines.The line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the line-height. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.)
The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.