Home » Resources » Dreamweaver CS4 Tutorial » Working with Text in Dreamweaver CS4

This chapter describes how you can change the way the text of your website is displayed. Including the font type, size, colour, weight and style. All this is covered in our comprehensive Dreamweaver course.

We will also introduce the concept of Cascading Style Sheets, or CSS, which can save you a lot of time when you need to change the style of different areas of text all at once.

Fundamentals of Web Fonts

The first important concept that any new web-designer needs to understand, is that you can’t use all of the fonts that you would usually use on your computer when building a website. This is because the fonts you have installed on your own PC or Mac won’t necessarily be installed on the computer of the end user.

Most web designers therefore stick to a set of fonts that are web-safe, and found on most computers.

Any text you have entered on your site in previous chapters will have used Dreamweaver’s default template, and will be displayed in one of the following fonts:

Verdana, Arial, Helvetica, sans-serif

Your user’s web browser will read the list of fonts in order, and will display the text using the first font on the list that is installed on that person’s PC or Mac. I.e. If they have Verdana it will display as Verdana, if not it will display as Arial, if not Helvetica and failing that, it will just use any sans-serif font available.

All of these fonts look very similar – and they are all sans-serif. Sans-serif fonts are the best for web-work, since they are easy to read on screen.

Serifs are the “curly bits” that appear on the end of the characters in fonts like Times New Roman, which look nice in print, but are not as easy to read on screen. Sans-serif simply means “without serifs” – which means the font is plainer, but more readable.

Compare the two text samples below as an example of this:

However, Dreamweaver will also allow you to select other series of fonts in addition to the standard “Verdana, Arial, Helvetica, sans-serif”

To experiment with this:

Select some text in Dreamweaver by highlighting it with your cursor
Now select Format>Font from the main toolbar

The following alternative series of fonts are available:

• Arial, Helvetica, sans-serif
• Verdana, Arial, Helvetica, sans-serif
• Times New Roman, Times, serif
• Courier New, Courier, monospace

All of the fonts in these series are very likely to be installed on the end-user’s computer.

Dreamweaver will allow you to add your own font lists, however its not a good idea to do so, as it is unlikely that the fonts you choose from your own computer will be present on the user’s – the site will not display the way you designed it.

Similar resources you may like

1. CSS (Cascading Style Sheets)
2. How to change fonts in Dreamweaver
3. Changing the font size
4. Different Coloured Text
5. Selecting a Font

Tags

cascading style sheets, color, colour, css, Dreamweaver, dreamweaver tutorial, font, font type, size, style, text, web font

Share This Resource

This entry was posted by Colin Welch on Friday, March 6th, 2009 at 12:24 pm and is filed under Dreamweaver CS4 Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.