The Libguide of Libguides: Visual Style Guide

On This Page

• Formatting Text
• Emphasis
• Semantics and Search Engine Optimization
• More Information

Guide to Visual Style

• Home (You are here)
• On Navigation
• Custom Table Styles
• Custom Styled RSS Generator

Here are the controls for the rich text editor.  The rich text editor is available in most box types by toggling into EDIT mode. While this interface may look rather intimidating, don't worry; you actually don't need many of these controls.

Formatting Text

In addition to the paragraph format, there are six heading levels available from the 'Format' menu which is located at the top left hand corner of the rich text editor.  Use of these headings establishes a hierarchy of importance for your content much like in a traditional newspaper.  'Heading 1' should be avoided as the title of your guide is functioning in this this capacity.  Lower level headings should be used to create the heading/sub-heading relationships appropriate to your content.  Geek speak:  Applying paragraph and heading formats is known as block-level formatting.

Fonts and font sizes

The fonts (typefaces) used in the Tufts Research Guides system are in strict adherence with the Tufts University Visual Identify System.  While you can specify different and additional fonts via the font drop-down menu, we ask that you refrain from doing so in order to provide a consistent user experience for users of the system. Notice above that we have put an 'X' over the Font family and Font size drop-down menus.

In general, changes to font-sizing should be avoided.  Let the semantic nature of the headers work for you (see below)!

Is all this really important?

Yes!  In addition to making a site look professional, consistency enforces expectation and reduces the mental real estate needed to understand the presentation of information throughout a website.  Inconsistent formatting of text can make your information appear more complicated and can even decrease a user's trust in the information.  Remember, users won't be viewing just your guide.  Consistency of style imparts polish and professionalism which establishes trust in the user.

Why emphasize?

By applying emphasis to key terms or phrases in large blocks of text, you can:

• draw the user's eye to information you want to designate as important
• add structure to your information
• add visual variety

A little goes a long way

It is common in print publications to see text emphasis achieved by a combination of large type, bolding, and italicizing.  Note that this often has an adverse effect in a text-driven website unless the text is serving as a visual element unto itself (a "pull-quote" in design parlance).  In general, emphasis is most effective and least likely to reduce readability if it involves altering one parameter: font-size, font-weight (bold), or font-style (such as italics).  If you wish to apply simple empasis to text within a paragraph, bolding is almost always the best choice.

Bolding vs. Italics

Bolding and italicizing will both draw the user's eye.  Italics, however, are best used to illustrate a convention such as presenting foreign words or phrases, or when listing book or magazine titles, etc.

Underlining

The standard presentation of web links is underlined blue text (for a link that has not been visited yet).  Even if underlined text is not colored blue it may still be mistaken for a link to another page.  Therefore, underlining is discouraged unless used as part of a citation format where the practice is applicable.

So here are two topics that receive a lot of attention - semantics and search engine optimization.  Why are they important and why does it benefit you to know about them?   Semantic markup means marking up your content to reflect your intended meaning.  Simply put, if you have a heading use a heading element that demonstates the relationship of the content that will follow to other content.  If you have a paragraph, use a paragraph element. If you have a list of items, use the ordered or unordered list item controls. If you’re quoting a few lines, use a blockquote element. Those elements provide meaning to your content, making them semantically correct, in addition to being solid HTML structure.  Also, by marking up your content to reflect the your intended meaning, you:

1. improve the experience for users with disabilities:  Screenreaders are programmed to interpret content in an order that will make sense to users with visual impairments.  Semantic markup is the key to correct interpretation.
2. make your content extensible:  Someday you may want to include your content in a dynamic content managment system or learning management system.  Semantically marked content makes this process easier as the structure of your content travels intact to the new content host.
3. improve the ability of Google to find your content (Search Engine Optimization):   Search engines give the words used in the various headings more weight in determining the topic of a page. The keywords you want your page to be optimized for should appear at least in the h1 tag.  Remember, this tag is created for you by LibGuides.  When you supply the title of your page, it is automatically wrapped in an h1 tag.  However, related keywords can be used in the other headings.