Menu

Jump to Section:
Fonts and Typography
Colors
Images
Video Optimization
Writing for the Web
Social Media
Academic Departments

 



Related Links at Southwestern:

Information Services
Creative Services Office
Web Office
Southwestern Univ. Style Guide (pdf)
Web Feedback Form

View CSS file:

southwestern.css

Graphics (Photoshop PSD):

Office Header
Photo Column
Section Header (Bars)
Section Header
Subsite Header (2 line)
Photoshop Swatches file

Logos & Insignia (Illustrator EPS):

University Wordmark
University Wordmark (Stacked)
Branding Statement (stacked - black)
Branding Statement (stacked)
Sarofim School of Fine Arts Logo
Campaign Logo
Mascot Insignia (Athletics)
Mascot Insignia (Pirates)

Fonts:

ITC Galliard (PC compatible)
ITC Galliard (Mac compatible)
Gotham (PC compatible)
Gotham (Mac compatible)




Sidebar Recommendations:

Page sidebars should be reserved for content that supplements the main area of the page. At the very least, this might include related links or available document downloads - and at best, can include rotating stories, quotes, testimonials, or images that help to explain and bring life to the main content area.

On pages where the sidebar is used for navigation, only very pertinent information (such as contact info or deadlines) should be added. This additional information should always be placed below any navigational elements.




Contacts:

John Kotarski, Director for Web Development and Communications
512-863-1479 office


Southwestern


Graphic Standards and Web Style Guide



Standards exist to bring unity of expression to the many pages of a Web site, each with its own audience, agenda and author.

This document presents the styles and guidelines for use on the Southwestern Web site. Here are five things to keep in mind: Fonts and Typography, Colors, Images, Writing for the Web, and Academic Departments.



Fonts and Typography

Web fonts require multiple specifications, as not all browsers have all fonts installed. All of our new website templates (as of March 2013) use Adobe TypeKit for font display. Otherwise, we're recommending the following set of basic fonts for use on your site:

  • Georgia or default serif font (non-bolded) for subheads and sidebar titles
  • Helvetica, Arial, or default sans-serif (usually bolded) for navigation, tactical links, and dates
  • Helvetica, Arial, or default sans-serif font for body text

In the main body of the page, links are underlined only on mouseover and set in a color from the approved palette, usually matching the section header.


An even smaller sans-serif, with extended letter spacing for readability, can be used for fine print, labels on form fields, etc.


Text Styles:

Header 2

Header 2 should be used for page subheads and occasionally, for oversize headlines.

Header 3

Header 3 should be used for Gateways, contact info, and sidebar headers.

Header 4

Header 4 should be used for section titles and can change color depending on top-level header color.

Header 5

Header 5 etc. etc. etc.

Header 6

Header 6, both regular and bold weight, can be used for photo captions, citations, or other "helper" text.


Our goal is to provide a flexible set of standards that will work across a diverse, creatively distinct set of Southwestern pages. In the new southwestern.edu design we have defined elements that are negotiable and ones that aren't. We think that the elements that can differ on a site-to-site basis include the following:

  • Accent colors. The basic color palette of the site will remain fixed across most if not all site pages. If a light background color is used (such as the one featured here), that will be a global value. But individual offices, departments, and programs should be free to make a selection of secondary colors that meet their needs (or simply suit their tastes). All individual color selections should remain consistent across the sites on which they're used.
  • Inline headers like this one, as well as pull quotes, bulleted lists, and subheadings can help your reader find the information she is seeking.

 


 

Primary Colors
#505050
Cool Gray 10
#ffcc33
PMS 128 c
#000000
PMS Black c
#983620
PMS 7516 c

Secondary Colors
#ffff99
PMS 601 c
#577bab
PMS 652 c
#b90009
PMS 180 c
#61731f
PMS 7491 c

Section Colors
#983620
News
#00434F
Blue Dark
#577BAB
Admission
#516073
About

#487BB3
Paideia
#FFE37C
Yellow Pale
#FFC702
Athletics
#B8B494
Kahki

#88AA22
Student Life
#61731F
Visit
#A19E57
Giving
#8C8C8C
Gray Med.
#333333
Gray Dark
#8E8E8E
Financial Aid
#666644
Academics
#5A3C18
Brown

Notes on Web Colors

Your results may vary: Web color is a famously unstable area of human endeavor, involving a perfect storm of monitor calibrations, Web browsers, and computing platforms, and there's no guarantee you'll see the same colors here as anyone else. We have looked at this palette on a fairly wide range of setups.

 


 

Images

By default, images don't have borders (even when linked). With only the tiniest of potential exceptions, drop shadows should not be used for photographs.


The photos used on the site should be color-corrected; basic instructions for color-correcting a photo (using Photoshop or free tools for the Mac and PC) should be made available to the community of content managers.


A Photoshop template of the correct sidebar dimensions has also been provided.


 


 

Optimized Video Export Settings for SU Web site

Video sharing services like YouTube and Vimeo have made it easy to show your moving images to the world. Southwestern maintains a video channel on YouTube, while using Vimeo to embed video within the Southwestern University web site. While each of these services have optimization specifications on their respective websites (here and here), we generally find that these video settings work well for both services.

  • 1280 x 720 resolution
  • H.264 codec/AAC audio codec
  • 5000kbps oab rate
  • 30fps/30 keyframe
  • 44.100 kHz/128 kbps audio
  • deinterlace if possible

 


 

Writing for the Web

Each section homepage (About Southwestern, Admission, Student Life, etc.) should include approximately two short opening paragraphs of text that, together, "tell the story of SU" and individually introduce that area of content and highlight key pages within each section. The first paragraph should be primarily "marketing"-style content, a well-written introduction to that section's concerns; the second should include links to the various site pages of importance, in paragraph form. (Most of these links will be redundant to the section's navigation, but will give it more context and make information more accessible.) It's important to keep these short, so the more dynamic info can be read quickly and easily.

Here are six things to keep in mind:

1. Be concise.

Keep word counts low, especially on top-level pages that should be telling the story rather than conveying lots of detailed information. Most basic informational pages ought to be no longer than 400-500 words, and top-level pages should aim for between 200-300 words.

2. Use an opening paragraph to summarize page content.

Flipping through the site, any visitor should be able to quickly absorb the most important information on the page to determine whether she needs to take the time to read the entire page.

On primary public-facing pages (that is, all pages one click away from the home page), the text should be written specifically with a first-time visitor in mind. Opening paragraphs of other pages can simply summarize and/or contextualize the page's content. We typically set the opening paragraph in larger font size to draw attention to it and make it easy to read.

3. Be conversational, but not clever.

The use of contractions (it's, we're, you'll, etc.) is encouraged. Some of the rules that are applied to formal writing don't apply as strictly to Web writing. For example, if the natural rhythm of a sentence is best suited by ending it with a preposition, so be it.

One of the best ways to check the style of Web writing is to read it to yourself out loud. If it sounds natural, it's likely to be good.

4. Make use of meaningful subheadings to guide a reader through the page content.

Along with short paragraphs, breaking up a page with subheadings allows a Web reader to quickly determine what information is most important for her needs. This is a good general principle for all content pages of a site; for long, policies-and-procedures-type pages, it's absolutely essential.

As a general rule, there ought to be a subheading for every 150-200 words of Web content. And top-level pages often benefit from a much more widespread use of headings and subheadings. Many good top-level pages pair small subheadings with short paragraphs to give a visitor a very clear idea of what's to be found throughout that section of the site. Organize your text so that the hierarchy is no deeper than four levels. Lower-level heads are hard to distinguish and disorienting to online readers.

'Overuse white space' is a good rule of thumb for Web writing. Reading from computer screens is on average 25% slower than from paper, so short paragraphs and frequent subheadings give users more room to read.

5. Use your text formatting, like bulleted lists, pull quotes, and paragraph breaks, to quickly convey information.

On most basic content pages there shouldn't be more than one or two bulleted or numbered lists. If you have a page that is burdened with lots of lists, you may want to consider alternative ways of presenting that content. (This section of this document, in which numbered points are followed by explanatory paragraphs, is one possible example.)

6. The text should guide readers around the site.

Links within the text are important means of limiting duplicate information and directing visitors to key content within the site. On section homepages these links should complement the navigation as a secondary means of directing readers to section sub-pages. Links to external sites are ok, but should be carefully considered and not overused. Be judicious: Too many links within a paragraph also diminishes their effectiveness as content guides.


Southwestern style and tone: There should be general consistency of voice across all top-level site text. This voice should be strong and guiding. The tone of top-level text should be smart, knowing, engaging, direct and sometimes witty - getting across that this is a rigorous academic environment is important. We suggest that the language on the site consistently addresses the audience more directly: Use "you," "us," "we," etc., while not being too chatty or informal. In general, we recommend using first-person accounts as much as possible while remaining within your comfort zone.

Recommended reading:

And some more good stuff:

  • Writing Style for Print vs. Web - Linear vs. non-linear. Author-driven vs. reader-driven. Storytelling vs. ruthless pursuit of actionable content. Anecdotal examples vs. comprehensive data. Sentences vs. fragments.
  • Blah-Blah Text: Keep, Cut, or Kill? - Introductory text on Web pages is usually too long, so users skip it. But short intros can increase usability by explaining the remaining content's purpose.
  • World's Best Headlines: BBC News - Precise communication in a handful of words? The editors at BBC News achieve it every day, offering remarkable headline usability.
  • Passive Voice Is Redeemed For Web Headings - Active voice is best for most Web content, but using passive voice can let you front-load important keywords in headings, blurbs, and lead sentences. This enhances scannability and thus SEO effectiveness.
  • How Little Do Users Read? - On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.
  • How Users Read on the Web - They don't.
  • F-Shaped Pattern For Reading Web Content - Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
  • Mobile Content: If in Doubt, Leave It Out - Writing for mobile readers requires even harsher editing than writing for the Web. Mobile use implies less patience for filler copy.

 


 

Social Media

Social media refers to online tools that people use to connect with one another, including social networks. These services allow users to create and publish content about themselves and their organizations. The social aspect of these tools lies in the ability for individuals to interact and connect with others, thereby building online communities.

Southwestern University’s social media is managed by the Office of University Relations. Danielle Stapleton ‘05, associate director of new media, has drafted social media guidelines which you can read more about by browsing Getting Started with Social Media. To see all of the organizations/departments that have pages/groups, you should also check out Southwestern's Social Media Directory.

 


 

Social Media Icons

When the SU website was redesigned in Spring 2013, White Whale Web Services provided us with a set of social media icons for use on the Southwestern website. These hand-sketched icons are a matching set and using them insures uniformity in linking to external social media throughout the site.


FACEBOOK

FLICKR

INSTAGRAM

LINKEDIN

PINTEREST

TUMBLR

TWITTER

VIMEO

VINE

YOUTUBE

You may download specific icon by right-clicking the icons you need and saving to your hard drive. Or you may download a complete set in a ZIP file.

Further, our 2013 redesign has made it very easy for academic departments to link to their social media properties by creating blurbs within your LiveWhale groups. For instructions and a demonstration, please contact the Web Office.

 


 

Academic Departments

Academic department homepages are a crucial source of information for prospective students.  As with the other top-level, high-visibility areas of the site, departmental homepages are key recruiting tools for the institution.  This means that their content needs to be presented in a way that acknowledges prospects as a primary audience.  At the same time, academic department sites in their entirety are well-used tools for communication within departments, between faculty and students, and outside departments, among faculty of different institutions.


Department homepage recommendations: The homepage content must be the introduction to the department as a whole.  It should be energetic, clear, articulate, exciting (if possible) and representative of the department.  No matter what the subject, we want to make a reader WANT to learn more about it - dig into the interior pages, take a class, read a research paper, become a major.  Each homepage should include:

  • Basic welcome (0-2 sentences: not entirely necessary, use it if it's already there, can be very simple)
  • General description of the field of study (1-2 sentences) and / or philosophy of the department (1-3 sentences)
  • Short description of the curriculum (1-3 sentences)
  • Something about majoring/requirements (1-3 sentences)
  • If appropriate something about facilities/equipment (1-2 sentences: more applicable to the sciences)
  • Optional:  examples of what graduates go on to do, etc. (1-2 sentences)
  • Highlight a unique, interesting piece of research, faculty member, course, and/or some aspect of the department that illustrates the work being done there in an exciting and engaging way - this is our "marketing to prospective students" opportunity on the department homepage.
  • At the same time, the introductory paragraphs should represent the content found throughout the department's site guiding students to internal pages through short references and links.  As a result, some department homepages will read slightly differently (or contain more content) than others as they reflect actual content and the personality of each department.
  • In total, we should strive for around 250 words on the page.
  •  

Academic Department Navigation

  • About the Department
  • Faculty
  • Majoring & Minoring
  • Curriculum
  • News & Events
  • Resources & Facilities
  • Special Opportunities
  • Get to Know Us
  • For Current Students
  • After Southwestern