Designing with Words

L. Alonzo Webster
9 min readApr 11, 2020

Words are a valued and often necessary medium. Designing with words requires a familiarization, if not expertise, in five main areas: Language, Syntax, Typefaces, Fonts, and Typography. Understanding the tenets of each is an invaluable skill to have. When it comes to using words in a design, knowing how each area plays on the others can be invaluable.

Language

Selecting the appropriate language is by far the easiest thing to do. You are usually designing for a specific audience; thus, a specific language. But there are regional differences and dialects that can distort and even disrupt messaging. Most designs carry their message through a single language.

There are very few instances where a polylingual approach is required. In those instances where multiple languages are required, aesthetics is likely to take a backseat to function.

Imagine, though, what it would be like if your audience’s understanding was not limited to a single language. Imagine a world where all symbols of communication were understood by all. In such a world, the possibilities for expression would be exponentially increased. All words and associated meanings would be free game for use in the design. The possibility presented by being able to use any language to communicate would dramatically enlarge the potent power of syntax.

However, designing with words is most often limited to a single and language and maybe on an occasion a little sprinkling of regionally accepted terms. Even in those less common instances, word choice and syntax is still king.

Syntax

The syntax is the arrangement of words and phrases to create well-formed phrases in a given language. Choosing the best words for the message is the work of a Copywriter. A copywriter is someone who is paid to write “copy” — words designed to prompt action. Copywriting is always connected to the act of promoting or selling a business, organization, brand, product, or service, which makes it, by definition, a form of marketing.

The complexity of syntax comes from striking a balance between communicating a message, eliciting the desired feeling, and presenting a visually appealing word. Wherein nearly all words have synonyms, choosing the best words to tap all three components can be excruciatingly difficult. Luckily, the list of possibilities is limited by the language.

the word “joyhas many synonyms

Creating a message that elicits the desired feeling is what is most commonly focused on. Often, little or no attention is paid to whether the word itself looks good. That portion of the design effort most often becomes the burden of the other areas of word design; namely: Typeface, Font, and Typography.

In many instances, there may only be a few synonymic equals, but in those rare occasions where syntactically several options are available — choosing the best word may come down to its composition and physicalities.

For example, the word “joyhas many synonyms and one synonym may be superior to another given a specific context and feeling. All things being equal in way of context, a designer may select the word “joy” over the word “happy” because of the pleasing symmetry the first and last letters of “joy” provide.

In these rare instances, word choice based on physical properties and composition — while adhering to context and feeling, becomes an execution in design. In deconstructing the physicality of composed words, we use the terms glyph and grapheme; hopefully not interchangeably.

Glyphs

A glyph is an elemental symbol within an agreed set of symbols, intended to represent a readable character for the purposes of writing. Glyphs are considered to be unique marks that collectively add up to the spelling of a word or contribute to a specific meaning of what is written, with that meaning dependent on cultural and social usage.

Grapheme

A grapheme, on the other hand, is the smallest functional unit of a writing system. A grapheme is a written symbol that represents a sound.

Both glyphs and graphemes are important to designing with words because each provides the opportunity for play. Designers can use the constructs of each to manipulate their designs to become more appealing.

Word Choice Achieved

Many believe that once the words have been chosen the real designing begins. As demonstrated above, the task of word selection plays a foundational role within the process of designing with words. Once the content has been chosen, the challenge of discovering the best typeface to suit the message and its purpose presents itself. Often people mistakenly refer to typeface as font, but they are different.

Typeface

A typeface can be thought of as a system of styling for an established set of glyphs. There is common terminology used in the development and design of typefaces (written in red).

Font

A font, on the other hand, can be thought of as styling subsets of a typeface.

For example, a typeface can have several prescribed fonts, such as ‘Thin’, ‘Light’, ‘Roman’, ‘Bold’, ‘Black’, and it’s like-named condensed companions.

Additionally, typefaces have additional styling applied to them in the form of coloring, sizing, strikethroughs, bolding, italics, obliques, and underlines, just to name a few. Incidentally, there is a difference between obliques and italics.

Obliques & Italics

Most designers and related creative professionals are familiar with the terms Italic and Oblique, yet confusion does exist on the part of many regarding the differences between the two. While each refers to a slanted or angled design, there are important distinctions between both terms, which in turn can influence their potential usage.

In the purest (type designer) sense, an oblique is a roman font that has been skewed a certain number of degrees (8–12 degrees, usually). An italic is created by the type designer with specific characters (notably lowercase a) drawn differently to create a more calligraphic, as well as slanted version.

Subscripts & Superscripts

A subscript or superscript is a character (such as a numeral or letter) that is set slightly below or above the normal line of type, respectively. Subscripts appear at or below the baseline, while superscripts are always above. They are usually smaller than the rest of the text. However, subscript and superscript characters are not simply ordinary characters reduced in size. Rather, to keep them visually consistent with the rest of the font, typeface designers make them slightly heavier (i.e. bolded) than a reduced-size character would be.

The vertical distance that sub- or superscripted text is moved from the original baseline varies by typeface and by use. Subscripts and superscripts are perhaps most often used in formulas and mathematical expressions but have many other uses as well.

Summary To Here

Language is not usually thought of as a design feature because it is often taken for granted and assumed. The syntax is most often placed into its own category of design, best handled by copywriters and editors. Typefaces and fonts are words that are often used interchangeably though their meanings are distinct and specifically representative of their parent-child relationship; typefaces being the parent. Lastly, we have typography which is often used to describe the entire process of designing with words.

Typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers.

Rivers

In typography, rivers are gaps in typesetting which appear to run through a paragraph of text due to a coincidental alignment of spaces. Rivers can occur regardless of the spacing settings but are most noticeable with wide inter-word spaces caused by full-text justification or monospaced fonts.

Negative Space

Negative space, in art, is the space around and between the subject of an image. Negative space may be most evident when the space around a subject, not the subject itself, forms an interesting or artistically relevant shape, and such space occasionally is used to artistic effect as the “real” subject of an image.

Focal Point & Order

Two key points in typography that designer Chris Do emphasizes to his students are Focal Point and Order. Focal Point is the key thing that draws the viewer’s attention first. And Order being that order in which things are laid out for the viewer to focus on sequentially, i.e. first, second, third.

Honorable Mentions

Pertinent to our discussion on designing with words are two artists recently showcased in a Netflix original documentary series, “Abstract: The Art of Design”.

Typeface Designer — Jonathan Hoefler

Hoefler’s Champion Gothic was inspired by 19th-century wood type. It was commissioned for Sports Illustrated shortly after founding his company, Hoefler & Co, in 1989. Hoefler is the only person to have ever received both the Prix Charles Peignot, the prize for typographic excellence awarded by the Association Typographique Internationale, and the AIGA Medal, the design profession’s highest honor.

Typographer & Designer — Paula Scher

In 1994, Paula Scher was the first designer to create a new identity and promotional graphics system for The Public Theater, a program that became the turning point of identity in designs that influence much of the graphic design created for theatrical promotion and for cultural institutions in general. Based on the challenge to raise public awareness and attendance at the Public Theater along with trying to appeal to a more diverse demographic, Scher created a graphic language that reflected street typography and graffiti-like juxtaposition.

References

Images: (in order of appearance) Typography made in Sketch / Multi-Language Sign / Smiley Face used in ‘Happiness’ made in Sketch / Crown / Word Cloud / the letter “A” / Grapheme Chart / Anatomy / Helvetica Neue / Sub\Super-script made in Sketch.

An Internet Remix

This article’s content was populated almost entirely by the following websites according to their topic, in an effort to make them more easily understandable; some slight alterations were made to increase readability:

Content: (in order of appearance) Syntax / Copywriter / Joy Synonym / Glyph / Grapheme 1 / Grapheme 2 / Obliques & Italics 1 / Obliques & Italics 2 / Subscript & Superscript / Typography / Rivers / Negative Space / Jonathan Hoefler 1 / Jonathan Hoefler 2 / Paula Scher

Editing: assisted by Grammarly

The motivation for the Remix

Whenever I find myself becoming reacquainted with or researching again something to apply to a new project, I’ve found it’s just easiest to compile my notes here at Medium. The results of which end up being a hodgepodge of various sources and the process of which becomes one more learning experience. Plus, the generated link makes for a featured and future quick reference for me and hopefully others.

--

--

L. Alonzo Webster

Always aspiring as a product designer. Focused on developing innovative solutions.