Funky font stuff with CSS
Cascading Style Sheets or CSS can be used to give your font or text a unique look. Here are some funky things you can do to your font to make it a little different from the default.
- Color (color)
- Letter Spacing (letter-spacing)
- Text Align (text-align)
- Text Decoration (text-decoration)
- Text Indent (text-indent)
- Text Transform (text-transform)
- Word Spacing (word-spacing)
Easily the most common style change for fonts. Change the color of your font by using hex or rgb code.
Examples:
<div style="color:#FF0000">Examples of using hex color codes</div>
<div style="color:#F00">Examples of using short form hex color codes</div>
<div style="color:rgb(255,0,0)">Examples of using rgb color codes</div>
Go to Web-colors-explained.com for a tutorial on web colors.
2. Letter Spacing
Customize fonts with letter spacing. Letter spacing adds more (or less) white space between letters. This can dramatically alter the readability of text, so use sparingly and preferably on headings only. You can specify letter-spacing with a length in pixels (px), points (pt) or ems (em).
Examples:
<div style="letter-spacing:3px">Example of letter-spacing using pixels</div>
<div style="letter-spacing:3pt">Example of letter-spacing using points</div>
<div style="letter-spacing:0.5em">Example of letter-spacing using ems</div>
3. Text Align
Text-align, as its name suggests, sets the alignment of text. Alignment can be left, right, center or justified.
Examples:
<div style="text-align:left">Left text alignment, text-align:left</div>
<div style="text-align:right">Right text alignment, text-align:right</div>
<div style="text-align:center">Center text alignment, text-align:center</div>
<div style="text-align:justify">Justified text alignment, text-align:justify. Justified text alignment, text-align:justify. Justified text alignment, text-align:justify.</div>
4. Text Decoration
Text decoration lets you add or specify any decoration to text. Decorations can be underline, overline, line-through, blink or none.
Examples:
<div style="text-decoration:underline">Example of underlined text</div>
<div style="text-decoration:overline">Example of overlined text</div>
<div style="text-decoration:line-through">Example of line-through text</div>
<div style="text-decoration:blink">Example of blinking text</div>
<div style="text-decoration:none">Example of no text-decoration</div>
5. Text Indent
Using text-indent will indent the first line of text in an element. You can define the amount of text-indent using length or percentage.
Examples:
<div style="text-indent:20px">Example of text-indent using length, that is, 20 pixels.</div>
<div style="text-indent:10%">Example of text-indent using percentage, that is, 10 percent.</div>
6. Text Transform
You can transform the characters or letters of a block of text using using text-transform. You can set the text to be capitalized (first letter of each word is in capitals), uppercase (all letters are in uppercase), lowercase (all letters are in lowercase) or none.
Examples:
<div style="text-transform:capitalize">Example of capitalized text-transformed text</div>
<div style="text-transform:uppercase">Example of uppercase text-transformed text</div>
<div style="text-transform:lowercase">Example of lowercase text-transformed text</div>
<div style="text-transform:none">Example of no text-transformation</div>
7. Word Spacing
Word-spacing adjusts the space between words. You can increase or decrease the amount of space between words uses length.
Example:
<div style=”word-spacing:20px”>Exaggerated example of word-spacing using 20 pixels</div>
