Style

Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio
SUNY Cortland
© 2017

Saying it with Style

What we perceive is not necessarily what we see. The psychology of human perception helps us to focus on the few important elements among the millions of details that bombard us. When creating a design to communicate an idea, attention to some basic principles can help more effectively communicate what is important.

Four Basic Principles
from The Non-Designer's Design Book by Robin Williams

Contrast:

similar

very different

Repetition: Repeat visual elements of the design throughout the piece. You can repeat colour, shape, texture, spatial relationships, line thickness, sizes, etc. This helps develop the organization and strengthens the unity.

Alignment: Nothing on the page should be placed there arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.

Proximity: Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

The juxtaposition of different stylistic elements can help items stand out and grab the audience's attention, or they might simply make a page look awkward. The type and degree of difference contribute to the overall effect. Too many stylistic differences create clutter rather than a highlight. This is especially true in the selection of typefaces in a document.

Dynamic Relationships
from The Non-Designer's Design Book by Robin Williams

concordant

A conflicting relationship occurs when you combine typefaces that are similar in style, weight, size, and so on. The similarities are disturbing because the visual attractions are not the same (concordant), but neither are they different (contrasting), so they conflict.

A contrasting relationship occurs when you combine separate typefaces and elements that are clearly distinct from each other. The visually appealing and exciting designs that attract your attention typically have a lot of contrast built in, and the contrasts are emphasized.

Font Basics

Many typefaces belonging to different families are available in today's software. In order to choose, we need to understand something of the differences and similarities among these type families.

Oldstyle: diagonal stress, slanted serifs, moderate thick/thin transitions in strokes
Modern: vertical stress, thin and horizontal serifs, radical thick/thin transitions in strokes
Slab serif: vertical stress, thick and horizontal serifs, little or no thick/thin trransitions in strokes
Sans serif: no stress, no serifs, no thick/thin trransitions in strokes

Type Contrasts

Contrasting size is easy to see if the difference is great. Never try to use slight differences to make a point. As Robin Williams says, don't be a wimp.
A typeface's weight is seen in the thickness of the strokes. Type families generally come in a number of different weights: regular, bold, semi-bold, extra bold, light.
The structure of a typeface refers to the characteristics noted above in the differences between Oldstyle, Modern, Slab serif, Sans serif, Script. Diagonal or vertical stress, serifs, and thick/thin transitions in strokes are aspects of structure. If you use more than one typeface on a page, be sure to select them from families with different structures, and don't overdo it.
FORM is simply the shape of a letter. CAPS versus lowercase is a difference in form.

Judicious use of color can enhance text. Be careful of the meanings associated with different colors and note that the meaning of colors can vary tremendously between different cultures. White means something very different in Europe and in Japan.

For more information:

The Design & Publishing Online Learning Center

"Typography"

The Good, The Bad & The Ugly

Readability Means Good Page Layout - or - Readability, Browsability, and Searchability on the use of good graphic design in documents by Eric Morgan

Typesetter : Compare Screen Type (utility for side by side comparisons of fonts)

How To Create a Web Design Style Guide

The HTML Writers Guild - Style Guides

Return to Syllabus