Typography 1990 to Today by Sarah Donnelly

1990 TYPOGRAPHY 2000 TODAY 2010 Sarah Donnelly and Alexandra Mabry

Digital Typography

Logo Design

The History of Adobe

Newspapers and Print

Handhelds

Handlettering

Digital Typography

â&#x20AC;&#x153;Technology

has been improving

typography.â&#x20AC;?

By 1980 over a million people owned a computer and we quickly see that this boom of technology begins to transform everything in its path. As companies like Microsoft and Apple raced to release new and improved computer software programs, we see Typography evolving alongside it. In 1996, Microsoft and Adobe joined forces and developed a new font format called OpenType. OpenType combined the former leading font technologies, PostScript and TrueType, to create a program that was more user friendly and worked across multiple platforms. This revolutionized the sophistication of digital typography. The available characters per font went from 300 or over 100,000.

nt-varientfont-sizefont-family<bold>font-weight</bold>small-caption<del>status-bar</ efont-family<bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subsc m><bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style </ rk>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style font-varient<subscripted>icon</subscripted> font-style font-varientfont-sizefont-family</e icon</subscripted> font-style font-varientfont-sizefont-family<bold>font-weight</bol font-style font-varientfont-sizefont-family<bold>font-weight</bold>small-caption< nt-varientfont-sizefont-family<bold>font-weight</bold>small-caption<del>status-bar</ efont-family<bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subsc m><bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style </ rk>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style font-varient<subscripted>icon</subscripted> font-style font-varientfont-sizefont-family</e icon</subscripted> font-style font-varientfont-sizefont-family<bold>font-weight</bol font-style font-varientfont-sizefont-family<bold>font-weight</bold>small-caption< nt-varientfont-sizefont-family<bold>font-weight</bold>small-caption<del>status-bar</ efont-family<bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subsc m><bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style </ rk>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style font-varient<subscripted>icon</subscripted> font-style font-varientfont-sizefont-family</e icon</subscripted> font-style font-varientfont-sizefont-family<bold>font-weight</bol font-style font-varientfont-sizefont-family<bold>font-weight</bold>small-caption< nt-varientfont-sizefont-family<bold>font-weight</bold>small-caption<del>status-bar</ efont-family<bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subsc m><bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style </ rk>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style font-varient<subscripted>icon</subscripted> font-style font-varientfont-sizefont-family</e icon</subscripted> font-style font-varientfont-sizefont-family<bold>font-weight</bol font-style font-varientfont-sizefont-family<bold>font-weight</bold>small-caption< nt-varientfont-sizefont-family<bold>font-weight</bold>small-caption<del>status-bar</ efont-family<bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subsc m><bold>font-weight</bold>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style </ rk>small-caption<del>status-bar</del><subscripted>icon</subscripted> font-style font-varient<subscripted>icon</subscripted> font-style font-varientfont-sizefont-family</e icon</subscripted> font-style font-varientfont-sizefont-family<bold>font-weight</bol font-style font-varientfont-sizefont-family<bold>font-weight</bold>small-caption<

TYPOGRAPHY

HTML was developed in 1990, giving birth to the World Wide Web. This invention forever changes the way we view and interact with type. Typographers now must apply their skills to create fonts on a whole new medium.

“In the late 1970s and early ’80s, computer-generated text was represented by bitmapped letterforms at fixed sizes. A bitmap is simply an array of pixels, arranged in a specific order.”Therefore, font choices were limited to what already came on the device.

We even see that the browser controlled what web fonts were displayed. It wasn’t until Netscape introduced the HTML tag in 1995, that designers were allowed to choose their own fonts and placements. HTML and CSS coding depicts a large amount of the characteristics that different fonts can have such as size, color and positioning.

“HTML is to the web what moveable type is to the printing press.” - Jim Boulton

Web Based Fonts Arial

Comic Sans

Verdana

Georgia

Avenir Geneva Tahoma

Lucida

Palatino

Times New Roman Gotham

Caslon

Impact

Matthew Carter M

atthew Carter is one of the most important typography designers of our time. He started his career working primarily with print. He gained a lot of experience working at the EnschedĂŠ foundry in the Netherlands learning to create fonts by hand. Later on in his career he applied these skills and knowledge to the digital screen. His two most famous fonts are Georgia and Verdana. Both of these fonts were intended for the digital needs of the nineties focusing on legibility on screens. His fonts were affective then and remain extremely relevant today.

g Designed to provide clarity on low resolution screens.

Credited with being both legible and charming. Inspired by the font Scotch Roman.

eorgia

erdana Originally designed for the Microsoft Corporation. The name plays off of the words verdant which means something green in Seattle and one of the designers daughters named Ana. Designed to increase legibility at small scales.

Logo Design

Logo

Evolution 1998 Baskerville Bold with a 3D effect.

2015

Tailor-made sans-serif font, called Product Sans.

The evolution of the Google logo is just one of many examples where we see a transition to sans serif fonts and cleaner lines.

History of Adobe

FUN FACT John Warnock and Chuck Geschke founded adobe in December of 1982. With little direction and no money they both left Xerox to start up this new company. Adobe was named after the creek that ran behind Johnâ&#x20AC;&#x2122;s house.

The 1984 History of Adobe

Adobe creates Type 1 version of Linotype Fonts.

Adobe Illustrator was created.

1987 1986

Over 100 fonts were in Type Library.

Photoshop was released. It was originally a subset of illustrator and wasnâ&#x20AC;&#x2122;t expected to succeed.

1988 1991

Photoshop outsells illustrator.

1 Billion dollars in revenue and over 2800 employees.

1.9 Billion dollars in revenue and over 4280 employees.

1997

2007 1999

Adobe released InDesign.

Newspapers and Print

niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.” “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Starting in 1970 newspapers began using the process of reprehenderit in voluptate velit esse printing that is still used today. Referred to as the “cold type” cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat process, eliminated the intensive labor that was necessary to non proident, sunt in culpa qui officia use the traditional letterpress. deserunt mollit anim id est laborum.” ”Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. “Most daily newspapers use some form of offset printing. ThisUt enim ad minim veniam, quis nostrud exercitation ullamprocess etches the image of a newspaper page onto thin aluco laboris nisi ut aliquip ex ea commodo consequat. minum plates. These plates, now bearing a positive imageDuis aute irure dolor in reprehenderit in voluptate velit esse developed from a full-page photographic negative, then goeu fugiat nulla pariacillum dolore

Newspapers and Print

to other specialists for mounting on the press. The process is called offset because the metal plates do not touch the paper going through the press. Instead, the plates transfer their inked image to a rubber roller, which in turn prints the page.”

tetur adipiscing tempor incidid magna aliqua. niam, quis nos co laboris nisi u do consequat. reprehenderit cillum dolore e Excepteur sint non proident, deserunt molli “Lorem ipsum tetur adipiscing tempor incidid magna aliqua. niam, quis nos co laboris nisi u do consequat. reprehenderit cillum dolore e Excepteur sint non proident, deserunt molli ”Lorem ipsum tetur adipiscing tempor incidid magna aliqua. niam, quis nos co laboris nisi u do consequat. reprehenderit cillum dolore e

FUN FACT

In 2004 The U.S. State Department banned Courier from all official documents,

AG AG replacing it with Times New Roman.

Handheld Devices GameBoys, Tablets, and Cell Phones

History of Cell Phones

Simon PDA is the first attempt at a pager/cell phone/notebook computer combination. Also, worked by use of a touch screen.

World’s first portable cell phone produced by Motorola called the Motorola DynaTAC

1993

1983

1989

Motorola came out with the first “flip phone” the Motorola MicroTAC, the smallest and lightest phone of its’ time.

1994

More than just a cell phone. Motorola released the first phone that combined voice dispatch, cellular, paging, and data communication

Texting begins with the worldâ&#x20AC;&#x2122;s first two-way pager, the Tang two-way personal messenger

1995

1996

iDen i1000plus Handset was the first phone to combine a digital phone, two-way radio, alphanumeric pager, internet microbrowser, e-mail, fax and two-way messaging

First iPhone released

1999

Motorola StarTAC had the first display screen on a cell phone.Shortly after, the first smartphone released by Nokia, The Nokia 9000 Communicator

2007 2002

First camera phone released by Sanyo

iPhones Today From 2007 until 2015 Apple used Helvetica as their primary iPhone typeface. In 2013 they made a simple change to a different version of the Helvetica font called Neve Helvetica. Apple recently decided that a more major change in typeface was necessary in the iOS 9 update to the iPhone and this is what they had to say about it,

â&#x20AC;&#x153;Apple designed the San Francisco family of typefaces to provide a beautiful, consistent typographic voice and reading experience across all platforms. In iOS 9 and later, San Francisco is the system font. San Francisco consists of two optical sizes: Text and Display. Text is used for sizes that are below 20 points and Display is used for sizes that are 20 points or larger. When you use San Francisco in your app, iOS automatically switches between Text and Display when appropriate.â&#x20AC;?

Erik Spiekerman E

rik Spiekerman is a typography designer from Stadthagen, Germany. He specializes in information design, his goal is to provide typographic clarity. You can tell in his projects that he sees value in transparent design. In 2001 he branded Nokia with a font called Meta, a typeface that they believed had too much character, and the company replaced it a few years later. Meta soon became one of the most popular fonts in the early world of computers.

â&#x20AC;&#x153;What I believe is that, after all the hype about the New Economy, we are going back to the original reason for being on Earth: to find ways to improve our lives, and the way we live together, and to preserve this planet. As graphic designers, we contribute to this by making things easy to use and pleasant to behold. That can be a website, a timetable, a magazine or even a legible and beautiful typeface.â&#x20AC;? -Speikerman

Handlettered Typography

Handmade Revival Recently, there has been a revival in handmade type. The new way to stand out is to create your own type from scratch. People no longer have to apologize for imperfections in their type, in fact it is welcomed, and small flaws make logos and graphics unique to the designer and the brand it is representing.

Bibliography Poulin, Richard. Graphic Design And Architecture, A 20Th Century History : A Guide To Type, Image, Symbol, And Visual Storytelling In The Modern World. Beverly, Massachusetts: Rockport Publishers, 2012. eBook Collection (EBSCOhost). Web. 9 Feb. 2016. Haley, Allan. Typography, Referenced : A Comprehensive Visual Guide To The Language, History, And Practice Of Typography. Beverly, MA: Rockport Publishers, 2012. eBook Collection (EBSCOhost). Web. 9 Feb. 2016. Boulton, Jim. 100 Ideas That Changed The Web. London: Laurence King Publishing, 2014. eBook Collection (EBSCOhost). Web. 9 Feb. 2016. “The History of Adobe.” Adobe 25th Anniversary Timeline. N.p., n.d. Web. 9 Feb. 2016. <https://www.adobe.com/ aboutadobe/history/timeline/>. “HTML CSS.” w3schools. N.p., n.d. Web. 9 Feb. 2016. <http://www.w3schools.com/html/html_css.asp>. Kerr, Justin. “The History of Web-Safe Fonts.” HOW. N.p., n.d. Web. 9 Feb. 2016. <http://www.howdesign.com/web-design-resources-technology/the-myth-of-web-safe-fonts/>. “Matthew Carter Typography Designer.” Design Museum. Design Museum, n.d. Web. 9 Feb. 2016. <http://design. designmuseum.org/design/matthew-carter>. “About Motorola: History.” Motorola. N.p., 2010. Web. 11 Feb. 2016. <http://www.motorola.com/us/consumers/about-motorola-us/About_Motorola-History-Timeline/About_Motorola-History-Timeline.html> Emery, Steve. “Simon Cellular Phone/PDA (Personal Digital Assistant) (1994).” History of Computing an Encyclopedia of the People and Machines That Made Computer History. California: Lexikon Services, 2000. N. pag. Print. Pipes, Alan. “Layout.” How to Design Websites. London: Laurence King, 2011. 80-81. Print. “Erik Spiekermann: Typomaniac.” YouTube. YouTube, 18 Jan. 2013. Web. 12 Feb. 2016.

Process Work Sarah Donnelly

Sample Layouts

Sample Graphics

Research