This lecture notes contain the following:

Font Families

It is important to design a Web page with the right fonts, not only to attract your target audience, but also for readibility. Be aware that if the users viewing your web site does not have the font installed in their computer, they will not be able to see the content of your page.

If a font is not available, the browser uses the default font-- usually Times New Roman --instead. The fonts in the predefined font combinations in Dreamweaver are commonly available fonts in popular operating systems.

Guidelines for choosing fonts are:

There are a few font families you can choose from:

  1. Sans-serif fonts
  2. Serif fonts
  3. Monospace fonts
  4. Fantasy or Cursive fonts

Sans-serif fonts

Sans-serif fonts are those fonts without the little hooks on the end of the letters. These fonts are easy to read by web browsers on computer screens since the resolution is not higher than print. Using sans-serif fonts for your web page is a must.

Examples of sans-serif fonts are:

Serif fonts

Serif fonts are those fonts that have the little hooks on the end of the letters. Even though they are not friendly for web, these fonts are perfect for printing because they allow people to differentiate the latters more clearly and will not appear to blur together on the paper.

Examples of serif fonts are:

Monospace fonts

Monospace fonts are those fonts that have the same width for each character, like a typewriter, so they always take up the same amount of space on the page. You may use these fonts to provide instructions, give examples, or imply typewritten text.

Examples of monospace fonts are:

Fantasy or Cursive fonts

Fantasy and cursive fonts are fonts that are not commonly found or are not understoof by most web browsers and should not be relied upon. They are generally hard to read in a large sections. They are considered preference fonts since you may like the effect of a diary by using a cursive font, your audience may have trouble reading them. Do not use these fonts if you have international target audience. These fonts are limited to English word since they do not always include accent characters or other special characters. You may use these fonts in images and as headlines or call-outs, but be short and do not overuse them.

Examples of fantasy fonts are:

Examples of cursive fonts are:

Read more about Web Safe Fonts combination from W3C Schools.

Instructor Note:
You can create a custom fonts, but beware that there are implications involved in using your own custom fonts, such as cost or making your visitor download certain plug-ins or worse, your visitor cannot even see the beautiful fonts that you have created. You can check out WebINK, a website service that lets you put custom fonts using CSS with a cost. You can also check-out Google Web Fonts.

Here's a beginner's guide to using Google Web Fonts.

 

Font Size Measurement

There are different type of font size measurement you can use to adjust the text for your page. It varies depending on whether you want to control the way your users view your web site or you let your users be more flexible in changing the text on their screen. You need to think about your target audience and how your site will be used before deciding which font measure to use.

Absolute or fixed height font measure

They are not generally good for web pages since your users cannot control how they view the page. Your site will be a fixed size on the paper if you use this font measure.

They are listed as:

Relative font measure

Relative font measure adjust the font size based on the value of another length property. They are the best to use for web pages since your users have the flexibility to adjust the text for readibility since font size can vary depending on the computer screen resolution and the settings.

They are listed as:

Most people prefer points (pt), as they think that they will get a more precise page layout that way and most print designers are familiar with points. However, computers display points differently on a PC or a Mac because of their DPI.

Ems are a measurement based on the height of capital letter "M"; 1em is equal to the height of M in the default font size.

Instructor Note:
Use ems or percentage to provide usability and accessibility preferences for your web site users. If your user have problems seeing and set the browser font size to a higher setting, then your font measurements will be relative to those choices. Do not use points or pixels since they can caused problems for your users. It is important to think about how your site will be used and the audience before you decide on what font measure to use.

Font and basefont tags are deprecated and should not be used. Instead, use css styles to manipulate your font.

Here is a link to help convert your font size.


How do I use em properly?

By default, if users do not change their browser font settings, the font size should be 16px = 1em. Once you know that, use ems to allow your users to resize your site easily but think in pixels for your font size.

Let's try this example to define using pixels and convert it to ems.

Don't forget about CSS Inheritance!

If you have nested elements with different font sizes, your page may end up with a smaller or larger font that what you intended to.

For example:

p {font-size: 0.75em; }
.footnotes {font-size: 0.625em; }

Your paragraph font size will be 12px and footnotes will be 10px. However, if you put a footnote inside a paragraph, the text will be 7.5px rather than 10px. You won't be able to read the text at all at 7.5px. Test it yourself by putting the above CSS and the following HTML into a web page:

<p>This font is 12px or 0.75em in height.</p><br /> <p>This paragraph has a <span class="footnotes">footnote inside it</span></p>
<br />
<p class="footnote">While this is just a footnote paragraph.</p>

Instructor Note:
It is a good thing to use em for your site, but be careful of the sizes of the parent objects, or you'll get really weird sized elements on your page.

Font Color

Colors are represented in HTML by three hexadecimal numbers preceded by the pound (#) sign. For instance, the hexadecimal RGB (red, green, blue) value for a light blue hue is represented as #0099FF, where the value for R is 00, the value for G is 99, and the value for B is FF. If you know the hexadecimal value for a color, you can simply type it in. Color shortcuts (removing repeated values) for #0099FF would be #09F.

Browsers also support a wide variety range of color names in addition to hexadecimal values. For instance, you could type in red instead of #FF0000.

Utilities to identify color values:

Instructor Note:
Eight to Ten Percent of People are Colorblind!
You should check that your color combination is visible to the many people who are colorblind. Use the Colorblind Web Page filter at http://colorfilter.wickline.org/ to check your design. The filter returns a version of your web page displayed as it would look to someone who is colorblind.