Always Sunny in Philadelphia Typography

I dunno if any of you guys have seen the show It's Always Sunny in Philadelphia, but I found a whole bunch of kinematic typography youtube videos from scenes in it. They're awesome. If you haven't seen the show, go watch it.

Typographic Rules and Terms

Margin: The typically inactive spatial area on a grid that defines the active area of the composition space and directs the viewer towards the visual elements.

Column: A vertical division of space on a grid that is used to align the visual elements.

Alley: The blank space in between two columns of text.

Module: Spacial areas which aid in arranging visual aspects.  

Gutter: The inside margin or blank space between two facing pages of a book.

Folio: The page number.

What are the advantages of a multiple column grid?

A multiple column grid can be used to divide the grid into intervals, giving more options and possibilities to the design. The columns are adjustable and pliable to the overall design of the layout and helps to create a more purposeful interaction of visual components.

Why is there only one space after a period?

Back when the world used typewriters, letters took up the same amount of space. Thus, it was necessary to put two spaces after each period. Now that letters are proportional to their size, this is no longer necessary.

Character: Any letter, symbol, mark, or sign.

How many characters are optimal for a line of length?:  Between 45 and 65.

Why is a baseline grid used in design?:

Baseline grids maintain continuity across the pages of a design. If all texts sits on a baseline, then it the space between lines and the margins are equal or at least proportional.

Typographic River:

A typical occurrence in justified blocks of text when the separation of the words leaves gaps of white space in several lines. These white spaces align throughout the lines of text, dividing it visually.

How can you use white space in your designs?:

I can use it to frame or shape the text accordingly. It draws the viewers eye across the page to the more complex and interesting parts.

What does type color/texture mean?:

Depending on the font, size and leading of a block of text, it makes a color and texture on the page as a visual element rather than information.

Clotheslining: I have absolutely no idea what this is.

Flowline: Horizontal intervals that separate columns of a grid to create alignment throughout the page.

Hangline: The line at the top of a layout that indicates that no text should be placed above it.

X-Height: The height of a lowercase "x." It is different for every font, but helps to keep all the characters proportional to each other. It affects type color by making it look visually thicker.

Tracking: The space between lines of text.

Kerning: The space in between letters in a line of text. Characters need to be kerned in order to create uniform letter spacing throughout a section of text. Characters that are generally kerned are: pairs with parallel horizontal elements (i.e. IL), pairs that involve a vertical next to a curve (i.e. DH), curve-to-curve pairs (i.e. DO), a curve next to the letter T (i.e. TC), letters surrounded with a lot of white space (i.e. AT).

In justification or H&J terms, what do the numbers minimum, optimum and maximum mean?:

When justifying blocks of text, the computer must decide how to adjust the space between the letters and words. These terms mean the minimum, maximum and optimum amount of space used to justify this text without making it look disjointed and aesthetically displeasing.

What is the optimum space between words?:

One "en" space is generally used as the optimum space between words.

What are some ways to indicate a new paragraph? Are there any rules?:

It is generally accepted that an indentation of text on the first line indicates a new paragraph. While a common misconception is that one tab keystroke will suffice for indentation, the rule is that you should use two "em" spaces for an indentation standard.

Ligature: When two characters are combined to form one unified character.

CMYK: Cyan Magenta Yellow BlacK

RGB: Red Green Blue

Hanging Punctuation: In justified text, the punctuation is sometimes allowed to extend into the right-hand margin area to make the margin look neater. This is called hanging punctuation.

Primes: Straight upside down teardrop characters that are used to indicate feet and inches, minutes and seconds.

Quotation Marks: Curved teardrop shaped characters that indicate quotes and apostrophes, enclosing the text within them.

Hyphen: 1/3rd of an em dash. Used to connect words, break syllables, to connect two broken parts of a word when reading justified text.

En Dash: Half of an em dash, relative to the type face. Used to indicate a range between to preceding and following words, or to substitute the word "to."

Em Dash: The size of a capital "M," relative to the type face. Substituted for brackets or parenthesis, indicates a sudden change of thought or thought patterns, or to indicate a rest less strong than a period, but stronger than a comma.

Widow: A lone word at the end of a paragraph that has a line all to itself.

Orphan: The final one or two lines of a paragraph separated from the main paragraph to form a new column, usually by a page or column break.

Barry Deck (1962-Present)

Ever since the invention of the printing press, type has stayed fairly consistent. It’s transition over the years from Old Style to Transitional and to Modern type has shown some evolution in what fonts we have today, fonts never really pushed the limits of structure for the longest time. In the 1980’s we really see the roots of a type revolution that comes to fruition in the 1990’s, simply called “New Wave” type. This decade featured type that really pushed the limits of structure and conformity within text, led by type designers who believed that not all text needs to be completely legible. At the forefront of this movement were a designer named Barry Deck and his simple yet incredible typeface simply titled “Template Gothic.”

Barry Deck was born in Mount Pleasant, Iowa in 1962. He was always a bit off as a child, and was quoted, saying that he spent most of his time “contemplating world domination while mowing the lawn.” (3) In college, he found his niche, graduating from Northern Illinois University in 1986 with valuable Visual Communications experience. He was soon recruited as 

a junior designer for Lipmon & Simmons Company in Chicago. Soon, he moved on a job as a graphic designer at Kim Abrams Design. This opened doors for freelance work and Deck found many clients in Chicago, New York and Los Angeles. In 1987, he made the decision to return to his schooling and attended the California Institute of the Arts to get his Master of Fine Arts degree in Visual Communications. There, he was taught experimental and edgy approaches to design by instructors such as Ed Fella and Lorraine Wild. Barry would embrace this style of design, adopting it into much of his work. He graduated in 1989 and unleashed his edgy and distorted style into a rather conservative design community. He moved to New York in 1992, where he currently resides today.

Barry’s style of design features mutilated and irregular type and visuals, a concept not widely used in this decade. Style and music magazines embraced his distorted style and soon, his typefaces became a major influence on type designers in the 1990’s. "I am really interested in type that isn't perfect,” Barry said once in an interview. “Type that reflects more truly the imperfect language of an imperfect world inhabited by imperfect beings." He was published in many magazines, including Ray Gun, Emigré, Wired Eye, and I.D., where his typeface Template Gothic, called “the typeface of the decade” by Rick Poyner of Emigré magazine, began to receive recognition. It was inspired by letters drawn with plastic stencils, but uses rounder and more flowing strokes than usual stencils. Barry is tells us the story of how the thought up the typeface:

“There was a sign in the laundromat where I do my laundry. The sign was done with lettering templates and it was exquisite. It had obviously been done by someone who was totally naive. A few months ago, it was replaced with a plastic sign painted by a skilled sign painter. I asked them if I could have the old sign, and they gladly handed it over to me. Now it’s on the wall in my bedroom. I was inspired to design a face that looked as if it had suffered the distortive ravages of photomechanical reproduction. The resulting Template Gothic typeface reflects my interest in type that is not perfect; type that reflects more truly the imperfect language of an imperfect world, inhabited by imperfect beings.” (1)

Thus it refers to a process that is at once mechanical and manual, but was distorted into a hybrid. The co-founder of Emigré magazine recalls the story of the typeface:

"It was designed by Barry Deck while he was a student at Cal Arts in the early 90s. Under the auspices of Ed Fella and Jeffery Keedy there was a lot of exciting type design experimentation going on at CalArts in those days. I remember that particular graduate class came to visit our studio in '92 or so. That's when we first saw Template Gothic. We liked the font and asked Barry if he would let us release it commercially." (2)

 Armenian type designer Hrant Papazian believes that Template Gothic should be partially credited to Ed Fella, instructor and mentor to Barry Deck’s design at California Institute of the Arts. He claims that the entire typeface was a digital version of a hand-made poster by Fella, only created by Deck because Fella sidestepped the use of a computer as a graphic designer. Yet, Deck receives the credit for this work, as he did do most all of the work designing it for computer usage. More than this, Barry has produced numerous other fonts during his freelance work such as Arbitrary Sans (1992), Barry Sans Serif (1989), Washout, Traitor (1997), Truth (1994), Fontoid (A font created solely for Nickelodeon), Canicopulus Script (1989), Cyberotica (1994), Caustic Biomorph (1992, part of FUSE 4), Cyberfriendly, Moderne Sans Serif, Mutant Industry Roman (1989), Bombadeer (1990), Industrial Sans (1990), FauxCRA (2002), Moderne Sans and Orgasm Heavy.

In 1995, Deck created his own company called Dysmedia (later renamed Barry Deck LLC), located in New York. Deck and Dysmedia has worked with several famous clients and are responsible for many of the contemporary iconography we see in advertising today. Deck’s website lists his services available by his company as: “Brand Identity Platforms, Brand Strategy, Visual and Verbal Brand Systems, Brand Guidelines, Activation of New Brands, Revitalization of Old Brands, On-Screen and Print Campaigns, Print Collateral Systems, Packaging Systems
and Signage Systems.” The company has spent two years at Ogilvy and Mather’s Brand Integration Group (BIG), as well as a great deal of freelance work. Some of his more notable clients include:

+Coca-Cola

+Pepsi Cola

+Reebok

+Nike

+Apple

+AT&T

+Vodafone

+Heineken

+EA

+Dupont

+Sony

+Siemens

+Philips

+Charles Schwab

+Hewlett-Packard

+SAP

+Dreamworks

+Warner Bros.

+American Film Institute

+Universal Studios

+E! Entertainment TV Network

+Sundance TV Network

+PBS Public Broadcasting Service

+Nickelodeon

+Vh1

+Stalking Muses

+MoMA

+MoCA

+Conde Nast Publishing

+Atlantic Records

+City of Los Angeles

+The Getty Research Center

Barry’s company, under the auspices of “Barry Deck LLC” still works out of his office at 611 Broadway, Suite 710 in New York, New York 10012. Deck’s company works alongside Anita Lozinski and her own company, “Current Issue BV,” who is based out of Amsterdam.

In 1998, Deck got a job as the Art Director for Ray Gun magazine, a legendary grunge-design music mag. Deck invented the typeface Eu

nuverse in 1999 for Raygun magazine, giving their logo a distinct yet distorted look that defines the magazine. This font was created by flipping and rotating the gun logo, transforming it into the “r” in “Ray Gun.” Soon, Deck spawned an entire font from this concept. As the Art Director for Ray Gun, Deck learned how to create layouts and spreads with a very low budget. Every month, Deck had to oversee the designing of between 70 and 100 pages of content. This inspired highly experimental approaches in a very spontaneous design environment. Deck faced very strict deadlines when designing this magazine, as they did not receive advertising money if Ray Gun did not hit the newsstand on time. Ray Gun was a very cheap magazine, using inexpensive paper and never paying its illustrators and photographers. It was considered an honor to be published within its pages, not a commission. Ray Gun could provide great media exposure for any designers, illustrators or photographers looking for recognition. Ray Gun was a very adaptable magazine, and no strict layout structure was ever applied, as the aesthetic seemed to shift from issue to issue. The layouts were bold and interesting in their uniqueness, making this magazine very popular in the artistic community. With his trademark font on every cover, Deck was propelled to fame and recognition along with the growing magazine.

Barry Deck’s offbeat work has been published in numerous books as well as magazines. “The history of Graphic Design” by Philip Meggs. Contemporary magazines such as Wired, Metropolis, New York Times Magazine and Graphis all have featured his work within their pages. His art has even made it into the permanent collection at the Cooper-Hewitt National Design Museum in New York City. He’s traveled around the country lecturing and teaching his own unique version of design and typography. Perhaps he is not the most notable of designers, but his work greatly changed the direction that typography and graphic design was heading in the 1990’s, and a lot of the imagery and concepts we see in the media today has been affected by his hand. Barry Deck is ordinary man who became a designer and created something extraordinary. He is what every aspiring graphic designer and illustrator aspires to be after college: Someone who changes the world with a dream, a pencil and a simple font. In Deck’s own words: “He continues his effort to help fill the world with interesting, intelligent, idiosyncratic, ironic, beautiful and amusing stuff. And he has no lawn." (3)

Works Cited:

http://www.fontshop.com/fonts/designer/barry_deck/

http://www.papress.com/thinkingwithtype/teachers/type_lecture/history_template.htm

http://www.emigre.com/Bios.php?d=19

http://barrydeck.com/

(3) http://www.identifont.com/show?1HV

http://books.google.com/books?id=jxV4qEolEo8C&pg=PA72&lpg=PA72&dq=barry+deck&sources=web&ots=-AiSjw5a_Z&sig=-abIlIGNnFmReZtSR7Lg5DmhDPE&hl=en&sa=X&oi=book_result&resnum=9&ct=result#PPA72,M1

(2) http://cg.scs.carleton.ca/~luc/usa-iowa.html

(1) http://emigre.com/EFfeature.php?di=125

http://www.cooperhewitt.org/EXHIBITIONS/archive/mixingmessages/essay/typo/t_b.L3.7.html

http://www.amazon.com/gp/reader/1564969487/ref=sib_pdp_cap_3?ie=UTF8&keywords=Barry%20Deck&ie=UTF8&v=search-inside#

http://www.elupton.com/index.php?id=22

Barry Deck (1962-Present)

-Born in Mount Pleasant Iowa in 1962.

-Graduated Northern Illinois University in 1986.

-Recruited as junior designer for Liption & Simmons in Chicago.

-Became graphic designer for Kim Abrams Design.

-Returned to school for Master of Fine Arts degree from the California Institute of Arts in 1987.

-There, studied experimental approaches with Ed Fella and Lorraine Wild.

-Moved to New York in 1992 and became a radical for the conservative typeface community.

-Set up his own company, "Dysmedia," in 1995.

Known for his work with experimental and distorted typefaces. His work help to typify the "new wave" of the early 1990's. Has been published in Wired Eye, Emigre, Ray Gun, and I.D. publications. His typeface Template Gothic was proclaimed by Emigre to be "the typeface of the decade."

Typefaces include:

+Barry Sans Serif

+CanicopulusScript

+Mutant Industry Roman

+Bombadeer

+Industry Sans

+Template Gothic

+Arbitrary Sans

+Caustic Biomorph

+Cyberotica

+Truth

+Traitor

+Eunuverse

+FauxCra

+Moderne Sans

Clients and Projects:

+Coca-Cola

+Pepsi Cola

+Reebok

+Nike

+Apple

+AT&T

+Vodafone

+Heineken

+EA

+Dupont

+Sony

+Siemens

+Philips

+Charles Schwab

+Hewlett-Packard

+SAP

+Dreamworks

+Warner Bros.

+American Film Institute

+Universal Studios

+E! Entertainment TV Network

+Sundance TV Network

+PBS Public Broadcasting Service

+Nickelodeon

+Vh1

+Stalking Muses

+MoMA

+MoCA

+City of Los Angeles

+The Getty Research Center

Quote: "I am really interested in type that isn't perfect. Type that reflects more truly the imperfect language of an imperfect world inhabited by imperfect beings." -Barry Deck

Sources:

http://books.google.com/books?id=jxV4qEolEo8C&pg=PA72&lpg=PA72&dq=barry+deck&sources=web&ots=-AiSjw5a_Z&sig=-abIlIGNnFmReZtSR7Lg5DmhDPE&hl=en&sa=X&oi=book_result&resnum=9&ct=result#PPA72,M1

http://www.identifont.com/show?1HV

http://barrydeck.com

Blackletter

Blackletter is a type of font predominately used from 1150 to the early 1500s. The ornate curving characters that make up blackletter fonts reflects the carefully crafted calligraphy used by monks to make manuscripts during the middle ages. Some forms of blackletter made the transition from hand-written to printed text, but the ornate nature of the font makes it difficult to read in a large quantity. Since the world was moving towards lager books with more text printed quickly and easy to read, blackletter was no longer used in books, but it still has its place as a decorative touch in titles, certificates and other important documents.

 

There are many different forms of Blackletter, shown below:

-Textualis- The most calligraphic form of blackletter, commonly used by French, English and German printers in the 14^th and 15^th century.

-Schwabacher- A predominately German type that was widely used for the printing of Bibles and used rarely ever since.

-Frakture- The most popular blackletter in Germany, especially during the mid 16^th century. It was so popular that any blackletter in Germany was called “Fraktur.”

-Cursiva- The induction of paper rather than parchment made cursive writing much more feasible. Thus, this blackletter form was introduced.

-Lucida- This is the modernized form of blackletter, simplified for more legibility and readability.

Question: What caused the large-scale transition from blackletter to more modern types?

Terms Defined

• Absolute Measurement - a unit of measurement that is expressed in finite terms and cannot be altered based on the measurement of any other object.
  
• Relative Measurement - a unit of measurement that have no prescribed, absolute size and change based on the measurements of other factors relative to it.
  
• Points - The unit of measurement used to measure the type size of a font. 1 point = 1/72 inch = 1/12 pica
  
• X-height - The key reference relative measurement of a typeface described as the hight of the letter "x."
  
• Em - A relative unit of measurement used in typesetting to define basic spacing function. The em describes the horizontal space in which a character is set and changes based on the point size. 1 em = 2 ens = 3 hyphens
  
• Dashes - Short horizontal rules that serve various specific functions such as em rules, en rules, and hyphens.

-Hyphen - 1/3rd em rule. Used to link word.

-En dash - 1/2 em rule. Used to separate page numbers, dates and to replace the word 'to.'

-Em dash - 1 em rule. Used to form lies and house nested clauses.

• Paragraph Alignment - The position of type within a text block, in both horizontal and vertical planes.

-Justification - An alignment that spaces words out evenly in a line, giving irregular spacing from line to line.

-Flush Left - An alignment that places text tight on the left margin and leaves the right margin ragged and choppy.

-Flush Right - An alignment that places the text tight on the right margin and leave the left margin ragged and choppy.

• Letterspacing - Addition of space between letterforms to open up text.
  
• Kearning - The removal of space between characters to close the text up tight.
• Tracking - A value of a text block that adjusts the space between characters.
  
• Wordspacing - Adjusts the space between words.
• Widow- A single word that starts its own new line at the end of a paragraph.
• Oprhan - A single word that starts its own new column or page at the end of a paragraph.
• Hypho - A hyphenated widow that leaves half a word on a line.
• Leading - The space between lines of text in a text block, measured in points.
  
• Indent - An instance were some or all of the text lines in a paragraph are moved in from teh margin by a specified amount.

-First Line Indent - Text indented from the left margin in the first line of the second and subsequent paragraphs.

-Hanging Indent - An indentation from the left or right margin, which affects the second and subsequent lines of a text block.

Universe and Frutiger

Adrian Frutiger (March 24th, 1928 - Present)

He started as a 16-year-old printer's apprentice in Switzerland and ended as the producer of some of the most widely known and used typefaces available. As a graduate of the Zurich School of Arts and Crafts, Frutiger joined Deberny & Peignot typefoundry, where he worked on converting conventional type printing methods into more modern practices. Soon, he began to create his own original typefaces, many of which gained him world-wide recognition.

Frutiger's Fonts:

-President (1952)

-Phoebus (1953)

-Ondine (1954

-Meridien (1955)

-Egyptienne (1956)

-Universe (1956)

-Apollo (1962)

-Serifa (1967)

-OCR-B (1968)

-Iridium (1975)

-Icone (1980)

-Breughel (1982)

-Versailles (1982)

-Avenir (1988)

-Vectora (1990)

Frutiger's most notable font, however, is Univers. It is a new-grotesque, sans serif font that features a higher x-height and even stroke weight to improve legibility. This font was a breakthrough, as it was the first typeface to implement the numbering system (ex. 46 Univers, 45 Univers) as opposed to using names (ex. Bold Italic Universe). This system was spawned with the use of the Univers Grid, or a chart which documents the different variations of the font based on stroke weight and kerning. This system has helped to organize fonts in a way not before conceived. Not only was the system useful, but the font itself grew quite popular. With 27 different variations, it is one of the most adaptable fonts available. In the 1990's, Frutiger began to work with Linotype to produce a Linotype Universe family that contains 63 different weights, each one carefully drawn to be compatible with the other weights.

The Universe Family: