Using CSS to control visual presentation of text

When to Use

All technologies that support CSS.

Description

The objective of this technique is to demonstrate how CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement.

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the markup in their content, making it more accessible at the same time.

Text within images has several accessibility problems, including the inability to:

• be scaled according to settings in the browser
• be displayed in colors specified by settings in the browser or rules in user-defined style sheets
• honor operating system settings, such as high contrast

It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.

The following CSS properties are useful to style text and avoid the need for text in images:

• The font-family property is used to display the code aspect in a monospace font family.
• The text-align property is used to display the text to the right of the viewport.
• The font-size property is used to display the text in a larger size.
• The font-style property is used to display text in italics.
• The font-weight property is used to set how thick or thin characters in text should be displayed.
• The color property is used to display the color of text or text containers.
• The line-height property is used to display the line height for a block of text.
• The text-transform property is used to control the case of letters in text.
• The letter-spacing property is used to control the spacing of letters in text.
• The background-image property can be used to display text on a non-text background.
• The ::first-line pseudo-element can be used to modify the presentation of the first line in a block of text.
• The ::first-letter pseudo-element can be used to modify the presentation of the first letter in a block of text.
• The ::before and ::after pseudo-elements can be used to insert decorative non-text content before or after blocks of text.

Examples

<p>The JavaScript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

code { font-family:"Courier New", Courier, monospace }

<p class="right">This text should be to the right of the viewport.</p>

.right { text-align: right; }

<p>09 <strong class="largersize">March</strong> 2008</p>

strong.largersize { font-size: 1.5em; }

<p>09 <em class="highlight">March</em> 2008</p>

.highlight{ color: red; }

<p>The article is available in the
  <a href="https://www.example.com" class="featuredsite">Endocrinology Blog</a>.
</p>

.featuredsite{ font-style:italic; }

<p>This deal is available <span class="highlight">now!</span></p>

.highlight { font-weight:bold; color:#990000; }

<p>09 <span class="caps">March</span> 2008</p>

.caps { text-transform:uppercase; }

<p>Concern for man and his fate must always form the chief interest of all technical 
endeavors. Never forget this in the  midst of your diagrams and equations.</p>

p { line-height:2; }

<h1 class="overlap"><span class="upper">News</span>
  <span class="byline">today</span>
</h1>

.overlap { line-height:0.2;}
.upper { text-transform:uppercase; }
.byline {
  color:red;
  font-style:italic;
  font-weight:bold;
  padding-left:3em;
}

<h1 class="overlap"><span class="upper">News</span><br>
  <span class="byline">today</span>
</h1>

.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline {
  color:red;
  font-style:italic;
  font-weight:bold;
  padding-left:3em;
  letter-spacing:-0.1em;
}

<h1 class="upper2">News</h1>

.upper2 { text-transform:uppercase; letter-spacing:1em; }

<div id="banner"><span id="bannerstyle1">Welcome</span> 
  <span id="bannerstyle2">to your local city council</span>
</div>

#banner { 
  color:white; 
  background-image:url(banner-bg.gif); 
  background-repeat:no-repeat; 
  background-color:#003399; 
  width:29em; 
}

#bannerstyle1 { 
  text-transform:uppercase; 
  font-weight:bold; 
  font-size:2.5em;
}

#bannerstyle2 { 
  font-style:italic; 
  font-weight:bold; 
  letter-spacing:-0.1em;
  font-size:1.5em; 
}

<p class="startline">Once upon a time...<br />
  ...in a land far, far away...</p>

.startline::first-line { font-size:2em; color:#990000; }

<p class="startletter">Once upon a time...</p>

.startletter::first-letter { font-size:2em; color:#990000; vertical-align:middle; }

Tests

Related Techniques

• C8
• C12
• C13
• C14
• C21
• SCR34

Resources

• CSS2.1 Specification
• CSS Fonts Module Level 3
• CSS Color Module Level 4
• CSS Text Module Level 3
• CSS Backgrounds and Borders Module Level 3
• Selectors Level 3
• Learning CSS
• CSS and Accessibility