Let­ter­match

WEBDESIGN · BACHELOR THESIS · 2016

Let­ter­match

Many graph­ic design­ers spend a lot of time col­lect­ing inspi­ra­tional typo­graph­ic works on web­sites like Pin­ter­est. One spe­cial sub­ject of typog­ra­phy are mono­grams, which pre­serve excit­ing and inspi­ra­tional typo­graph­ic ideas.

Inspi­ra­tional col­lec­tions can be con­sid­ered work­ing tools for graph­ic design­ers. If you get stuck with your cre­ative process, you can just jump over to your inspi­ra­tional board to get your eyes on your already pre­s­e­lect­ed inspiration.

If you are look­ing for inspi­ra­tion par­tic­u­lar­ly for a mono­gram-design, things are dif­fer­ent. If you spot a mono­gram in your inspi­ra­tion col­lec­tion that fits the style you are look­ing for, it’s not unlike­ly that the monogram’s con­cept can’t be applied on the giv­en let­ters of your mono­gram project.

The ques­tion which let­ters can be used for a cer­tain mono­gram idea depends on the indi­vid­ual geom­e­try each let­ter has. For exam­ple, mono­gram ideas with the rec­tan­gu­lar let­ter E in use can be often trans­ferred on geo­met­ri­cal­ly relat­ed let­ters like the F, but not on the cir­cu­lar let­ter O.

In most cas­es, the geo­met­ric require­ments of excit­ing mono­gram-inspi­ra­tions are often not easy to spot. So it’s hard to tell with ease whether mono­gram ideas from one’s inspi­ra­tion board may be use­ful for inspi­ra­tion or not.

This chal­lenge is aggra­vat­ed by the cir­cum­stance that there isn’t just one let­ter­form for each char­ac­ter of the alpha­bet, but dozens of dif­fer­ent vari­a­tions called let­ter­forms. This means if you pick an alter­nate let­ter­form for the let­ter O that is rec­tan­gu­lar, the let­ter may be sud­den­ly applic­a­ble on mono­gram-ideas requir­ing a rec­tan­gu­lar shape.

With this insight, I imag­ined a mono­gram inspi­ra­tion tool pro­vid­ing a search inter­face that finds applic­a­ble mono­gram-ideas once the user entered the two let­ters of his mono­gram project.

This fic­ti­tious mono­gram inspi­ra­tion web­site (“Let­ter­match”) was the top­ic of my bach­e­lor thesis.

Mono­grams shown on this project-page aren’t my prop­er­ty. Mono­grams owned by oth­er copy­right hold­ers are used here under the guide­lines of the Fair Use provisions.

Per­son­al Favorites

My inter­est in mono­gram design comes from my enthu­si­asm for typog­ra­phy and let­ter­forms in par­tic­u­lar. It’s joy­ful and inspir­ing to dis­cov­er smart typo­graph­ic solu­tions to com­bine two letters.

Skilift Nets­bühl
Hans Hartmann

Nation­al Theatre
Hen­ri­on Design

Cli­man Studio
Otto Climan

Thyssen-Borne­misza Group
Total Design

1

Struc­ture

Mono­grams shar­ing the same typo­graph­ic idea need to be orga­nized in the same category.

2

Sup­port

Pro­vid­ing help­ful tools to design smart monograms.

3

Qual­i­ty

Qual­i­ty cri­te­ria are shap­ing an out­stand­ing inspi­ra­tional mono­gram collection.

Alter­nate Letterforms

To com­bine two let­ters, one has to fig­ure the geo­met­ric char­ac­ter­is­tics both let­ters are shar­ing. Exam­ples: round­ness (O, C, …), tri­an­gu­lar­i­ty (V, W, …) or loops (B, P, …). These exam­ples are based on arche­type let­ter­forms. Luck­i­ly there isn’t only one recog­nis­able let­ter­form for each let­ter of the Latin alpha­bet. Those vari­a­tions from a letter’s tra­di­tion­al skele­ton are called alter­nate letterforms.

Once I start­ed ana­lyz­ing mono­grams, I learned that alter­nate let­ter­forms play an out­stand­ing role in mono­gram design. To rec­og­nize the let­ter A is doesn’t need to be nec­es­sar­i­ly tri­an­gu­lar. An alter­nate ver­sion, drawn roundish, of the let­ter A will be read as an A as well. As a result, the let­ter A can sud­den­ly cope with roundish mono­gram-ideas. By explor­ing alter­nate let­ter­forms, you will find more sim­i­lar­i­ties between the two let­ters allow­ing you to come up with more ideas to design a monogram.

lm-letter-a-ca

Round­ed Apex A

lm-letter-a-wa

Miss­ing cross­bar A

Slant­ed A

Rec­tan­gu­lar A

let­ter-char­ac­ter­is­tics examples

As explained above alter­nate let­ter­forms have an enor­mous impact on the ver­sa­til­i­ty. Nev­er­the­less, each let­ter has it’s very own unique fea­tures for mono­gram design as shown in the exam­ples below:

BIt does require lit­tle to rec­og­nize the sim­ple out­line of the let­ter B.

CThe round shape of C is pre­des­tined for nest­ing the oth­er letter.

LThe let­ter L is fre­quent­ly used as a shelf for the oth­er letter.

Mono­gram Analysis

Every smart mono­gram takes advan­tage of the spe­cial geo­met­ric shapes of the monogram’s let­ters. I designed analy­sis sheets to analyse mono­grams from my col­lec­tion. I did check which let­ter com­bi­na­tions can be com­bined the very same way as the mono­gram inspiration.

The mono­gram that has been analysed in this mono­gram-analy­sis is shown in the top-left cor­ner. On the first page, I analysed which geo­met­ric con­di­tions need to be met to apply this mono­gram-con­cept on oth­er let­ters or rather letter-combinations.

From the sec­ond page on I proof the assump­tions I made on the first page.

What’s the analy­sis for?

This analy­sis can be applied on any inspi­ra­tional mono­gram. After analysing a big num­ber of mono­grams, the data­base can be used to pro­vide a search inter­face that only show­cas­es mono­gram-ideas that are in fact applic­a­ble on the searched monogram’s letters.

Fur­ther­more the data­base does also attach fit­ting let­ter­forms to the mono­gram-inspi­ra­tion. As you can see in the slid­er below, all of these mono­grams (CO, RC, BC, RB) had been reg­is­tered as pos­si­ble mono­gram-ideas for the let­ter-com­bi­na­tion K+C.

Logo: This ser­vice pro­vid­ed by the web­site remind­ed me of a but­ler, who serves only the best inspi­ra­tional mono­grams for the user. There­for this metaphor got used as logo (LM = Lettermatch).

Mono­gram-Cat­e­gories

To struc­ture the con­tents of my mono­gram-library, I had to come up with a clas­si­fi­ca­tion sys­tem for mono­grams to ensure clar­i­ty for the user.

There are indeed already plen­ty of sys­tems to orga­nize logos (espe­cial­ly in logo-books). How­ev­er, those sys­tems are rarely ded­i­cat­ed only to mono­grams. While authors of logo design books need flex­i­ble sys­tems applic­a­ble to all kind of logos, I was able to make a nar­row­er ranged clas­si­fi­ca­tion-sys­tem exclu­sive­ly for monograms.

Most cat­e­go­ry-terms were adopt­ed from great logo-books like Logo Mod­ernismLogo (The Ref­er­ence Guide to Sym­bols and Logo­types) or Mod­ern Mono­grams. Any­way, the most work was done by declar­ing pre­cise cat­e­go­ry def­i­n­i­tions and cre­at­ing a sub-cat­e­go­ry system.

Main Cat­e­gories

Mono­gram Subcategories

The syn­tax is explained with 3 examples.

lm-cl-1-01-kx-overlap-y-diagonal

cat­e­go­rized as: over­lap-Y-diag­o­nal
The syn­tax is explained through the fol­low­ing images.

over­lap-Y-diag­o­nal
The let­ters are sim­ply over­lap­ping. For this reason
this mono­gram is saved in the cat­e­go­ry “over­lap”.

over­lap-Y-diag­o­nal
The let­ter X is shift­ed on the Y‑axis.

over­lap-Y-diag­o­nal
The let­ter-struc­ture-ele­ment both let­ters are shar­ing is the diagonal.

lm-cl-2-01-gs-nesting-x-horizontal

cat­e­go­rized as: nest­ing-X-hor­i­zon­tal
(Get­Safe by Metadesign)

nest­ing-X-hor­i­zon­tal
If one let­ter is nest­ed in the oth­er let­ter, the cat­e­go­ry-name is “nest­ing”.

nest­ing-X-hor­i­zon­tal
If the small­er let­ter doesn’t cross the out­lines of the big­ger let­ter, the attribute for the axis-shift is X not Y.

nest­ing-X-hor­i­zon­tal
The let­ter-struc­ture-ele­ment both let­ters are shar­ing is the horizontal.

cat­e­go­rized as: inter­lock-Y-hor­i­zon­tal-ver­ti­cal
(Trans Union by Uni­mark International)

inter­lock-Y-hor­i­zon­tal-ver­ti­cal
Both let­ters are interlocked.

inter­lock-Y-hor­i­zon­tal-ver­ti­cal
The T is shift­ed on the y‑axis to inter­lock the letter.

inter­lock-Y-hor­i­zon­tal-ver­ti­cal
Both let­ters are shar­ing the same hor­i­zon­tal and ver­ti­cal strokes at the touchpoint.

Web­site

Web­site Structure

The web­site is divid­ed into three parts. My project’s goal was to achieve a tool for the mono­gram design-process (“Let­ter­match”). To put the idea into effect, I had to col­lect a lot of let­ter­forms and mono­grams. I real­ized that these col­lec­tions build­ing up the mono­gram-tool might also be inter­est­ing with­out the pur­pose of design­ing a mono­gram. For this rea­son, I also cre­at­ed two col­lec­tion pages for alter­nate let­ter­forms and monograms.

1

Let­ter­match

Page to gen­er­ate an inspi­ra­tion-page for one’s mono­gram project
 to explore the typo­graph­ic fea­tures of the monogram’s letters.

2

Let­ter­forms

Let­ter­forms-Col­lec­tion for the pur­pose of inspi­ra­tion and research.

3

Mono­grams

Mono­grams-Col­lec­tion for the pur­pose of inspi­ra­tion and research plus tool to research exact letter-combinations.

1. Let­ter­match

Web­site-Struc­ture of the Lettermatch-Page

The fol­low­ing video demon­strates what’s going on after the user has entered two let­ters in the search inter­face. The gen­er­a­tive mono­gram-inspi­ra­tion-page is divid­ed into two parts:

AAlternate Letterforms for Letter 1 / Letter 2
For the mono­gram design process, it’s very help­ful to know about a wide range of alter­nate let­ter­forms. For this rea­son, the user gets pre­sent­ed a lot of alter­nate let­ter­forms to dis­cov­er sim­i­lar­i­ties between his both letters.

BApplic­a­ble mono­grams for inspiration
The core of the web­site is the mono­grams-data­base. Every sug­gest­ed mono­gram on this page is applic­a­ble on the user’s mono­gram let­ters. How the tool is sup­posed to be used is shown below.

How it’s sup­posed to be used

1. Get inspired
Once a user enters two let­ters into the search inter­face the web­site will gen­er­ate a mono­gram-inspi­ra­tion-page in return. Beside alter­nate let­ter­forms the user gets dis­played mono­gram-ideas that are adap­tive on the user’s let­ters. The big square shows the inspi­ra­tional mono­gram, below are the nec­es­sary alter­nate let­ter­forms of the L and M to make the mono­gram work.



2. Mod­i­fy, Remix, Recreate
The web­site doesn’t intend to instruct copy­ing ideas. It’s about inspi­ra­tion. In the first step (top-left cor­ner) you can see an almost iden­ti­cal copy of the inspi­ra­tion-source. That’s an ide­al start­ing point to explore the letter’s fea­tures for mono­gram-design. For every query you get 5–6 mono­grams-return. After explor­ing the users should pick the con­cept that fits best to his project.

3. Fin­ish
As I was in search of a name for my web­site I also had the name “inspi­ra­tion but­ler” in mind since the web­site takes over work like a but­ler. I spot­ted two arms in the logo plus a white square in the mid­dle that remind­ed me of my web­site-grid. For this rea­son I picked the logo above as my final mono­gram for Lettermatch.

Exam­ple shown in video

2. Let­ter­forms

Fea­tures of the page

ALet­ter-Tags
Every let­ter is tagged with attrib­ut­es. So you can fil­ter the data­base by design-relat­ed tags.

BInfor­ma­tion
Get all nec­es­sary infor­ma­tion about the alter­nate letterform.

CFont-Alter­nates
Find­ing dif­fer­ent fonts that are using a cer­tain alternate-letterform.

3. Mono­grams

Fea­tures of the page

ADis­cov­er­ing
The fil­ter-menu for the mono­gram-cat­e­gories allows you to dis­cov­er the dif­fer­ences between the categories.

BResearch
Find mono­grams match­ing your let­ters or search for a sin­gle let­ter to dis­cov­er the letter’s unique features.

CPar­tic­i­pa­tion
Users can add new mono­grams to the col­lec­tion. If they ful­fill the qual­i­ty cri­te­ria, they will be added.

FAQ

When is Let­ter­match going to be published?

This project is a cas­tle in the air. I picked this con­cept for my bach­e­lor-the­sis to explore a spe­cial field in typog­ra­phy and to improve my web design skills (and hav­ing fun). It would be nice if this web­site were real, but the esti­mat­ed expens­es for real­iza­tion and main­te­nance are way too high.

Where are the mono­grams from?

Many mono­grams were scanned from books like Logo Mod­ernismLogo (The Ref­er­ence Guide to Sym­bols and Logo­types) or Mod­ern Mono­grams. Numer­ous mono­grams were also col­lect­ed from pinterest.

Aren’t mono­grams old-fashioned?

When you are brows­ing through new­ly released mono­gram-books, you will notice that most print­ed off mono­grams were designed 40 years ago. So this assump­tion can’t be that wrong.
How­ev­er, there is a new mono­gram trend going on the last five years. Most brands and graph­ic agen­cies real­ized how impor­tant it is to have a logo that can be dis­played effi­cient­ly in a square since all social media net­works (face­book, youtube, twit­ter, …) are using this aspect-ratio.