Home.Publication Procedures and Style Guide.Websites.Visual Design.Style Guidelines

Blue Banner

Style Guidelines

Colors

Standard Colors: TTB uses a palette of standard colors to ensure a common look and feel for its websites.

See Style Sheet in Appendix D: Layout and Navigation.

Standard Fonts

  1. The standard font and size used for all basic text is Arial size 12pt. The Arial font was designed specifically for on-screen display, and it is rendered identically across all platforms and Web browsers. For the greatest cross-platform consistency, always use the following family of fonts: Arial, Helvetica, Sans Serif.
  2. By default, all text entered into the content section of TTB's templates is automatically displayed in size 12pt.
  3. Use Size 1 text for all text in tables, lists, content boxes, and captions. This default text size is managed via the Cascading Style Sheet (CSS). When the browser sees it, it refers to the CSS and sizes the text accordingly within the template or within a page element.

Standard Heading

Use headings to help organize information. The three predefined heading formats that may be used are:

Style Text Style Anti-Aliases
Font-Family Style Size Color (orCode)
H1 Arial, Helvetica, sans-serif Reg 130% #333 No
H2 Arial, Helvetica, sans-serif Reg 14pt #666 No
H3 Arial, Helvetica, sans-serif Reg 13pt #000 No
P Arial, Helvetica, sans-serif Reg 12pt #333 No

Case

Topics and headings (page headings, sub-headings, and section dividers) should be in title case. In title case, the first word and all principal words are capitalized, e.g., TTB's Regulated Industries.

  1. Title case applies to:

    1. Document titles (in the <TITLE> tag)
    2. Page headings (in <H1> tag)
    3. Page subheadings (in <H2> tag)
    4. Section headings (in <H3> tag)
    5. Section subheadings (in <H4> tag)
    6. Inline headings (in <B> tag)
    7. Content box titles
    8. Content item titles
    9. Topics
  2. Sentence case applies to:

    1. List items
    2. Links
    3. Table headings
    4. Button text

Italics

As a rule, TTB does not use italics for headers, sub-headers, links, or captions. In rare cases, you may use italics to add emphasis to a word within narrative.

Page Headers

Page headers (not to be confused with the "page title" that appears up in the blue bar at the top of the screen or "standard headings" that organize content on the page) are extremely important features of each Web page. They should communicate – at a glance – the subject of the page. They also will serve as the text for any links to that page. So choose the wording of your page headers carefully. Page headers should:

  1. Be short – normally no more than 3 to 5 words.
  2. Be no more than one line.
  3. Use words that the target audience would be sure to understand.

Text

Break text into short segments. Use headers or section dividers to help visitors quickly get to the sections they want. Allow appropriate white space (blank areas) on your pages. White space provides eye relief, makes items easier to find, and creates a more attractive page. Put your most important information at the top of your page.

Front Page

The front page of a section or the "home page" should be short and to the point. For the most part, you should use it to highlight current or important developments and to help people get to other parts of the section.

Page Length

  1. Front pages, topic level pages, and other pages that serve primarily as navigation (i.e., links to other pages) normally should be no more than two screens.
  2. Document level pages may be longer, but should not exceed five screens.

Topics

  1. Choose topics carefully. Take into consideration the audience you are serving.
  2. When possible, choose words that are – or could be – commonly used across Federal websites.
  3. When describing topics, use words that your audience will easily understand. Avoid ambiguous words.
  4. Generally, each section should have no more than 6 to 10 topics. To the greatest extent possible, all your topics should show in the first screen.
  5. Topic titles should be short and punchy – normally no more than three words. Topic titles should fit on one line, if possible.
  6. Normally, a section should be no more than four layers deep; meaning everything you want your audience to know should be available to them within no more than four mouse clicks. Think hard about how you aggregate information into topics and sub-topics. Your audience will appreciate your efforts.

Content Boxes

Use "content boxes" to guide users to related links, to highlight important information, or to provide additional facts. When you use the following box titles, you should follow these protocols:

  1. News and Events – highlights new regulations, requirements, reports, instructions, etc. Normally, items should remain in this box for a limited period (probably no more than one month).
  2. Regulatory and Formal Guidance – offers links to pertinent regulations and guidance on TTB's websites.
  3. Tools and Guides – offers links to tools and guides about a particular subject on TTB's websites.
  4. Additional Resources – links users to pertinent information on external websites.
  5. How Do I...? – provides answers to questions that audiences might not think to ask.
  6. Quick Links - highlights most frequently requested or most frequently used information.

Anchor Tags Or "Jump To's"

In some cases, anchor tags and "jump to's"– allow the user to "jump" up or farther down on the page – can be a good design practice. However, if users select "print," the whole page will print – not just the section they jumped to. A better practice is to create a series of related, linked Web pages. Users will be able to print specific pieces of content instead a large volume of information that they do not want or need.

Highlighting "New" Items (TTB.gov Only)

A standard "new" icon may be used to highlight information on TTB.gov is the only "new" icon that may be used on the site. It will automatically expire two weeks after posting.

Standard Links (TTB.gov Only)

The "Printer-Friendly Version" link should appear on each document level page on TTB.gov.

Page Title

The "page title" appears in the title bar of the visitor's browser, as the label in bookmarks to the page, and in search results lists and statistics reports. A page title should be concise and meaningful to the audience.

Tables

Presenting large amount of information or lists in a table is a best practice for content management and plain language. Some guidelines for using tables include –

  1. Use tables to display tabular data and lists in an organized manner.
  2. Define tables with headings and with column and row labels to facilitate navigation for people with disabilities.
  3. Do not use borders on tables, since borders may display differently in various browsers and platforms.
  4. When possible, use the approved background colors to enhance readability.
  5. Do not use tables to isolate or highlight text on a page. Use content boxes and other template features to highlight important content.

Frames

TTB does not use frames on any pages of its websites. Frames add unnecessary weight to a Web page, making it more difficult for people with slow modems to access the page.

Refer to Appendix D: Layout and Navigation for more examples and images.

Skipping Repetitive Navigation

When Cascading Style Sheets (CSS) are inaccessible provide a method that permits users to skip repetitive navigation links.

Offer "skip to navigation" commands such as "skip to search box" or "skip to search results." To help users of PDAs, smart phones, and other non-PC devices, make these links small but visible to the user.

When first retrieving the search results page, the focus of a screen reader will move to the top of the page and not to the search results. Sighted users will often look directly at search results. To provide similar access to users of screen readers, you can provide a skip link that allows the user to skip to the search results, or you could force the focus of the search results page to the results portion of the page, starting with the text indicating the search conducted, number of results found, etc.

Scripting Languages

Identify scripting language with functional text so assistive technology can read it.
Functional text is writing used in everyday life.

When pages use scripting languages to display content, or to create interface elements, the information provided by the script will be identified with functional text that assistive technology can read.

All scripts (e.g., JavaScript pop-up menus) need to be directly accessible to assistive technologies (keyboard accessibility is a good measure of this), or an alternative method of accessing equivalent functionality should be provided (e.g., a standard HTML link). A Web page containing scripting language will typically be fully accessible if the functionality of the script is device independent (does not require only a mouse or only a keyboard) and the information (content) is available to assistive technologies. See the related article below.

Creating Accessible JavaScript:WebAIM article on accessible scripts

Page last reviewed/updated: 04/08/2014