Michele Gaggia - Web Design

Michele Gaggia - Web Design - Lesson 2

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

Text Formatting

Text Formatting

Standard Font Categories

There are three main categories of fonts:

serif types: Times, Times new Roman, Georgia, etc.
These are the "classic" print fonts used in every standard novel book or newspaper. On screen they are only easy to read when they are large enough. They look better if Antialiasing (font smoothing) is turned on. Not recommended for small texts. Look OK at 14 pixel or lager.

sans-serif types: Verdana, Helvetica, Arial, sans-serif, etc.
These fonts have no decorations (the serife itself), look more "modern" and are very easy to read on screen at all sizes.
Very recommended for the main paragraph text (standard size: 10 to 12 pixels) and for small texts (8-9 pixel).
Even smaller texts should be created in graphical mode (Fireworks) using special "pixel-fonts": with these it is possible to make even 6-7 pixel sized fonts well readable.

monospace (typewriter) types: Courier, Courier New, Mono
These fonts look like those of an old typewriter. They are called "monospace" because all fonts (even a "i" and an "m") are exactly the same width. They can be useful when you need to arrange text and numbers in columns without needing tables (for example, for an invoice/rechnung).

Standard fonts on different OS platforms

As every operating system has a different set of standard fonts, and as browsers use the installed OS fonts to display text on screen, when creating web pages it is recommended to define several font types, so that if one is not installed the browser will use the next available one.
For example, will display in Verdana if available, otherwise in Helvetica or Arial if not available, or any other font belonging to the category "sans-serif". If none of these is available (or if no font type is defined), the standard font is usually Times / Times new Roman.

Using Non-Standard Fonts

There are two ways to achieve this:

using Flash - this application makes it possible to "embed" the fonts in the HTML/Flash file itself. In this case, the choice is not restricted to these few common types anymore, it is possible to choose any font (even "esoteric"ones).
using a graphic file - of course in this case the fonts will look exactly the same on any browser or platform, but graphics usually take up more space than HTML text, so this is usually done only for logos, page titles, etc.

Typical font type combinations: see Dreamweaver's Properties (Eigenschaften) box for fonts

Masking of Special Characters (Entities)

Special characters like umlauts (ä ü ö Ä Ü Ö), the German sharp "s" (ß), the Euro and Pound symbols (€ £), copyright, regsitered and trademark symbols (© ® ™), the paragraph symbol (§), apostrophes (" “ ”) , hyphens (- – —) etc. must be "masked" when inserted in a HTML document, otherwise they could be confused with the HTML tags, or not displayed properly. It is very hard to remember the masking of all special characters, but fortunately Dreamweaver does this automatically

Exercise 4.1: find out how Dreamweaver masks special characters.

create a new HTML file (menu "Datei > Neu" - [Strg+N]), choose from "Allgemein" "einfache Seite, HTML"
choose the split view in the Dreamweaver editor (upper left icons, "Code und Entwurfansicht anzeigen")
type text using special characters in the lower WYSIWYG editor (use umlauts, the Euro symbol, apostrophes, hyphens, etc.)
see how they are coded as HTML in the above code editor.

Text Formatting using Standard HTML Tags

Standard HTML already provide at least some control over text formatting. This is done with the tag with the parameter "face", "size" and "color"; the and <div> tags with the parameter "align", , and for bold, italics and underline variations, and for ^superscript and _subscript.

HTML formatting has to be repeated for every paragraph, and every page.

Exercise 4.2: format your curriculum using the Properties (Eigenschaften) box.

create a new HTML file (menu "Datei > Neu" - [Strg+N]), choose from "Allgemein" "einfache Seite, HTML"
copy / paste the text from your curriculum
define paragraph (with Return) and line breaks (shift+Return)
with the Properties box define:
- paragraph format type (Absatz, Überschrift 1-2-3 ... etc.)
- bold and italics variations (use the tag for underline)
- left, right or center alignment
- bullet and numbered lists
- indents (<blockquote>)
save the file as "curriculum.htm" inside the site "/web" directory;
(we will need this file later without tags when formatting using CSS-Styles)
now also add the font properties, choosing:
- font "face" (font category)
- font "size" (absolute or relative - standard is 2 or 3)
- font "color", using the websafe color table, or any RGB color
save the file as "curriculum_font.htm"

Text Formatting using CSS (Cascading Style Sheets)

Formatting text using only the standard HTML tags presents several problems:

Font sizes defined with the tag might look very different on different operating systems and browsers. For example, Windows uses 96 dpi while MacOS and MacOS X use 72 dpi screen resolution.
As a result, fonts defined in "points per inch" look smaller on Mac than they do on PC, and in some cases small fonts defined under Windows might become unreadable under MacOS X.
The tag with all parameters must be repeated for each paragraph and each listing, and also for each new HTML page again. This is a waste of programming time, and a waste of space in the HTML code (therefore longer loading times).
If at a later point we wish to change the appearance of all texts in a website, all tags have to be changed (either per hand or with a "search and replace" function) which is again a waste of time.

A more advanced way to format text is using Cascading Style Sheets. Typical CSS text formatting options are:

It is possible to precisely define the font size in pixel (as well as the distance between fonts, distance between lines etc.), so the displaying is almost identical on all platforms.
It is enough to define once how a specific HTML tag has to be formatted (for example ) and all text within that tag will be formatted the same way, automatically. This saves a lot of programming time, and also saves space in the HTML code (therefore shorter loading times).
One single CSS file can be "linked" to several or all documents in a website (it does not have to waste space in each HTML file).
It is very easy at a later point to change the look of all texts in a website, just by editing the single global CSS file of a website.

CSS can also be used to define the visual properties of any other HTML tag (tables, backgrounds, images, etc.).

There are two ways to integrate a CSS in a document:

applying the CSS formatting directly to the HTML document (it is inserted in the head section)
linking to an external CSS file (you first save the CSS formatting in an external file, then link this file to the HTML document).

To attach an external CSS file to a document you use the command:

<link rel="stylesheet" href="/css/style.css">

where "/css/" is the location of the CSS-style file (here defined as root-relative path), and "style.css" is the filename.
This command must also to be placed inside the head section of the HTML document (inside the <head> </head> tags).
The function in Dreamweaver is called "attach style sheet".

There are three types of CSS formatting:

redefining an existing HTML tag
using the CSS Selector (for Hyperlinks)
creating and applying custom CSS classes.

After creating style sheets with Dreamweaver, it is most convenient to use the "Design > CSS Styles" panel to edit or apply styles (if not visible, open with [Shift+F11]).

Exercise 4.3: format your curriculum.htm file using CSS.

reload your "curriculum.htm" file (the one that has only paragraph and alignment formatting but no specific tags yet)
to switch to CSS mode you can click on the "A" symbol in the Properties box, or you can add/link a new CSS with the contextual menu
choose new CSS style> redefine HTML tag ("neuer CSS-Stil" > Selektor: "HTML Tag neu definieren")
choose an external style sheet (Definieren in: "Neue Stylesheet-Datei"), then click "OK"
(note: the first time you will be asked to save the CSS file; please create a /css/ folder inside your test website, and call the file"style.css")
now you can redefine the tags you used for paragraph formatting (h1, h2, h3 etc. p, ul, li, etc.)
for each redefined tag choose in the Category "Type":
- font "face" (for example the group "Verdana, Arial, Helvetica, sans-serif")
- font "size" (in pixels, not points!). Standard size for paragraph text is 10 to 12 pixels. Titles can be 16, 18, 20 picels or more. Small notes and copyright notice in 8.
- font "color", using either the websafe color table, or any RGB color you like.
  When choosing colors, remember that you need a good contrast between foreground and background, or reading the text might be difficult in poor lighting conditions.
- text decoration (underline, overline, strike-through)
in the Category "List" you can define the type of bullets, spacing between lines, etc.
you can also redefine tags such as body or table to change the visual aspects of your website and formatting elements. You should experiment with the settings in the categories "Background, Border", etc.
you can also use the CSS Selector to define how Hyperlinks appear. You have a separate selector for standard, visited, active links and over (mouseover). Here you can chose if you want links displayed in a different color (or even a different font), to be underlined or not, etc.
finally you can create a Custom CSS Class ("benutzerdefinierten Stil erstellen"). Custom styles are called with a dot ( . ) in front. For example, you could make a style called .red where the additional attribute is only font color="#FF0000", and apply it only to certain parts of the text.

Microtypography

These are not just annoying details, but very important aspects to consider if you want to ensure the best possible readability of your texts:

group numbers, for example 1 405 506 instead of 1405506.
use an international standard for tel. and fax numbers, for example +49 (0) 8651 770212 and not 08651 770212
use correct apostrophes (depending on the language and context).
use correct hyphens (Gedankenstrch / Halbgewiertstrich, Beistrich / Divis, etc.) (- – —)
use the correct spacing: no space before punctuation, no space after parenthesis open, no space before parenthesis close, space before and after the German n-length "Gedankenstrich" ( – ), no space before and after English m-length "Gedankenstrich" (—), etc.
use non breaking spaces to avoid breaking of lines (in Dreamweaver it is created with "shift+Enter", mask:   )
avoid too wide paragraphs, or it is hard to find the next line when reading. Between 350 and 550 pixel width is quite ideal.
use good contrast between text and background colors to improve readability (consider both brightness and hue)
use color combinations for text and background that are not a problem for color-blind people (for example, avoid combinations of greens and reds)

Exercise 4.4: reload your "curriculum.htm" file and make sure every aspect of the text formatting meets all criteria defined above.
Also go through your other texts (projects, contact, etc.) and edit them accordingly (if you want you can also do this in MS Word).

Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5