This document outlines the main typographic styles used on the OHSU web sites.

Body or baseline style

The body tag wraps all other displayed elements on the page. Setting type styles on the body tag gives us a baseline style for all text (including headings, paragraphs and lists). The percentage font size forces browsers to share a similar baseline and therefore ensures that tags have a consistent appearance on all browsers.

body {
font: 76%/130% Arial, Helvetica, Verdana, sans-serif;
color:#333;
}

Landing page: Heading level 1

Landing page <H1>

These styles apply only to level one headings appearing on the main landing page. There are several styles cascaded on top of each other here; rules which are overridden are omitted for brevity.

.interior #content #leader h1 {
font-size: 3em;
line-height: 1;
}

.interior #content #leader h1 {
text-transform: none;
}

.interior #content h1 {
font-weight: normal;
}

h1 { color: #225b95; }

Interior page: Heading level 1

Interior page <H1>

These styles apply only to level one headings appearing on interior pages. Note the first selector which specifies contexts to apply the line-height rule; for example, this guide page does not recieve the line-space rule.

.interior #content .main h1,
.static #content h1,
.finda #content h1 {
line-height: 90%;
}

.interior #content h1 {
font-size: 1.9em;
font-weight: normal;
text-transform: uppercase;
}

h1 { color: #225b95; }

Heading level 2

This is a level two heading (<H2>)

This is the level two heading used throughout the site.

.interior #content h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
}

h2 { color: #225b95; }

Heading level 3

This is a level three heading (<h3>)

This is the level three heading used throughout the site.

.interior #content h3 {
color:#000000;
font-size: 110%;
font-weight: normal;
text-transform: uppercase;
}

Left navigation: Heading level 4

This is a level four navigation heading (<h4>)

Level four headings appear only in the left navigation and right column. They are not styled for use in the main content.

.subnav h4 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
}

h4 { color: #225b95; }

Right column: Heading level 4

This is a level four right column heading (<h4>)

Level four headings appear only in the left navigation and right column. They are not styled for use in the main content.

.details h4 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
}

h4 { color: #225b95; }

Paragraphs

<p> ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ut ante ac ante venenatis sollicitudin. Morbi fringilla tristique nisl. Morbi commodo, quam et dictum accumsan, leo nibh vulputate nibh, non porta libero odio scelerisque est. Praesent vitae magna in est laoreet elementum.</p>

Paragraphs carry a bare minimum of styling. Only the line height is set; the color (#333333), font-face and size are set in the body selector.

p { line-height: 1.2; }

Unordered lists

• <li>item one</li>
• item two
• item three

Lists also have only moderate styling. The bullets are replaced but there is no typography because color and font-size are set on the body.

ul { list-style-image: url(../images/bullet_point.gif); }

News item lists

06/19

New Milestone In Doernbecher Stem Cells Trial

06/05

When Doctors, Patients Disagree, It Affects Survival

News items are constructed using dictionary lists (<dl>); please note the format in the code example below. It is not necessary to wrap individual news items in seperate lists.

HTML:
<div id="newsandevents">
<dl>
<dt>06/19</dt>
<dd><a target="_blank" href="http://www.ohsu.edu/ohsuedu/newspub/061907stemcells.cfm">
New Milestone In Doernbecher Stem Cells Trial</a></dd>
<dt>06/05</dt>
<dd><a target="_blank" href="http://www.ohsu.edu/ohsuedu/newspub/060507disagree.cfm">
When Doctors, Patients Disagree, It Affects Survival</a></dd>
</dl>
</div>

CSS:
#newsandevents dl{ clear: right; }
#newsandevents dt{
color: #666666;
display: block;
float: left;
font-weight: normal;
width: 3em;
}

#newsandevents dd{ margin: 0 0 8px 47px; }

Hyperlinks

This is a hyperlink (<a>)

a:link, a:visited {
color:#a65c2f;
text-decoration:none;
}

a:hover, a:active {
color: #00000;
text-decoration: underline;
}

"More" style hyperlinks

This is a "more" hyperlink (<a class="more">)

A link followed by the arrow icon. Hyperlink styles apply with a class of "more" adding the arrow. Can also be applied to a container (such as a <p> or <ul>) to style multiple links or to help layout a single link.

a.more, .more a {
background: transparent url(../images/bg_arrow.gif) 100% 3px no-repeat;
padding: 0 16px 0 0;
}

a:link, a:visited {
color:#a65c2f;
text-decoration:none;
}

a:hover, a:active {
color: #00000;
text-decoration: underline;
}

Left Navigation hyperlinks

This is a left navigation hyperlink (<a class="arrow">)

A link preceded by the arrow icon; intended only for use in the left navigation. <ul> tags in the left navigation will automatically style in this way; this style gives flexibility if it becomes necessary to style a link in the left navigation without it being in a <ul>.

a.arrow {
background: transparent url(../images/bg_arrow.gif) 0 3px no-repeat;
padding: 0 0 0 20px;
}

a:link, a:visited {
color:#a65c2f;
text-decoration:none;
}

a:hover, a:active {
color: #00000;
text-decoration: underline;
}