A Guide to Font Formatting Using CSS

Follow this link for a PDF version of this page.

We have developed separate styles for each of the standard page elements, including page titles, headers, etc.

This tutorial will describe where each element should be used, and what function it serves. Each element will be listed with its respective CSS style. Please see the tutorial on applying CSS styles for instructions on implementation.

Keep in mind that each of your sites adheres to a particular palette. Sites within Education are orange. Research sites are teal and Patient Care sites are blue.

• General Guidelines
• Illustration of Common Elements
• Site Title
• Header
• Subheader
• Content
• Important
• Right Nav
• Table Text
• Table Header
• Small Table Header
• Small Text

General Guidelines

• Do not use font formatting. Use only those CSS styles provided in the templates, do not use any special fonts or styles. Please remove any font formatting which may remain on your pages from the old SOM website.
• Use the correct classes in page titles, topic headings and in table headings.
• Do not use ALL CAPS.
• Avoid italics except for short direct quotations and in bibliographic references.
• Do not underline text for emphasis. On the web, underlining denotes a link, so please do not use it for other purposes.
• Do not use large blocks of bold and/or red text. Use bold text sparingly.
• Do not justify text. Leave it on the default (left) alignment.
  

Illustration of Common Elements

Note that the site title, headers and sub headers are always left (default) aligned.

Site Title: This text type/class is used for the title of each page.

 

CSS Style(s):	SITETITLEorange
	SITETITLEblue
	SITETITLEteal

Header: Individual headlines within the page itself. This text calls out the major focus of a page/section. The header should be used sparingly on a page to identify major changes of content or tone.

 

CSS Style(s):	HEADERorange
	HEADERblue
	HEADERteal

Sub-Header: Used more freely, the sub-header identifies sub-sections or headlines individual paragraphs in longer features and articles.

 

CSS Style(s):

SUBHEADER

Content Text: The primary text style for content within a page.

Note that the text within your content areas should be displayed correctly by default. You should not have to apply a style to the text in your content area. If you find that the text displays incorrectly, either apply the content text style, or select 'none' for the style.

 

CSS Style(s):	CONTENTTEXT
	<none>

Important: Use this to highlight important areas of text.

Please do not use this for entire blocks of text. Simply use it to call attention to the text in question, as we have done here. Note that we have not applied this style to the whole description. In applying it to the first word only, we draw attention to its importance without marring the page design, or overwhelming the user.

 

CSS Style(s):

Important

Right Nav: You will apply this style to elements in your RightHandNav/See Also table if the default formatting is somehow lost. You will also apply it to links in the See Also table if the formatting is lost.

ex:

Right Nav Right Nav

Table Text: For use inside of tables. This is very similar to the above smalltext style, however it is intended specifically for text within small or crowded tables.

ex:

Header
Table Text	Table Text
Table Text	Table Text

Note: These preformatted tables and many others are available to you in your libraries located in the templates folder.

Table Header: You will use this class rarely, if at all. It will create a bold white header which will stand out against colored backgrounds.

ex:

Small Table Header: Similar to the Table Header class, you will use this class rarely, if at all. It will create a smaller bold white header which will stand out against colored backgrounds.

ex:

Small Text: For such items as copyright information, captions under photos, etc. If your smalltext copy contains a link, you will need to apply the style to the link as well.

 

CSS Style(s):

SMALLTEXT

Follow this link for a PDF version of this page.