Web Style Guide

Overview
Graphical Standards
Textual Standards
Technical Tips
Contact

Download printable version

Style Guide Overview 

All pages of the official Tallahassee Community College website should meet the requirements identified throughout this style guide. In addition to the graphical and textual standards that are outlined in this guide, the following guidelines should be followed:

  • The official TCC navigation bar should appear at the top of all web pages.
  • The TCC logo should appear at the top of all web pages and should link to the TCC homepage.
  • TCC’s mailing address, phone number and email must appear on every web page.

Graphical Standards

Color Palette

TCC’s primary color palette contains the following colors. It is important that the following colors are used and rendered correctly on every site page.

Blue: #005296
Gold: #e5b611

Below is an example of how the color palette is used on the homepage:

A screenshot of the TCC website header 

Headers and Paragraph Formatting 

It is important to use subheadings to convey the subject of every site page on the website. On TCC’s website, there are five header levels to make note of:

Header Levels:

Screenshot of H1 title header Screenshot of H2-5 header levels

Graphics Guidance

  • Every website image must be saved as a .jpg with a minimum resolution of 72 dpi and no larger than 300KB.
  • When adding an image to the media library, adding a descriptive text in the Description field is required. This provides an “alt text” description for users who are visually impaired.
  • Do not use clip art or animated images.
  • Avoid adding images with copy or text (e.g., flyers, infographics). This text will not show up on translators or screen readers for people who have visual impairments. Also, the site is designed to be mobile responsive, and images with copy placed within the image risk image distortion, depending on the user’s viewing device.
  • Crop and scale images if needed.
  • Use images purposefully to convey your message.
  • Keep images up to date and periodically remove outdated images from the media library.

Imagery

Our imagery should be focused on our commitment to excellence and the College’s value as a stepping stone for our students as they continue on their career path or extend their education journey. When telling the TCC story, streamline and simplify by using fewer images where each image has more impact.

Imagery Do’s

  • Make it bright
  • Make it striking
  • Make it memorable
  • Make it welcoming
  • Make it vibrant
  • Make it friendly
  • Make it simple
  • Make it appealing to a broad audience
  • Make it reflect the diversity of our College community

Imagery Donts

  • Overuse stock photography
  • Make it too exclusive
  • Overuse dark colors
  • Overwhelm with too much information
  • Add text to the image

Sample Recommended Imagery

It is important that the College community is accurately represented via imagery that reflects TCC’s commitment to excellence. Below are a few examples of recommended site imagery.

An example of a campus pictureAn example of of an events pictureAn example of a picture of interaction between students and administration

Video Suggestions

Using video on a website is a great way to drive engagement and highlight campus culture. Here are some important suggestions when it comes to adding video to the website:

  • Any video produced for TCC must reference Tallahassee Community College, include the TCC logo and follow all logo guidelines.
  • Use video that adds value to the web page and delivers information.
  • Do not enable the video to automatically play when a page is loaded. Allow website visitors to play the video if they choose to.
  • Provide volume control.
  • Stream videos on the web page; do not embed.
  • Provide a text transcript when possible.

TCC Logo Usage

The official Tallahassee Community College logo is the “wheel” version (pictured right), which features TCC blue and gold colors, a white inner circle background, and the signature interlocking letters within. At all times, the logo should be displayed on website pages for Tallahassee Community College (specifically, on the top left corner of the website). For more information, refer to Identity and Branding System.

Logo Do’s

  • Make sure the most up-to-date logo is being used
  • Use in upper left corner of website
  • Authorize use of logo with the Office of Communications and Marketing
  • Surround all sides of logo with clear space

Logo Don’ts

  • Use on printed materials
  • Resize the logo to less than 1 inch in diameter or change proportions
  • Change the colors or make transparent
  • Add or remove anything
  • Rearrange logo elements
  • Use without proper approval
  • Re-space parts of the logo
  • Change typefaces

Textual Standards 

Using AP Style

Tallahassee Community College follows the Associated Press Stylebook, the standard for grammatical guidelines used by the media. Here are essential tips when it comes to writing in AP Style:

  • Commas and periods always go inside quotation marks.
  • Titles of movies, books, magazines, TV shows and newspapers go inside quotation marks, not italics.
  • Spell out numbers zero through nine and use numerals for numbers 10 and larger.
  • Do not use the % symbol for percentages; instead write out the word “percent.”
  • When it comes to time, do not use zeros. For example, use 11 a.m. instead of 11:00 a.m.
  • Speaking of time, the descriptors should be abbreviated with lowercase letters and with periods (a.m. and p.m.).
  • For specific dates, abbreviate the month, like this: Dec. 10.

How to Write Headlines

  • Proper nouns should always be capitalized
  • Use an active voice, not a passive voice.
  • Do not use a period at the end of a headline.
  • Do not write out numbers, use numerals.
  • Avoid double quotations.
  • Liberally use verbs, sparingly use adjectives.

Examples:

Congress agrees to set budget for 2017

11,500 expected to attend military conference in Orlando

How to write a stellar headline in 6 easy steps

Everything you need to know about Florida theme parks this summer

Head of TSA security operations removed from position

‘Happy Chewbacca’ video conquers Force on social media

Web vs. Print Considerations 

The average website user does not read every word on the page, but instead scans the page. It is crucial to give your reader less to read, with clear and concise language.

  • Keep all web copy short and concise. It’s imperative to be direct—the average website user spends fewer than 15 seconds on a website page.
  • Do not underline text or hyperlinks. Links will automatically underline.
  • All copy (content, headlines, etc.) should be left-justified unless otherwise specified for design purposes.

Try to use the following best practices:

  • Use bulleted or numbered lists.
  • Use meaningful headlines and sub-headlines to break up lengthy copy.
  • Call out keywords with bold or italics (not underlining).
  • Minimize the length of copy to half of what you would typically include in a print piece.
  • Links should be informative. When possible, hyperlink the URL with descriptive text.

Consistency of Language

TCC will write in a way that is consistent with the entire website. Here are some best practices for ensuring a consistent tone and voice:

  • In most cases, use an active writing voice. Active writing emphasizes the subject of the sentence and uses a strong verb.
    • Active: He used a pencil.
    • Passive: A pencil was used.
  • For readability, use mostly short sentences for TCC’s website.
  • Use plain language that can be easily understood by the audience. Avoid using jargon or buzzwords.
  • Choose whether you will write from a first-, second- or third-person point of view and stick with that choice.
    • Think about the audience that is reading the content when deciding which voice to write in.

How to Reference Other Sites

Use only respected sources when referencing external websites. Wikipedia can be helpful for gaining a personal understanding, but is not an authoritative source. Follow the steps below to properly reference external websites:

  • When citing a website, capitalize the name of the source, just as you would a proper noun.
    • Example: Reporters have various resources available to them, such as the Associated Press Stylebook.
  • If you’d like to direct readers to the website, you can hyperlink the web address in the text.
  • In AP Style, it’s also acceptable to write out the full web address.
    • Example: Reporters have various resources available to them, such as the Associated Press Stylebook, found here: https://www.apstylebook.com/.

Technical Tips

Internal and External Linking

Linking to other internal site pages is critical, as it keeps visitors on TCC’s website, enables them to learn more about the college and is one of the main building blocks of well executed search engine optimization (SEO).

Here are the best practices when it comes to internal linking:

  • Link text to relevant web pages on TCC’s site.
  • Link to valuable information that makes sense.
  • Link to different kinds of content; for example: blog post>news article>department page>apply to TCC.
  • Link relevant images to content as well.
  • Use a reasonable amount of internal links.

Links to an external website or document should open up in a new browser window.

When to Use PDFs

It’s important to use downloadable PDFs on TCC’s website when needed. Here is when to include a PDF online:

  • Forms that need to be printed and filled out by a website visitor
  • Printed material, such as brochures and flyers
  • If a topic is more than five pages long, make it into a PDF

When implementing PDFs on the web, enable the PDF file to open in a new browser window.

Tips for SEO

Follow these tips to enhance Tallahassee Community College’s SEO presence:

  • Title Tags: Make sure the title tag, or title of the web page, reflects the content on the page in a concise and accurate way.
  • Meta Description: This should be a short description (under 160 characters) of the web page content. This content is the first summary visitors will see when searching for TCC’s website; ensure it’s informative and interesting.
  • Duplicate Content: Not only is using others online content illegal, it’s also disadvantageous for SEO. Copying and pasting someone else’s content will result in a penalty from Google and send TCC’s website down in search results.
  • Alt Text: This text is given to images to help convey their message. Alt text is required for ADA compliance. Google likes alt text and will favor the websites that use it.
  • SEO keywords: Use two to three SEO key phrases on each page. Use specific, targeted words and phrases and ignore common words such as “a,” “the,” “as,” “and.” Use the key words or phrases in the page title and near the top of the content of the page.

Page Title vs. Page Name

Each page has page title and page name.

The page name is required and will display on the browser tab and inner navigation.

The page title will display on the page and will default to the page name if left blank. This will be valuable for long page names that need to be abbreviated for URLs.

A screenshot demonstrating the difference between a page name and a page title

How to Style Tables

While it is easy for sighted users to view information in a table, someone that cannot see the table won’t be able to make those same associations without a screen reader and proper formatting. Tables are not mobile optimized and must be formatted correctly to be Americans with Disabilities Act (ADA) compliant. Only use tables if there is no other way to format your information.

Follow these steps to make sure your table is ADA compliant:

  • Label column and/or row headers so the content is read correctly.
  • Make sure your table can be read from left to right and line by line.
  • Include a caption to describe the content and figures in the table by going to to Table > Table Properties and select Caption.

Tips for Formatting Section Content

Use one or more of the following methods to break up big blocks of copy:

  • Bullets: For when the item order doesn’t matter.
  • Numbered Lists: To indicate steps or a process.
  • Tables: Should be used sparingly and formatted correctly for ADA compliance. See the section on How to Style Tables for specific instructions.
  • Accordions: To break up content into collapsible sections (ex. Frequently Asked Questions).

Questions?

Please contact the Office of Communications and Marketing at communications@tcc.fl.edu or (850) 201-6049 for more information.

Back to top of page