Visual Style Guide

SCC Home > Sandbox >

Here's where you'll find all things related to helping you create webpages that are designed with a logical, easily-read layout in mind.

If you're looking for help writing your content for webpages, click here.

One of the most important reasons the College has built this site is so that things look crisp, clean, appealing, and most importantly, VISUALLY CONSISTENT. The information below helps insure that pages across the site look and feel the same.

This Visual Style Guide explains how & where to style your text, how to use pictures & logos and more. It also provides help with finding approved logos, photos, colors, text styles, and more.

Formats & Styles

There are two main ways to make your text look different: formats and styles. Formats are applied to the whole paragraph or - more accurately - everything between each time you hit the [return/enter] key on the keyboard. Styles allow you to make individual words (or groups of words) within the same paragraph look different.

Formatting your text

Below are examples of what text appears like when you select it and apply the format options as you create text within the text editor. The format box is the first drop down box on the left of your tool bar.

Until we can remove them from the available options in the drop down boxes, you will see a few styles that should not be used. Let's see why, shall we?

This text is formatted as "Address." Do NOT use it. It doesn't work well on some web browsers.

This text is formatted as "Preformatted." Do NOT use it. It does not play well with others and can cause visitors' web browsers to return an error message -> BAD!

This text is formatted as Heading 1.

Do NOT use this on your web pages. It is too large for the text area of pages. Heading 3 is the proper header for sections of text.

This text is formatted as Heading 2.

The space above isn't blank, it's actually formatted as Heading 2. Heading 2 is about the same size as Heading 3. The main difference is that the text color of Heading 2 is white. That means it WILL NOT show up on any text area with a white background.

This text is formatted as Heading 3.

This is the correct header to use when identifying a specific section of text on a page.

DO use it for beginning a new major section of text on a web page.

DO NOT use it for:

highlighting important text within a paragraph or between paragraphs (see formating words below).
as part of a list (use a bulleted or numbered list like this).

This text is formatted as Heading 4.

Use Heading 4 as the main header for any sidebar text. Sidebar text exists along the far right side of some pages on this site. Do NOT use this within the main text area (that's what Heading 3 is for).

This text is formatted as Heading 5.

This text format hasn't officially been assigned a specific task but as you can see, the combination of bold letters and small point size makes it difficult to read.

This text is formatted as Heading 6.

The same goes for this format as for Heading 5. It's just pretty darn small for some people to read easily. Best to avoid it.

Writing paragraphs

This is the style you will use for well over 95% of your text: Paragraph. Use this format for all basic paragraph text and narrative in the main text area of a webpage OR in the text area of a side bar or Feature Box.

If you need to add emphasis to individual words within a paragraph, you need to apply a STYLE. Styles are found in the second drop down box from the left (the one that reads Styles)

The styles you will use priarily are:

underlined text
bold text
italic text

When applying a text styles, you should only use ONE style per word. Applying more than one style per word or mixing up styles within the same paragraph makes reading difficult. It also confuses the reader as to what each style means.

Adding emphasis to your text

There are times when you need to add emphasis to your text.

Underlined text is most commonly associated with web links or email addresses. Multiple lines of underlined text also are very, very, very difficult to read because the underline itself takes up some of the white space between the rows of text and things get muddy. People also tend to click on underlined text thinking it'll take them somewhere. The best candidate for using underlined text is when citing sources of information.

Soo... other than citing sources, don't underline your text.

Bold text works best when you want to add emphasis to a specific item, name, date, location, etc.

The bookstore will be closed over spring break.

Italic text is best used to add emphasis to specific words a sentence to help with the context of the message. It's not as, well, bold as bold. Of course this has proper applications when citing sources of information.

All students should go to class every day.

Introducing the Feature Box

Feature boxes are great for highlighting something on your webpage. They're sort of like a smaller version of a sidebar.

When adding a title to the text box, try to keep it to a single line of text - really condense what you want to say in a few words to capture readers' interest.

Don't put too much info in a feature box. They're designed to be little nudges within the page, not do all the heavy lifting. That's what the main text area of the page is for.