McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

HTML Tips


Text Formatting

underline tag: <u>

A good practice is to avoid the use of the underline tag <u> because underlines are used for linkson web pages.  Underlines are often used for section headings. A better way to create section headings is listed below.

emphasis tag <em> or italics <i> tag

A good practice in most cases is to avoid the use of emphasis tag <em> or the italics tag <i> because italics render poorly on many monitors and especially when the font is Verdana, which McMaster has chosen as its primary web font.  Italics are great in print media, but not so good for electronic media where you do not have control over the factors that create display. Even if italics look okay on your monitor, they may not provide a good experience on many other monitors, and there are better way to create emphasis, such as bolding or use of classes to render the text in a different color.

How to create section headings and section within a page

A better way to make section headings is to use the h2, h3, h4, ... tags and classes such as class=column_title that provide different colours. Horizontal rules and borders borders may be used to separate sections of content.


Fonts

Web fonts are specified in the brand manual that is available on the Documentation page.  The font-family for all pages has been set in the CSS stylesheet (mcmaster.css file) that goes along with the website templates.  So if you are using the templates or have had your website set up with the templates, you don’t have to do anything to use the right fonts, or rather you should not change the font for any text on your pages.  The required fonts are set globally for the website in the CSS.  If you change the font for a part of the text on a page, then if the font is changed for the website, it won’t be changed for that piece of text, and the purpose of CSS stylesheet is defeated.

Purchased fonts apply mainly to print media.   Since HTML fonts are determined by the PC that downloads the page, all we can do on the web is set font priorities with the san-serif font as the default.  The fonts required by the brand manual are standard fonts that should be available on most computers.  However, you may use purchased fonts for text that is embedded within images.  Be careful when imbedding text within images, especially when the font size is small, because the text tends to become pixilated.  For example, imbedded text may be used for captions under images.  This text may be very pixilated, and when it is changed to use text in HTML, not only will it usually look a lot better, but it will be easier to maintain and format the text.  This is not to say that you may not use text imbedded within images, but you do have to choose the right font, font colour and font size for the background.

Purchased fonts will be distributed when available.

Font Colours

Web-safe Colour Pallette:

Primary Colours
Red #990033
Black #000000
White #FFFFFF
Dark Gray #666666
Secondary Colours
Medium Gray #999999
Light Gray #CCCCCC
Tertiary Colours
Blue #2A3B86
Gold #FFCC33


Font Families

Web-safe Fonts:

Note:Due to font availabilty across operating system platforms, fonts have been designated for web use only. Fonts are used in the order below depending on whether or not a font is available on the client computer. If the first font is not available, then the second will be used. IF the second is not available, then the third will be used. If the third is not available then the default sans-serif font will be used.

1. Verdana Verdana Bold
2. Arial Arial Bold
3. Helvetica Helvetica Bold
Default. sans-serif sans-serif Bold