CSS 101 | Part Eight - CSS Font and Text Properties
In this instalment of the CSS 101 series, titled CSS Font and Text Properties, we will be discussing how to format text using CSS.
This tutorial is split into nine parts:
- How to change the size of text
- How to set the font family of text
- How to make text bold
- How to make text italic
- How to change the colour of text
- How to align text
- How to change the case of text
- How to convert text to small-caps
- How to combine font style, variant, weight, size and family
How to change the size of text
The font-size property is used to specify a font size, using the units of measurement discussed in the last chapter, as well as some special font units, described below.
Example
CSS Code:
p.percent {
font-size:130%;
}
p.pixel {
font-size:15px;
}
p.em {
font-size:1.3em;
}
(X)HTML Code:
<p class="percent">Percent</p>
<p class="pixel">Pixel</p>
<p class="em">Em</p>
Result:
Percent
Pixel
Em
CSS font units of measurement
In the last instalment, we discussed the CSS units of measurement, but what we didn't talk about were some extra font units. These extra units fit into two categories: absolute and relative.
Absolute Sizes
The absolute sizes are fixed and do not depend on a value set on a parent or ancestor element.
CSS Code:
p.xx-small {
font-size:xx-small;
}
p.x-small {
font-size:x-small;
}
p.small {
font-size:small;
}
p.medium {
font-size:medium;
}
p.large {
font-size:large;
}
p.x-large {
font-size:x-large;
}
p.xx-large {
font-size:xx-large;
}
(X)HTML Code:
<p class="xx-small">xx-small - extra, extra small font</p>
<p class="xx-small">x-small - extra small font</p>
<p class="xx-small">small - small font</p>
<p class="xx-small">medium - medium font (this is the default font size set in the browser)</p>
<p class="xx-small">large - large font</p>
<p class="xx-small">x-large - extra large font</p>
<p class="xx-small">xx-large - extra, extra large font</p>
Result:
xx-small - extra, extra small font
x-small - extra small font
small - small font
medium - medium font (this is the default font size set in the browser)
large - large font
x-large - extra large font
xx-large - extra, extra large font
Relative Sizes
The relative sizes depend on the font size set in a parent or ancestor element, and render differently in various browsers.
CSS Code:
p.smaller {
font-size:smaller;
}
p.larger {
font-size:larger;
}
(X)HTML Code:
<p class="smaller">smaller - sets the font to a smaller size than the current font size for that element; the factor that the size decreases by varies per browser.</p>
<p class="larger">larger - sets the font to a larger size than the current font size for that element; the factor that the size increases by varies per browser.</p>
Result:
smaller - sets the font to a smaller size than the current font size for that element; the factor that the size decreases by varies per browser.
larger - sets the font to a larger size than the current font size for that element; the factor that the size increases by varies per browser.
The relative sizes are generally best avoided as they produce inconsistent results across different browsers.
The inherit property
There is also a property called inherit, which sets the font size to whatever it is set to on the parent element, or an ancestor element. This is quite a useful property, but keep in mind, it is not supported in versions of IE below 8.
Which unit of measurement should I use for my fonts?
The units of measurement generally recommended are em,
How to set the font family of text
The property font-family specifies a font family for your text, in the format of a comma delimited list. font-family can either be the name of a font, or it can be one of five generic font families:
- cursive - a font which mimics joined up hand-writing
- fantasy - an extravagant font
- monospace - a font whose letters and characters each occupy the same amount of horizontal space
- sans-serif - a font without a serif
- serif - a font with a serif
The generic font family always comes at the end of the list and must not be quoted. Font family names, such as Verdana or Arial can be quoted, or can be specified without quotes - it's down to personal preference.
Example
Here, we are specifying the font name by itself.
CSS Code:
p {
font-family:Arial;
}
Here, we are specifying the font family.
CSS Code:
p {
font-family:Arial, Helvetica, sans-serif;
}
I would discourage you from using the top example, unless you don't care what font your users see on your website. If you specify just one font and a user doesn't have that font installed, the font on your website will default to whatever font the user has set on their system. It's a good idea to provide a list of fonts, that way, if a user doesn't have a specific font installed, the browser can default to another similar font from your list.
The fonts
Below is a list of browser safe fonts - fonts that most people will have installed on their computers, whether they are using PC or Mac.
CSS Code:
p.comic_sans_cursive {
font-family:"Comic Sans MS", cursive;
}
p.courier_monospace {
font-family:"Courier New", Courier, monospace;
}
p.lucidia_monospace {
font-family:"Lucida Console", Monaco, monospace;
}
p.verdana_geneva_sans_serif {
font-family:Verdana, Geneva, sans-serif;
}
p.arial_helvetica_sans_serif {
font-family:Arial, Helvetica, sans-serif;
}
p.tahoma_geneva_sans_serif {
font-family:Tahoma, Geneva, sans-serif;
}
p.arial_black_sans_serif {
font-family:"Arial Black", Gadget, sans-serif;
}
p.georgia_times_serif {
font-family:Georgia, "Times New Roman", Times, serif;
}
p.times_serif {
font-family:"Times New Roman", Times, serif;
}
p.palatino_serif {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
p.lucidia_sans_serif {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
p.ms_serif {
font-family:"MS Serif", "New York", serif;
}
(X)HTML Code:
<p class="comic_sans_cursive">"Comic Sans MS", cursive</p>
<p class="courier_monospace">"Courier New", Courier, monospace</p>
<p class="lucidia_monospace">"Lucida Console", Monaco, monospace</p>
<p class="verdana_geneva_sans_serif">Verdana, Geneva, sans-serif</p>
<p class="arial_helvetica_sans_serif">Arial, Helvetica, sans-serif</p>
<p class="tahoma_geneva_sans_serif">Tahoma, Geneva, sans-serif</p>
<p class="arial_black_sans_serif">"Arial Black", Gadget, sans-serif</p>
<p class="georgia_times_serif">"Lucida Sans Unicode", "Lucida Grande", sans-serif</p>
<p class="times_serif">Georgia, "Times New Roman", Times, serif</p>
<p class="palatino_serif">"Times New Roman", Times, serif</p>
<p class="lucidia_sans_serif">"Palatino Linotype", "Book Antiqua", Palatino, serif</p>
<p class="ms_serif">"MS Serif", "New York", serif</p>
Result:
"Comic Sans MS", cursive
"Courier New", Courier, monospace
"Lucida Console", Monaco, monospace
Verdana, Geneva, sans-serif
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
"Arial Black", Gadget, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Georgia, "Times New Roman", Times, serif
"Times New Roman", Times, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"MS Serif", "New York", serif
What's the difference between serif and sans-serif?
A serif is the short line added to the top and bottom of characters in certain typographies, like Times Roman, Palatino and Book Antiqua. A sans-serif font is a font without that little typeface detail, such as Arial, Verdana and Lucidia. Sans is the French word for without, sans-serif literally meaning, without the serif.
On the left is the serif font Times New Roman, with the serifs highlighted in red. On the right is the sans-serif font Arial.
The inherit property
There is also a property called inherit, which sets the font family to whatever it is set to on the parent element, or an ancestor element. This is quite a useful property, but keep in mind, it is not supported in versions of IE below 8.
How to make text bold
The property font-weight is used to make text bold and then change it back to normal.
Turning text bold and then back to normal
Here, we use the font-weight property bold to render text in bold, and the property normal to turn it back to normal thickness.
CSS Code:
p {
font-weight:bold;
}
p {
font-weight:normal;
}
(X)HTML Code:
<p class=bold">This text is bold.</p>
<p class="normal">This text is normal.</p>
Result:
This text is bold.
This text is normal.
font-weight also has some other properties.
- 100 through to 900, which apply a varying thickness to text - where 400 is normal and 900 is very bold. These properties don't seem to work. 100 through to 500, produces text with the normal thickness, and 600 to 900 makes text bold. There appears to be no varying thickness.
- bolder is supposed to make text thicker than bold but does not appear to work.
- inherit sets the
font-weightto the value set on the parent element, or an ancestor element. This does not work in versions of IE below 8. - lighter is supposed to make text thin but does not appear to work.
How to make text italic
The property font-style is used to make text italic and then turn it back to normal.
Making text italic, then turning it back to normal
Here, we use the font-style property italic to render text as italic, and the property normal to turn it back into normal text.
CSS Code:
p.italic {
font-style:italic;
}
p.normal {
font-style:normal;
}
(X)HTML Code:
<p class="italic">This text is italic.</p>
<p class="normal">This text is normal.</p>
Result:
This text is italic.
This text is normal.
font-style also has some other properties.
- oblique is supposed to tilt the text to the side, in a similar fashion to italic but does not seem to work.
- inherit sets the
font-sizeto the value set on the parent element, or an ancestor element. This does not work in versions of IE below 8.
How to change the colour of text
The property color (spelt the American way) is used to apply colour to text. It accepts the following values:
- name values, such as red, orange.
- hex values, which are written either with six characters (longhand) or three (shorthand), such as #000000, or #000 (which represents the colour black).
- rgb values, such as rgb(255,0,0) (which represents the colour red).
Example of how to apply colour to text
CSS Code:
p.colourName {
color:red;
}
p.shorthandHex {
color:#939;
}
p.longhandHex {
color:#1372bb;
}
p.rgbValue {
color:rgb(252,164,10);
}
(X)HTML Code:
<p class="colourName">This text is red.</p>
<p class="shorthandHex">This text is purple.</p>
<p class="longhandHex">This text is blue.</p>
<p class="rgbValue">This text is orange.</p>
Result:
This text is red.
This text is purple.
This text is blue.
This text is orange.
The inherit property
There is also a property called inherit, which sets the colour to whatever it is set to on the parent element, or an ancestor element. This is quite a useful property, but keep in mind, it is not supported in versions of IE below 8.
How to align text
The property text-align is used to align text. It has five properties, center, inherit, justify, left and right.
- center aligns text to the center.
- inherit sets the text alignment to whatever is set on the parent element, or an ancestor element.. This diesn't work in versions of IE below 8.
- justify gives text a justified alignment.
- left aligns text to the left.
- right aligns text to the right.
Example
CSS Code:
p.center {
text-align:center;
}
p.justify {
text-align:justify;
}
p.left {
text-align:left;
}
p.right {
text-align:right;
}
(X)HTML Code:
<div class="center">This is centre aligned text.</div>
<div class="justify">This is text with a justified alignment.</div>
<div class="left">This is left aligned text.</div>
<div class="right">This is right aligned text.</div>
Result:
This is a demonstration of centre aligned text.
A couple of paragraphs have been inserted so you can see how it works.
This is a demonstration of text with a justified alignment.
A couple of paragraphs have been inserted so you can see how it works.
This is left aligned text.
A couple of paragraphs have been inserted so you can see how it works.
This is right aligned text.
A couple of paragraphs have been inserted so you can see how it works.
How to change the case of text
The property text-transform is used to capitalise the first letter of every word, transform all text to uppercase or lowercase, and revert the text back to its original formatting. The properties to do this are as follows:
- capitalise capitalises the first letter of every word.
- inherit sets the text transform to whatever it is set to on the parent element, or an ancestor element. This doesn't work in versions of IE below 8.
- lowercase transform the text into lowercase characters.
- none reverts the text back to its original formatting.
- uppercase transforms the text into uppercase characters.
The various text-transform properties at play
p.capitalise {
text-transform:capitalize;
}
p.lowercase {
text-transform:lowercase;
}
p.none {
text-transform:none;
}
p.uppercase {
text-transform:uppercase;
}
(X)HTML Code:
<p class="capitalise">This text is capitalised.</p>
<p class="lowercase">This text is in lowercase.</p>
<p class="none">This text is in its original formatting.</p>
<p class="uppercase">This text is in uppercase.</p>
Result:
This text is capitalised.
This text is in lowercase.
This text is in its original formatting.
This text is in uppercase.
How to convert text to small-caps
The font-variant property is used to convert lowercase letters to small uppercase letters, via the small-caps value. This will render your text in a smaller font, with the previously lowercase letters now uppercase, but slightly smaller than the original uppercase letters. The normal value restores the original font variant.
Example
CSS Code:
p.small-caps {
font-variant:small-caps;
}
(X)HTML Code:
<p class="small-caps">This paragraph is written in lowercase, with the first letter of each sentence capitalised. As you can see, small-caps has converted the lowercase letters into uppercase, but they are not as big as the original uppercase letters at the beginning of each sentence.</p>
Result:
This paragraph is written in lowercase, with the first letter of each sentence capitalised. As you can see, small-caps has converted the lowercase letters into uppercase, but they are not as big as the original uppercase letters at the beginning of each sentence.
The inherit property
There is also a property called inherit, which sets the font variant to whatever it is set to on the parent element, or an ancestor element. This is quite a useful property, but keep in mind, it is not supported in versions of IE below 8.
How to combine font style, variant, weight, size and family
Most of the font properties mentioned on this page can be applied all in one go, using the font property. This saves you having to write each rule out separately, and is the preferred method for handling multiple formatting of font.
The font property takes the following values, in the order listed below:
- font-style - either inherit, italic, normal or oblique.
- font-variant - either inherit, normal or small-caps.
- font-weight - either bold, bolder, lighter, inherit or normal.
- font-size - the font size.
- font-family - the font family.
Example
CSS Code:
p.font-size-and-family {
font:120% "Times New Roman", Times, serif;
}
p.font-size-family-and-bold {
font:bold 110% "Lucida Console", Monaco, monospace;
}
p.everything {
font:italic small-caps bold 100% Georgia, "Times New Roman", Times, serif;
}
(X)HTML Code:
<p class="font-size-and-family">This text is 120% in size and Times New Roman.</p>
<p class="font-size-family-and-bold">This text is bold, 110% in size, and Lucidia.</p>
<p class="everything">This text is italic, in small-caps, bold, 100% in size, and Georgia.</p>
Result:
This text is 120% in size and Times New Roman.
This text is bold, 110% in size, and Lucidia.
This text is italic, in small-caps, bold, 100% in size, and Georgia.
The inherit property
There is also a property called inherit, which is specified by itself, and sets the font to whatever it is set to on the parent element, or an ancestor element. This is quite a useful property, but keep in mind, it is not supported in versions of IE below 8.
CSS Code:
p.inherit {
font:inherit;
}
Drop me a line
Got any questions? Get in touch via the contact form or email me @ helen@alternategateways.com.
