facebook google plus twitter
Webucator's Free Typography Tutorial

Lesson: Building an Efficient Style Guide

Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.

Depending on your role in a project, the expectations of the materials you are to provide to your clients or co-workers will vary. Once you choose your type selections and build your style guide, you may opt to go a step further and provide templates that use those choices. This ensures that the users of your materials have less setup and you have better consistency across a large project.

Lesson Goals

  • To set expectations of what materials will be provided.
  • To create templates for every part of a project.
  • To explore various techniques of sharing templates and style guides.

Preparing Expectations

Set Goals

Creating attainable goals and expectations of how each participant in a project will utilize and consume the materials will help set boundaries and checkpoints. The subject matter expert may use typefaces and fonts from Microsoft Word, whereas a graphic designer may use another tool such as Adobe InDesign. The programmer will also interact with formatting using a tool similar to Adobe Dreamweaver to create CSS (Cascading Style Sheets) ,which control the formatting and layout of a web page.

Each member of the team needs to be provided with enough detail in a format they are familiar with in order to implement the consistent application at every level of the project.

Template Options

Template Types

Templates can be as simple as a few placeholders to set style, or as complex as a full dynamic template that pulls text and images from a data source. Wherever your needs fall within this range, at a minimum, templates should be established to set the typeface standards.

Before creating your templates, you should make a list of technologies and software that will be used in the full scope of the project.Project Plan

Template Creation

Once you have established the technologies and software that will be used, the creation of each template can begin.

To create a CSS template using Adobe Dreamweaver:

  1. Using Adobe Dreamweaver open type-hierarchy/Demos/amendments.html.
  2. Select "Amendment I" and use the Properties panel to set a CSS rule.Properties Panel
    1. In the Properties Panel, click on CSS, then click Edit Rule.
    2. Choose Tag (redefines an HTML element) from the Selector Type drop-down. Click OK. New CSS Rule Box with Selector Type and Name Choices
    3. Choose the formatting options you want all of the <h1> tags to use. Click OK.CSS Rule Definition for h1 Box
    4. The <h1> tags now have a uniform look.h1 Tags with Uniform Look
    5. Save and close the file.

Template Storage

Organization will be crucial as the project scope grows. Make sure to set storage and naming standards at the beginning of the process to ensure a smooth project lifespan.

Use nested folders, or a CMS (Content Management System) that utilizes meta data with report views to store and find files.

Nested FoldersNested folders are located in: extra-files/RoundRingsInc.

Location of Nested FoldersSharePoint CMS using meta data to organize and sort information about each document.

Methods of Sharing

Local Area Networks

LAN (local area networks) provide a safe, secure location to store a variety of files related to a project. One of the many benefits to using a LAN is that only authenticated users of your internal environment are allowed to access the information. This data also remains at the physical location of the company.

Cloud-Based Solutions

Cloud-based solutions, such as Dropbox, are located off-site and are owned and maintained by a third party. Users purchase an agreement to borrow space for storage. You simply give your users the proper credentials (username and password) so that they may gain access to the storage space. This feature makes cloud-based storage a perfect fit for sharing data with those outside of your organization.

Creating Typography Templates

Duration: 15 to 25 minutes.

In this exercise, you will create a set of templates to use on websites (Dreamweaver CSS).

If you do not have Adobe Dreamweaver installed, please feel free to use your favorite text editor and browser to alter the HTML code. Dreamweaver is not required, it simply makes the edits a bit faster.

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Using the Properties panels and the CSS STYLES panel, create styles to handle all of the text.

Solution:

  1. Using Dreamweaver, open build-an-efficient-style-guide/Exercises/amendments.html.
  2. Select "Amendment I" and use the Properties panel to set a CSS rule.Properties Panel
    1. In the Properties panel, click on CSS and then click Edit Rule.CSS and Edit Rule in the Properties Panel
    2. Choose Tag (redefines an HTML element) from the Selector Type drop-down. Click OK. New CSS Rule Box
    3. Choose the formatting options you want all of the <h1> tags to use. Click OK.CSS Rule Definition for h1 Box
    4. The <h1> tags now have a uniform look.h1 Tags with Uniform Look
    5. Repeat steps to create a <p> tag.New CSS Rule Box
    6. We will need to use a class style to create a note area at the top. Create a new rule.CSS Styles New Rule
    7. Name the rule ".note".Selector Name Field in New CSS Rule Box
    8. Set the type options and the border options as well to create a line around the text. Click OK.CSS Rule Definition for .note Box
    9. Select the note text and use the HTML properties to set the Class to note.Selected Note and HTML in the Properties Panel
    10. Save and close the file.