Skip to Content Skip to Navigation

User Experience Toolkit

Typography

Examples of default styling of HTML text elements

Text Styles

Example:

Basic Text Style!

HTML:
	<p>Basic Text Style!</p>

Bulleted Lists

Example:
  • level 1
  • level 1
    • level 2
    • level 2
    • level 2
    • level 2
      • level 3
    • level 2
    • level 2
  • level 1
HTML:
	<ul>
		<li>level 1</li>
		<li>level 1
			<ul>
			<li>level 2</li>
			<li>level 2</li>
			<li>level 2</li>
			<li>level 2
				<ul>
					<li>level 3</li>
				</ul>
			</li>
			<li>level 2</li>
			<li>level 2</li>
			</ul>
		</li>
		<li>level 1
		</li>
	</ul>

Lists can be nested inside each other to represent hierarchical content.

Number Lists

Example:
  1. point 1
  2. point 2
    1. 2-1
    2. 2-2
      1. 2-2-1
      2. 2-2-2
  3. point 3
    1. 3-1
  4. point 4
HTML:
	<ol>
		<li>point 1</li>
		<li>point 2
			<ol>
				<li>2-1</li>
				<li>2-2
					<ol>
						<li>2-2-1</li>
						<li>2-2-2</li>
					</ol>
				</li>
			</ol>
		</li>
		<li>point 3
			<ol>
				<li>3-1</li>
			</ol>
		</li>
		<li>point 4</li>
	</ol>

Numbered lists will be displayed in decimal format by default.

Hyperlinks

Example:

Click Me

HTML:
	<p><a href="#">Click Me</a></p>

Default styles are defined for active, visited, on-hover and disabled hyperlinks. Inline elements (a, span, etc) should be inside a block level element to ensure proper spacing between elements and within containers (the anchor above was wrapped in a 'p' tag).

Strong Block Style

Example:

Cowboy coding is the absence of a defined method: team members do whatever they feel is right. Agile development's frequent re-evaluation of plans, emphasis on face-to-face communication, and relatively sparse use of documents sometimes causes people to confuse it with cowboy coding. Agile teams, however, do follow defined (and often very disciplined and rigorous) processes.

HTML:
<p class="ux-strong">
	... Content ...
</p>

The ux-strong class can be used for a block of text that is not a message but needs to be made more prominent.

  • The <strong> HTML element can still be used inline, ux-strong is similar, but at a block level.
  • Use ux-strong sparingly. If too much text is emphasized - it can have the opposite effect.

"Weak" (footnote) Style

Example:

This is a footnote - full of sound and fury, signifying nothing.

HTML:
<p class="ux-weak">
	... Content ...
</p>

The ux-weak class can be used for supporting information that is similar to a footnote - for reference. Information that every user should read should not be put into this area.

Sub-Headers

Example:

Sub-Headers For when any single descriptive line of text is just not enough

HTML:
	<h3>
		Sub-Headers
		<span class="ux-header-subtitle">
		For when and single descriptive line of text is just not enough!
		</span>
	</h3>

Sub-headers are a good way to break long headers down into smaller bits. While it is encouraged to make descriptive headers, it is also important to ensure that headers are short and to the point. When headers start to get excessively long (more than 5-6 words) consider putting additional descriptive text in a sub header. It will still classify as part of the header semantically (SEO benefits) but will be displayed as a tagline.

Block Quotes

Example:
Why Sketch, Wireframe and Prototype? If Ernest Hemingway, James Mitchener, Neil Simon, Frank Lloyd Wright, and Pablo Picasso could not get it right the first time, what makes you think that you will?
HTML:
<blockquote>
	... Content ...
</blockquote>

Pull Quotes

Example:
The joy of an early release lasts but a short time. The bitterness of an unusable system lasts for years.

"Yes," answered the tin man, "I did. I've been groaning for more than a year, and no one has ever heard me before or come to help me." "What can I do for you?" she inquired softly, for she was moved by the sad voice in which the man spoke. "Get an oil-can and oil my joints," he answered. "They are rusted so badly that I cannot move them at all; if I am well oiled I shall soon be all right again. You will find an oil-can on a shelf in my cottage." Dorothy at once ran back to the cottage and found the oil-can, and then she returned and asked anxiously, "Where are your joints?" "Oil my neck, first," replied the Tin Woodman. So she oiled it, and as it was quite badly rusted the Scarecrow took hold of the tin head and moved it gently from side to side until it worked freely, and then the man could turn it himself. "Now oil the joints in my arms," he said. And Dorothy oiled them and the Scarecrow bent them carefully until they were quite free from rust and as good as new.

HTML:
<blockquote class="ux-pullquote">
	... Content ...
</blockquote>
<p>
	... Content ...
</p>

Indented Paragraphs

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla nibh quis enim sagittis, et fringilla est mattis. Nam cursus euismod enim vitae laoreet. Phasellus consectetur et tortor in tristique. Pellentesque tincidunt sapien ante, id sodales mauris suscipit sed. Etiam eget erat et lectus volutpat consectetur. Maecenas bibendum imperdiet malesuada. Curabitur suscipit at nunc in mollis. Pellentesque malesuada dui id dui lacinia, non luctus leo tincidunt. Cras sit amet aliquam lacus. Suspendisse potenti. Cras a nulla elit. Pellentesque et aliquam turpis. Vivamus ac varius ante. Nulla vitae feugiat sapien, eu ornare elit. Ut et erat eget sapien bibendum egestas sed id nibh

Ut varius laoreet turpis nec viverra. Nam sed lacinia massa, in luctus eros. Nulla ultricies eget sem nec auctor. Aenean sodales eget lorem mollis ornare. Aenean nec leo vel odio bibendum ultrices in ut turpis. Nunc vitae erat vitae magna venenatis auctor. Mauris vulputate posuere pretium. Nulla facilisi. Fusce eget elit lobortis, eleifend enim egestas, pellentesque nibh

In hac habitasse platea dictumst. In nec justo enim. Nullam placerat semper dui fermentum euismod. Praesent porttitor congue ante a dictum. Duis eget ultrices odio. Curabitur vel lacus sollicitudin, malesuada velit sed, molestie tortor. Integer laoreet, nisi a vestibulum sagittis, ante urna adipiscing ipsum, at tincidunt massa purus sed urna. Nam facilisis non nisi in molestie.

HTML:
<p>
	... Content ...
</p>
<p class="indented">
	... Content ...
</p>
<p>
	... Content ...
</p>

Thanks for the feedback! It will help us improve your experience.