razorBlog
Web Design Drives Me Nuts
So What's Next, This is Easy
That's size and colour covered so what else?, well here is a list of some of the properties we could use for changing text or font properties.
- color
- font
- font-family
- font-size
- font-weight
- font-style
- font-variant
- line-height
- letter-spacing
- word-spacing
- text-align
- text-decoration
- text-indent
- text-transform
- vertical-align
- white-space
Lets go back to the CSS file now and change things slightly to flow better, as a rule of thumb, top heading is biggest, sub headings smaller but bigger than paragraphs. This is by no means gospel, the reason for it is to distinguish order, top heading wants to stand out from the page the most, then sub headings then paragraphs. You don't have to do this using size, colour could do the same thing, as long as the colours where used in a fashion that doesn't contradict with the contrasting of the background and they give the right order in importance. Other techniques like borders, background shading can be used, but stay clear of underling, this should not really be used for headings as people will confuse it for a link you can click, unless it is a heading link.
We are going to use size and colour, we shall increase the size of our text and bring the text colour down in shades of grey. Now change the following.
h1 keep the colour black as it's set, and change the size of the font to 130%
h2 change the colour to a dark shade of grey (try #222222) and change the font size to 115%
p change the colour to a less darker grey (try #444444) and keep the font size at 100%.
You should now have the following CSS code
body {
}
h1 {
color: #000000;
font-size: 130%;
}
h2 {
color: #222222;
font-size: 115%;
}
p {
color: #444444;
font-size: 100%;
}
Save the file and lets go back to the web page index.htm file in the browser and refresh the page F5 or load it into a new web browser window.
What we should now see, is varying size in the headings to the paragraph, and also varying colour. This is a good example of informational flow, it creates levels of importance throughout the page. The information in this context should be, heading, sub heading then paragraph. This is just one way to achieve this, when the page becomes more populated including things like navigation, information boxes etc., the order may change and you will start to use more techniques to structure the flow.
As a last bit of formatting on the font of our headings and paragraph, we are going to set the font type, this is the type of font used to render the text. Rather than using font type though it is better to set a font family. By using font type you are telling the browser to use a specific font, maybe it is or is not loaded on the computer of the person using it, by using a font family you give a list of fonts to use in this event. There is one thing to note here, rendered fonts may look different across different operating systems. Microsoft has patented many fonts, so if you are using a non Microsoft operating system, the fonts may not be available to the browser. In this case the best match (equivalent) on their platform will be used. This can mean your website font can look different on different platforms, so be careful that you use common font types like sans or sans serif in your font family, or by using fonts like aerial, times new roman as these will evaluate to an equivalent font if not present.
When setting font families, you set several fonts in order, separate each font type by a comma, if the first one is unavailable as it is not loaded onto the system, the second is used and so on. On a different OS platform, the equivalent is used, if this is not available the second font equivalent is used and so on.
What we will do is set all our fonts the same, try not to mix fonts throughout your page, again it shows inconsistency and makes the page harder to follow, title fonts can be different to paragraph fonts though, this would be a good way to differentiate between heading and paragraph but try not to mix very differing fonts, as discussed earlier. In our example we shall use the same font for everything.
Set h1, h2 and p tags to the following fonts
font-family: arial, sans-serif, courier;
this will set them to use arial as default, remember to keep things in alphabetical order. Your CSS should now look like the following.
body {
}
h1 {
color: #000000;
font-family: arial, sans-serif, courier;
font-size: 130%;
}
h2 {
color: #222222;
font-family: arial, sans-serif, courier;
font-size: 115%;
}
p {
color: #444444;
font-family: arial, sans-serif, courier;
font-size: 100%;
}
Save and go to your browser, refresh and you will notice your text is now looking a little more modern, and is utilising the arial font or an equivalent.
Now we have the general idea about altering fonts on a web page, lets add some more tags and information to our XHTML file index.htm.