Typography
Typography is an integral part of web design. In this section showcased are the standard default typography elements for content authoring. Also included are specific styles for pull quotes and list points.
Breaking up content into easy to read chunks of text helps improve the readability of page of content. For text heavy content pages, making use of the appropriate heading levels < h2 >,< h3 >, dividers, bullet points and pull quotes patterns can greatly improve the page structure.
- - -
Default HTML Styles
Standard default suite of styling for generic html content elements including headings and body content.
Heading Styles
All pages except for the homepage of your website should have a H1 for the page title.
The general layout would be a H1, then either the intro paragraph, or just a plain paragraph then your H2's and H3's etc.
Page Title Should Be H1
Sub-title Should Be H2
Content Title Using H3
Content Title Using H4
Content Title Using H5
Content Title Using H6
Sub-title H2 (linked)
Content Title H3 (Linked)
Content Title H4 (Linked)
Content Title H5 (Linked)
Content Title H6 (Linked)
- - -
Body Content
Introductory Paragraph
The University of Adelaide has five areas which offer tours of its campuses and the National Wine Centre. Whether you're a history buff or a wine-lover, tourist or prospective student, between these five precincts the University has a tour to best suit your needs.
- - -
Paragraph
The below pattern shows how paragraph text will look.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
- - -
Hyperlinks
By default, both internal and external links are to open in the same window. However, there are a few occaisons where it is appropriate for an internal link or external link to open in a new window.
If unsure which link is appropriate for use, please contact the Web Team for further assistance.
The below patterns show how text hyperlinks will look.
Internal Link
No icon is required when linking to a University of Adelaide website URL/ Uni blog URL.
For more information, visit Study at Adelaide.
- - -
External Link
The icon in the pattern below is to be used when linking to an external website (e.g. for links that are not University of Adelaide website URLs/ Uni blog URLs).
- - -
External Link in New Window
The icon in the pattern below is to be used when linking to an external website, and opening the site in a new window.
The South Australian Research Capability Directory 
- - -
Captions
Generally used for things like 'image courtesy of...' or additional information within forms or content. This should not be used in place of general paragraph text and should only be used for small sections of text.
Paragraph
Paragraphs have extra space (a margin) below them. This should be used as the default caption pattern.
Quis autem vel eum iure reprehenderit.
Span
Spans don't have the extra margin at the bottom like a paragraph does. The span pattern is only to be used when the paragraph margin/spacing is causing issues.
Quis autem vel eum iure reprehenderit.
- - -
List Styles
Unordered Lists
- Perspiciatis unde omnis iste
- Voluptatem accusantium doloremque
- Aperiam totem natus
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Totem natus omnis
- Accusantium doloremque omnis
- Iste perspiciatis omnis
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Voluptatem accusantium doloremque
- Accusantium doloremque omnis
- - -
Ordered Lists
- Perspiciatis unde omnis iste
- Voluptatem accusantium doloremque
- Aperiam totem natus
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Totem natus omnis
- Accusantium doloremque omnis
- Iste perspiciatis omnis
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Voluptatem accusantium doloremque
- Accusantium doloremque omnis
- - -
Ordered List with Decimals for Sub-item
- Perspiciatis unde omnis iste
- Voluptatem accusantium doloremque
- Aperiam totem natus
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Totem natus omnis
- Accusantium doloremque omnis
- Iste perspiciatis omnis
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Voluptatem accusantium doloremque
- Accusantium doloremque omnis
- - -
Ordered List with Alphabetised Items
- Perspiciatis unde omnis iste
- Voluptatem accusantium doloremque
- Aperiam totem natus
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Totem natus omnis
- Accusantium doloremque omnis
- Iste perspiciatis omnis
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Voluptatem accusantium doloremque
- Accusantium doloremque omnis
- - -
Ordered List with All Sub-items Alphabetised
- Perspiciatis unde omnis iste
- Voluptatem accusantium doloremque
- Aperiam totem natus
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Totem natus omnis
- Accusantium doloremque omnis
- Iste perspiciatis omnis
- Accusantium doloremque omnis
- Iste Perspiciatis omnis
- Voluptatem accusantium doloremque
- Accusantium doloremque omnis
- - -
Pull Quote
The below pull quote patterns can be altered if you need to change the width of them at all. Just change the grid number depending on how wide you want the quote to be. A full content zone will be a grid_16, a content zone with a widget will be a grid_12, the general size though is a grid_10.
Basic Pull Quote
“ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. ” John Smith, some guy from somewhere.
- - -
Pull Quote (Smaller Text)
“Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.” John Smith, some guy from somewhere.
- - -
Pull Quote (plain formatting, flush with general content)
John Smith stated this... :
"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur."
- - -
Pull Quote - Full Width
Large Font
“ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. ” John Smith, some guy from somewhere.
- - -
Small Font
“Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.” John Smith, some guy from somewhere.
- - -
Page Quotes and Floating Images/Widgets
If you have a floating widget on the page or graphic you want placed to the right of the quote please use the below pattern. Alternatively, just change the grid size (you may need to decrease it) in order to get it to sit nicely to the left of the graphic/widget. If you want this pattern to use the smaller quote text just add the 'smallquote' class to the initial wrapping div.
“ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. ” John Smith, some guy from somewhere.
- - -
Quotes in Widgets
#Insert Title...
"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur." John Smith, some guy from somewhere.
- - -
Featured Content
This pattern is to be used when you may not necessarily want to highlight a quote, rather you want to highlight a certain section within the body of the page. For example, a graduate's story, important contact details, a recent update etc.
Insert Title Here
Insert Title Here
Insert Title Here
Depending on where the feature text sits within the page, please use whichever heading type is appropriate, in most cases you will use h3, h4, or h5 however all are supported.
