This is probably one of the most often used stylings on a website as font readability aswell as appeal contribute greatly to the overall look of a website. There are many possible css attributes that can be used to control the look of your text. In this tutorial i will cover all of those that i know of and if i have missed any out i urge you to let me know by leaving a comment. Let’s begin.
Font Family
Font Family refers to the ‘name’ and/or ‘family of the font you want to use on the website. This can be described as the name of a font you would select from the drop down menu in a word processor, common examples are arial, verdana etc.
Example:
p {
font-family: arial, verdana, sans-serif;
}
What this selector does is tell the browser that the font you want the text to be displayed in mostly is arial but if the browser cannot find the primary font, use your second choice, third choice etc. If the browser cannot find any of the fonts specified then it should use any ’sans-serif’ font on your computer instead.
I would suggest using no more than 2 fonts and a family when using this property in your website styles.
Font Size
Obviously this attribute controls the size of the text on your webpage.
Example:
p {
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
You can specify the font size in many different ways. I would suggest using pixels (px) which is the same as you would see in a word processor, you can also specify a percentage, so obvious using this technique requires some experimentaiton. You can also specify a size in words. For example:
“xx-small, x-small, small, medium, large, x-large, xx-large”
Font Weight
You can use this attribute to bolden the text and set how bold you want it to be.
Example:
p {
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
}
You can specify the boldness in words, “normal, lighter, bold, bolder” or in numbers, “100, 200, 300, 400 etc”.
Font Style
This attribute allows you to specify the ’style’ of your font, being italic, oblique etc.
Example:
p {
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
}
The possible values are, “normal, italic and oblique”.
The attributes mentioned above are the ones that you are likely to come across or use most often, however i will specify some others which you may need to use in special circumstances.
Font Stretch
Using this attribute you can expand or condense your text, meaning you can stretch smaller text to fit the width that you need. It can be described as a manual ‘justify’.
Example:
p {
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-stretch: wider;
}
Possible values are, “normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded”.
Font Variant
This attribute is used to provide one special effect tot he font, which is making it all small caps.
Example:
p {
font-family: arial, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-stretch: wider;
font-variant: small-caps;
}
The only possible values are “normal, small-caps”.
That concludes the second installment of the BowlOfPixels Basic CSS Series. Thanks for reading and good luck in all of your CSS ventures!
