![]()
Fonts & Colors
SMU's template uses a Cascading Style Sheet (CSS), which is basically a set of "styles" that are referred to by documents that use the template. These styles control everything from the placement of template elements on the page to background colors and sizes/typefaces of the fonts that are used in the different sections. SMU Web site maintainers no longer need worry about specifying font faces, colors, and sizes on their pages; this is all controlled automatically by the style sheet.
SMU has chosen a set of specific colors and fonts that are aesthetically pleasing as well as easy to read onscreen. They are described in detail below.
Fonts
The
chosen typeface for the SMU template is Arial, and the default size for
body text is "small," which translates to approximately
10 pixels high on most computer screens using default settings. The template
uses relative sizes (small, medium, large, and percentages of those) rather
than absolute sizes (set to a certain number of pixels) in order to comply
with Federal Section 508 guidelines.
Headings (the <H1> through <H4> tags) are set to different percentages of body text size, and also display in gray Arial. Read more about headings and see examples here.
Arial is universally available on almost all computers. If a user's computer does not have Arial, the stylesheet specifies Helvetica as the second choice, and if Helvetica is not available, then a default sans-serif font is substituted.
Because users can customize their Web browsers, the actual font face and size that displays on any given computer may differ. However, the default browser setting is to let web pages use their own fonts and sizes, and most users do not choose to override this option.
Colors
Below are swatches of the colors that SMU uses in the template, along with their corresponding hexadecimal color codes and the areas of the template where they are used.
#444444 |
• Body text and breadcrumb color | • Heading
sizes H1 - H4 |
|
#000000 |
• Links in Zone 2A |
#0000CC |
• Links in Zone 2B and Zone 8 |
#FF0000 |
• Link
hover color for Zone 2B and Zone 8 • Breadcrumb color for current page |
![]() #CC0000 |
• Visited link color in Zone 2B and Zone 8 |
#F0E9CD |
• Background color for Zone 2A | #FFFFFF |
• Background color for Zone 2B and Zone 8 |
#003399 |
• Background
color behind SMU seal • Text color for department ID bar |

#444444
#000000
#0000CC
#FF0000
#F0E9CD
#FFFFFF
#003399