TYPOGRAPHY from the early 90’s until present
1
9Template Gothic 10Emigre Fonts 12Rudy VanderLans 14Cranbrook Academy of Arts 16Deconstruction & Typography 18Ed Fella 20P. Scott Makela 22Stephan Sagemeister 24Matthey Carter 26David Carson 28Rick Poynor 30Web Safe Fonts 32Google Fonts 34Type & Internet Fonts 36Handheld Video Games 38Typography Today 40Cellphone Fonts 42Responsive Typography 44Type Today
2
Tab of Co
ble
ontents 3
Typography: 6/8 Futura Std Book Captions 9/13 Futura Std Book & Oblique 21/25 Futura Std Book Quotes 34/40 Futura Std Light Subheads 55/66 Futura Std Book Headings Cover & Book Design: Allison Sutton, Danley Walkington, and Ali Syafie The authors of this booklet would like to give special thanks to the many designers and typographers that inspired
4
Type
From the early 90s to the present
5
6
Zeitgeist The social and economical goings of the 1990s to the present had a lot of changes good and bad. In the beginning of the 1990s Nelson Mandela was released from prison in South Africa, Eat and West Germany reunite following the collapse of the Soviet Union,Boris Yeltsin becomes Russia’s first elected President, the European Union was created when Maastricht Treaty was signed, Bill Clinton is elected President, 6 nations become independent in Europe, Russia and the USA sign START II Treaty, Nelson Mandela becomes President of South Africa, the Channel Tunnel connecting France and England opens up. The middle of the 1990s World Trade Organization is created, Bill Clinton is elected for a second term and will later face impeachment proceedings, Madeleine Albright is appointed the first female Secretary of State for the USA, Scotland created its own Parliament, the first Harry Potter book was published, the USA has a budget surplus for the first time in thirty years and eleven countries start the use of the Euro as their currency. The 90’s would also see an increase world wide of using, producing and smuggling of the drug trade while these drugs are more addictive and destructive. There was also an increase in Aids in Africa and the developed world. The 90s would see an emergence of grunge and a bigger fixation of pop culture. The 2000s would see a second Bush elected president, Hillary Clinton becomes the first Lady of the USA to win public office, September 11th, Enron filed for bankruptcy, United Airlines filed for bankruptcy, president Bush authorizes $350 billion in tax cuts over 10 years, reality TV become popular, Queen Elizabeth II celebrates 50 years ruling. Presently we are seeing LGBT rights gaining popularity, marriage equality, movements in race, the creation of Obama Care and an emergence out of a recession. The 1990s was the beginning of the electronic age; it changed everything. Personal computers turned from being a curiosity to an essential item of the homes of everyday Americans. Computers made it possible for others to connect with one another from all sides of the world as computers were spreading globally. This influenced the world in making it more fast paced than ever before. The introdcution of the Apple Macintosh and Microsoft Windows 3.0 opened up users to the World Wide Web, a graohical verison of the Internet invented by Tim Berners-Lee in 1991. By the mid 1990s, search engines learned to “crawl” the web and index its content. The 90s also introduced the mobile phone. This altered the way humans communicated in a way that the computer was not doing. It made it possible for people to talk just about anywhere, anytime. There was also the itroduction of the digital camera, DVDs, and MP3 format. Coming into the 2000s, all these technologies developed at rapid paces. Architecture during this time from the 1990s-Present we have scene a shift into creating buildings and homes that are designed a build fast and not made to last. The new style of architecture is a very clean design, clean lines, and minimalist with an industrial feel. Architecture today is also looking at using new materials to build with such as shipping containers and a new look on how much space we really need with the emergence of tiny houses. Today there is also a need for more energy efficient homes, buildings and the goal to go as green as possible.
7
1
8
“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.�
2
Template Gothic Typeface by Barry Deck Designed by Barry Deck in 1990, Template Gothic was inspired by lettter drawn by plastic stencil. Inspired by the sign he sees at the laundromat. The typeface thus refers to a process that is manual. Deck wanted this typeface to look different compared to the basic sans serif font. He wanted it to be imperfect and shows more motion rather than the firmly structured still font. Deck, was attending CalArts when he designed this typeface. Mentored by Ed Fella, he was inspired by Ed’s work and the unstructured typography that he applies to his designs. 9
Emigre Fonts Type Foundry Based in California, Émigré is a type foundry founded back in 1984 by Rudy VanderLans and his wife. Émigré took advantage of Macintosh to create and design types. It followed to release some of the worlds most famous fonts. VanderLans not only started a foundry, but he also continued to publish Emigre Magazine with his wife. Mainly being a graphic design company, Emigre worked with some of the most prestigious graphic artists. Vanderlans, who attended CalArts, was able to work with plenty of designers. The company’s type library features fonts by Mark Andresen, Bob Aufuldish, Jonathan Barnbrook, Rodrigo Cavazos, Barry Deck, Eric Donelan, John Downer, Elliott Peter Earls, Edward Fella, Sibylle Hagmann, Frank Heine, John Hersey, Jeffery Keedy, Zuzana Licko, P. Scott Makela, Conor Mangat, Nancy Mazzei, Brian Kelly, Miles Newlyn, Claudio Piccinini, Just van Rossum, Christian Schwartz and Rudy VanderLans himself. 10
2
1
3
11
Rudy
1
VanderLans 12
2
As the co-founder of ÉmigrÊ, Vanderlans is a big name in the design industry. He designed a range of fronts for the Macintosh when it was first released. He studied at Royal Academy of Art in The Hague, before he went on to move to Berkeley and studied Photography at UC – Berkeley. When Macintosh was released back in 1984, Vanderlans was inspired to design fonts that was not provided by Apple. He designed 3 fonts that stood out. Oblong, Suburban, and Variex are decorative fonts that are feature geometric shapes and angles. His wife, Zuzuana Licko also helped him design some of his published fonts. Suburban is the only font family Vanderlans made on his own. The font family was a reaction to his education in The Hauge, allowing himself to disprove some of the basic notions he learned about type design. Since he had always been attracted to hand-lettered script faces, the font is a combination of fairly rational, geometric shapes and calligraphy-inspired characters.
13
Cranbrook Academy of Art In its history, Cranbrook has educated some of the nations greatest graphic designers. Regarded as one of the better art schools, artists such as Ed Fella, Peter Bohlin, and Nick Cave has gone through the ranks and enter the design industry as prepared as they can get. Cranbrook did a lot for Ed Fella, it allowed him to start focusing more on his personal interests as a designer and does not restrict him to strict guidelines. The institution is also regarded as a National Historic Landmark.
1
14
Past Rankings Graphic Design, 6th (2012) Industrial Design, 4th (2012) Ceramics, 2nd (2012) Fiber, 1st (2011) Metalsmithing, 6th (2011) Painting, 11th (2012) Photography, 13th (2012) Print Media, 6th (2012) Sculpture, 8th (2012)
2
3
4
15
Deconstruction 1
2
Deconstructuon is movement in design that emerged in the late 1980’s. The idea is to show how something is constructed, but still be functional as a form of art or architecture.
One of the unique things about this movement is that it forces the viewer to ponder about how things are put together. It’s philosophy states that “architecture is a language capable of communicating meaning and of receiving treatments by methods of linguistic philosophy”. Some of the leading architects such as: Frank Gehry, Im Pei, and many other architectural firms have created designs in this style.
3
16
4
“When typography is on point, words become images.�
Typography is the arranging of type by selecting the font, size, and all the elements of interaction between each letters. As an huge part of the design system, typography is unavoidable. Not only design, typography is also a big part of technology. Ranging from print to web media, typography is one of the core foundations in good design. Typographers all around the world design various typefaces, starting from highly structured fonts like Bodoni and Garamond, to designs that does not follow any typographic and design rules, such as Ed Fella.
Typography A
A
A
5
17
Ed Fella
Graphic Designer
1
Typography is one of the core essentials in graphic design. As the form of communication in digital arts, structure and legibility are usually what most people go for. Ed Fella, Detroit-born graphic designer/typographer, is currently regarded as one of the most prestigious graphic artist. Yet his work stands out from all others, due to his style of bashing any rules of typography. Fella attended 3 schools in his journey to success. Straight out of high school, Fella jumped straight into the field to become a commercial artist. 30 years later he earned his BFA from College for Creative Studies in Detroit, and 2 years later he follow to earn his MFA from Cranbrook Academy of Arts. Where then he immediately started teaching at California Institute of the Arts, till this day. Throughout his college career, Fella started experimenting more, which resulted his style. Using paper and pencil as his main media, Fella creates stunning figures of type that does not follow any consistent typeface.
“I don’t like to use terms like “good,” “bad,” “beautiful,” “ugly,” because they continually take on different meanings.” Most of his work contains messages that are designed to have striking visual interest. Not only playing with form, Fella also incorporates vibrant colors using pencils in his work, making it look very handdrawn and beautiful. With the skillset that he is known for, Fella inspired many artists throughout his times at Cranbrook Academy of Art and California Institute of the Arts. Barry Deck, who attended CalArts when Fella was an instructor there, designed the font Template Gothic. He sateted that he is intrigued by the beautiful typographic forms Fella creates, without being cliche.
18
2
http://www.2plus3d.pl/assets/images/580_lightbox_Ed-Fella_12.jpg
19
P. Scott Makela
Graphic Designer As one of the first designers to utilize Adobe programs, Photoshop and Illustrator, Makela creates unique design using type. Makela graduated from Minneapolis College of Art & Design 1985. Where he then worked with several big name clients such as Apple, Nike, Sony, and a number of movies. Together with his wife, they became a designer and director at Cranbrook Academy of Art. He also deigned typefaces, Dead History, his most known typeface explores geometric shapes and patterns while also using the classic serif typeface. It explores the new possibilities through Illustrator at the time. Some say that it is a mix betweed older serif fonts with futuristy ne-age geometric fonts. 1
Afetr he finished his undergrad, he then moved to Los Angeles for five years, where then he left to attend grad school at Cranbrook Academy of Arts. There, he started to know where he wanted to go in his graphic design career. He went back home to Minneapolis to work as an art director at Walker Art Center. He said he is interested in engaging with his clients and creating brilliant design. Makela also worked with page design, where he uniquely prioritizes visual effects and layers of text rather than legibility. Sadly, Makela was diagnosed with a rare infection which took his life at only 39. Gruwing up with dyslexia, Makela had a hard time being understood. Yet he used type to express himslef to other people, allowing him to communicate in a form used by the world more expressively than the usual human being.
20
2
21
Stephan Sagemeister Inspirational and intriguing designer Stefan Sagmeister is recognized for his unorthodox, provocative designs that tweak the status quo and question the designer’s role in society. Stephan Sagemeister was born in Bregenz, Austria in 1962. Sagemeister began to have an interest in design around 14 to 15 years of age. To which he began his unconventional career a the age of 15 writing for a small, left-wing magazine Alphorn, were he soon realized he found working on the layout was much more enjoyable than writing the articles. During this time he played in bands which he said he was not very good at but then brought him to become interested in album covers. Sagemeister applied to design school at the age of 18 to which he did not get accepted. He then attended a small, private art school for a year and reapplied to the University of Applied arts Vienna. He was accepted and attended for four years to which then received his M.F.A. in 1985. He then received a Fulbright scholarship to study at Pratt Institute in New York. During this time Sagemeister found to be influenced by Tibor Kalman of M&Co and would label him as gg his only design hero. Sagemeister was
22
his only design hero. Sagemeister was eventually hired by M&Co in 1993, to which he found that Kalman had a knack for giving wisdom-laced advice, which would influence him while he started to obtain his own career. Most importantly encouraging Sagemeister’s own creative restlessness. After M&Co surprisingly disbanded Sagemeister began to specialize in CD cover design. I.D. Magazine, wrote the his “CD package designs are what poetry is to prose: distilled, intense, cunning, evocative an utterly complete. His Intentions have set a new standard.” Sagemeister would receive two Grammy Awards for his design work in CD cover design. After a trip to South Korea, Sagemeister encountered the MP3 and thought that the CD would be irrelevant in less then two years. With this in mind he wanted to reinvent his practice, so he announced a oneyear sabbatical from all commercial work, and retreated to Bali. During his time in Bali he realized that he needed to stick to the lan-
guage he knew in how to talk and design to find if he had something to say. Thus his text-based artwork was created. Sagemeister placed his own personal touch in his new artwork, by building letterforms that both spelled out and illustrated maxims pulled form his diary. After four years away from Bali, Sagemeister made another professional life change in 2012. He replaced the “S” with an “&” in his studio’s logo. There was also an addition of Jessica Walsh as his business partner and renamed the company Sagemeister & Walsh. Sagemeister fixed his focus on the broader impact of design—to change the perceptions and possibly behavior in 2008. He wanted to have a freedom of authorship in his work. He did not want to deign someone else’s ideas, instead wanted to give the experience of “walking into the designer’s mind’ though interactive digital and analog typographic investigations.
23
“As the saying goes, type is a beautiful group of letters, not a group of beautiful letters.”
Matthew Carter
24
Matthew Carter Carter’s life has the contours of a manifest destiny toward typography. Carter’s reputation is on built on both good type and good words. Matthew Carter was born October 1st, 1937 in London, United Kingdom, is a type designer and the son of English Typographer Harry Carter (1901-1982). Carter at the age of 20 spent a year in an internship program at the famous Enschedé printing house in Haarlem, Netherlands where he learned to cut punches by hand. Carter passed his exams to attend Oxford but couldn’t see himself spending three years at the university after having a year in the real world. He expected his father to disapprove of his decision not to attend Oxford but found him supportive of his decision. His father helped introduced him to important people and set him on his chosen career path. After five years at Enschedé, Carter e and lettering spent six years as a freelance type and lettering designer in London. Carter made a trip to New York City that had him go from a type-maker to a type designer. It was in New York that he was astounded by the progressive, creative typographic com-
positions of Herb Laubalin, Militon Glaser and other luminaries of New York’s commercial art scene of the 1960s. Carter returned to London where he worked with several others to produce several sans serif faces, including one for the new terminal at Heathrow Airport. Carter then took a job few years latter at Mergenthaler Linotype in N.Y.C. designing new typefaces for photo compositions, including Snell Roundhand. He moved back to London in 1971 and continued to produce designs for Linotype companies, designing Bell Centennial, a typeface commissioned in 1974 by AT&T which is still in use today. In 1981 Carter and three other associates left Linotype and founded a type design company Bitstream in Cambridge, MA. Where they developed a library of digital type, including Bitstream Charter, which could be licensed for use by anyone. Carter left Bitstream in 1991 to form Carter & Cone type foundry. He designed So-
phia and Mantinia, a display companion to his earlier face Galiard in 1993 and also designed Wrigley for Sports Illustrated. Carters company was commissioned by three leading news publications Time, Newsweek and US News & World Report. Carter created the Walker typeface for the Walker Art Center in Minneapolis, where he proposed not a logo, but a family of characters with horizontal rules and five varieties of “snapon” serif. In the mid-’90s Carter worked with Microsoft to create “screen fonts” to maximize the legibility of type on computer monitors. These types Verdana, Tahoma and Nina are sanserif while Georgia is a serifed. Georgia and Verdana were created primarily for viewing on computer monitors. Seven of Carter’s typeface are in the permanent collection of the Museum of Modern Art: Bell, Centennial, Big Caslon, ITC Galliard, Mantina, Miller, Verdana and Walker. Carters career has gone from the creation of physical metal type to digital type.
25
David Carson Carsons legendary disregard for readerly conventions has made him a hero to some and an agent of ugliness to others.
David Carson was born in Corpus Christi, TX on September 8th, 1954. Carson is an American Graphic designer, art director and surfer. Carson is best known for his innovative magazine design and use of experimental typography. Carson spent most of the beginning of his life as a high school teacher before becoming a designer. When Carson was 26, he was teaching at a school in southern Oregon when he received a flyer in the mail —intended for high school seniors—for a summer program in graphic design at the University of Arizona in Tucson, to which he decided to attend. This workshop was run by Jackson Boelts, who became a mentor and lifelong friend. A few years later Carson enrolled in another summer workshop in Rapperswill, Switzerland where he was challenged to work experimentally and find reasons for shaping
26
form in particular ways. In the early 1990s, Carson’s primary medium of visual authorship was QuarkZPress and PageMaker, as digital tools were crashing with the Modernism. These mediums allowed Carson to work quicker and try more things in shorter times. In 1995, Carson would publish a monograph called The End of Print. This title came from the comment by British designer Neville Brody, who would say everything with type and design has been tried, and that a move to a different medium was needed. Carson is not only a designer but also a surfer and he qualified as the 9th best surfer in the world in 1989. This interest in surfing gave him the chance to experiment with design while working with several publications related to this profession. Skateboarding, Beach Culture, How Magazine and RayGun
were some of major publications he worked with. RayGun though is where he gained the most recognition and was able to show his design style, distinguished by “dirty” type, with the widest audience This style does not adhere to the standard practices of typography and is often illegible. After his success with RayGun and press he received fro the New York Times and Newsweek, he ended up forming his own studio, David Carson Design, formed in 1995. It was from 1995 to 2003 he ran this studio in New York City, to which he worked with a diverse clientele with a range between fashion, entertainment and beyond. Some of these clients were Nike, Toyota, Quiksilver and MTV. Carson moved graphic design into a cultural force and a medium with its own shape and direction.
“He significantly influenced a generation to embrace typography as an expressive medium�
Steven Heller 2010
27
28
Rick Poynor A writer on Design, Graphic Design, typography and visual culture. Rick Poynor was born in 1957 in the United Kingdom. Poynor is a writer, critic, lecturer and curator, specializing in design, media, photography and visual culture. Most of his writing is concentrated both in the alternative and self-directed forms of design practice. He has a special interest in practitioner and enabler with the development of design writing and criticism. Poynor is the founding editor of Eye magazine, to which he edited from 1990 to1997, has contributed the “Critique” column in Eye since 1999 and is now it’s writer at large. Poynor is also a columnist and contributing editor for Print magazine in New York and is a co-founder of Design Observer website, to which he writes regularly. Poynor studied history of art at the University of Manchester and received his MPhil in design history from the Royal College of Art. He was a visiting professor at the RCA from 1994 to 1999 and a research fellow form 2006-2009. He also taught at the Jan van Eyck Academie in Maastricht in the Netherlands. He has been a visiting critic and lecturer at many design schools in the
UK, Europe, USA, Australia and China and is a frequent speaker at international conferences and other public events. Before becoming the editor of Eye magazine he was an assistant editor of Designers’ Journal and deputy editor of Blueprint. Poynor has had multiple articles, essays and reviews appear in many international publications. Poynor has published multiple books on design, approximately 15. In 2007 he was a featured interviewee in the documentary Helvetica. Poynor has curated a few shows to included, the major survey exhibition “Communicate: Independent British Graphic Design Since the Sixties” at the Barbican Art Gallery, London in 2004. This show traveled to countries China and Switzerland. He curated “Typographica” at the Kemistry Gallery, London in 2009. His exhibition “Uncanny: Surrealism and Graphic Design” was the first international and historical survey of this subject and was featured at the Koravian Gallery in Brno, Czech Republic in the summer of 2010 as well at Kunsthal, Rotterdam, during the fall of 2011.
Type is saying things to us all the time.
Typefaces express a mood, an atmosphere. They give words a certain coloring.
Rick Poynor
29
Hoefler & Frere Jones The Beatles of the Type World Type designers extraordinaire Jonathan Hoefler and Tobias Frere-Jones are recognized for their contributions to the typographic landscape Hoefler and Frere Jones are responsible for some of the most well-designed and beautiful typefaces of the digital era. These two type designers brought a fearsome knowledge of typographic history and combined that with a great eye to help evolve traditional letter forms into a whole other type system. Together as a duo they were able to create contemporary typefaces with amazing technical quality and have an emotional impact. Hoefler and Frere Jones were born in New York during the same week in August of 1970 with just six days separating them. Hoefler and Frere-Jones each took an interest in letter forms early on in life as children. Frere-Jones puzzled over the Gill Sans lettering on jars of jam his English mother would bring back from the UK. He wondered what made them seem so British, to which it took him some time to realize that it was the letters. When he was a student in Brooklyn he received a message from renowned typographer Ed Benguiat. He learned after returning the call that he was invited to attend a letter form design class at the School of Visual Arts thought by Benguiat. Frere Jones would later study graphic design at the Rhode Island School of Design before he joined the Font Bureau in Boston. While in Boston Frere Jones designed Poynter Oldstyle and Interstate. Hoefler was extremely fascinated by codes and ciphers, he learned that typography was incredibly coded and that the choice of typeface could tell you so much about the product it was on. Hoefler was mainly selftaught and opened up Hoefler Type Foundry in 1889. To which he received acclaim for Knockout and Hoefler Text, which is widely used by Mac computers and tech iPad. He also designed original typefaces for maga30
zines Harper’s Bazaar and Rolling Stone. Both Hoefler and Frere Jones careers ran in the same directions during the 1990s. They frequently competed for projects and would bid against each other for rare type specimens at antiquarian book fairs. They would often share advice though email and fax, and it became apparent that by combining their efforts would have advantages. In 1999 Frere Jones joined Hoefler’s studio as a principal to which later Hoefler & FrereJones (H&FJ) would be created. They have been commissioned by clients Martha Stewart Living, Nike, Pentagram, the New York Times and the New York Times Magazine to create original typefaces. The pair would look to historical records to create new typefaces as a search of unfinished ideas that would invite new solutions. Frere Jones called this approach to history “atomized.” They would apply an intense process of research to take in consideration of every letter of the font. Hoefler adopted Python in the mid-1990s. Much of this was spent in the development of tools to automate repetitive tasks, such as kerning. Hoefler’s tools allowed designers to move through entire regions of the alphabet at once, reviewing at a glance all diagonal or round shapes. In the design of Retina the pair would analyze more than 120 national and international newspapers and collect 3,800references examples to see how agate type is used. Retina would integrate specific features to maximize legibility where the low-quality of newsprint and small typeface are used. Ink traps prevent pooling where strokes intersect, larger counters within letters provide more with white space and the disambiguation of forms ensures that a
capital letter “B” and a number “8” would look dissimilar. The font Retina would land a spot in the Museum of Modern Art’s permanent collection—along with Gotham, HTF Didot and Mercury type families—in 2011. The designers’ work is also int he collections of the Victoria and Albert Museum and the Cooper-Hewitt, National Design Museum. H&FJ’s Gotham, introduced in 2000, is one of the most successful typefaces designed within the last 20 years. It was originally commissioned for GE Magazine. It was inspired by New York City building signage. Gotham was selected in 2004 for the cornerstone of One World Trade Center because of it’s connection to New York City History. Gotham has also gained a high visibility within pop culture. The company has amassed a body of almost 800 fonts. Known as the Beatles of the type world, Hoefler and Frere Jones had a bitter split that is described as “the legal equivalent of a knife fight in the street” in 2014. Frere Jones alleged in 1999 Hoefler made an agreement with him to become a formal 50–50 partner with Hoefler Type Foundry. Allegedly Hoefler stalled him for years from gaining the equity and finally denied him all shares in the company that bore his name in October 2013. Frere Jones filed a lawsuit against Hoefler claiming entitlement to half the type foundry, a $3 million company, based on the oral agreement. Frere Jones believes he was tricked by Hoefler in transferring ownership of several fonts to Hoefler & Frere–Jones in exchanged for 50% equity of the company. The split is scene as a divorce, a tragic loss to the design and type world but also a loss of a classic creative friendship. They settled the bitter lawsuit in September 2014 but the terms of the settle-
31
Web Safe Fonts
What are they?
Do not get confused: a web font and a web safe font are not the same. Web safe fonts are fonts that are pre-installed by many operating systems. So how exactly do they work? When opening a web page the browser is told to write text onto the screen using a specified font—one that is stored on the computer that the browser is running on. Therefore, if the web page’s code is calling for a font that a user does not have installed on their computer, it won’t appear. Web safe fonts ensure that the correct font, or a similar one in style will open across all operating systems, most notably Microsoft and Apple. Worried about a specific font not appearing on a web page? There is always an option to convert the image into text. Though, the advantage of using a web safe font is that it will always render itself to the high-
est possible DPI on the operating system that it is opened on. Typekit and other online services offer libraries where web safe fonts can be downloaded for use. Both Microsoft and Apple products come installed with two separate font packs and overall, only sixteen web safe fonts overlap with each other and will be displayed on both operating systems.
One thing to be aware of when using web fonts compared to web safe fonts is the rendering.
32
What’s safe? MICROSOFT & APPLE
Arial Arial Black Century Gothic Comic Sans Courier Courier New Geneva Georgia Impact Lucida Palatino Tahoma Trebuchet MS Times Times New Roman Verdana
33
Google Fonts A Revolution in Web Fonts: Escaping the Boring + Standard Google Fonts is the solution for easy and adaptable web typography. It is free to download and simple to use. Google Fonts was created in 2010 after web designers were being forced to limit their live text font choices to those typefaces commonly pre-installed on most machines, such as web safe fonts. These fonts limited typographical creativity and Google developed a way for web designers to enjoy beautiful typography solutions without the difficult process of font licensing and directly embedding fonts into webpages. With over 600 font families avaliable, adding a Google Font to a webpage is as simple as copying the HTML snippet available. Google has changed the game for web designers, opening up oppourtunites for professional designers and type junkies alike.
34
Having the ability to select custom typefaces to web pages allows designers to escape the boring and standard typefaces most commonly in the operating system. Google Fonts work reliably on the vast majority of modern mobile operating systems in cluding Android and Apple. Browser behavior depends on the type of browser being used. Some browsers will display the text after the font file is loaded, others will use the fallback front from the font page and then refresh the page when the download is complete. After the first download, they will be catched in the browser. This is beneficial, the more widely used the Google Font is used, the more likely the visitor will have the font in their brower cache when they visit the webpage. On unspported browsers, the text displayed
OPEN SANS DESIGNED BY STEVEN MATTESON SIMPLE, PROFESSIONAL, CLEAN
LATO DESIGNED BY LUKASZ DZIEDZIC UNIQUE, VERITILE, INTERESTING
UBUNTU DESIGNED BY DALTON MAAG HUMANIST, ROUND, QUIRKY
35
Type & the Internet CSS + HMTL
36
HTML = Hypertext Markup Language
It is a style language that defines layout of HTML documents. The layout covers fonts, colors, margins, lines, height, width, background images, and advanced positions.
HTML:
CSS :
1. Publish online documents with headings, text, tables, lists, photos 2. Retrieve online information via hypertext links 3. Design forms for conducting transactions with remote services 4. Include spreadsheets, video clips, sound clips, and other applications
1. Control layout of many documents from one single style sheet 2. More precise control of layout and styles 3. Apply different layout to different media-types (screen, print, etc.) 4. Numerous advanced and sophisticated techniques
CSS is used for formatting structured content.
This diagram shows CSS Font-Shortland when adding text and fonts to a web page.
CSS = Cascading Style Sheet
37
Hand Held Video Games
Namco: The Ultimate Game Font
38
M
ost video game fonts used or were inspired by bitmaps, such as Namco. But now days, what is most important in type design for games is in-game readability. The fuzzy rendering of gaming and television screens makes type design a challenge. Sharp pixels make scaling problems more noticeable so often games will render fonts to a texture and not the standard 1:1 ratio.
39
iPhone HELVETICA
Typography proves an experience and for the iPhone user. The iPhone can be expressed as sleek, minimalistic, and user-friendly. The typography plays a large roll in this feel. The original iPhone, iPhone 3G, and iPhone 3GS system interfaces used Helevtica. From the iPhone 4 and forward, Apple switch to Helvectica Neaue, a slightly revised, slimmer font. When running iOS 7 or iOS 8, all iPhones use either Helvetica Ultra Light or Helvetica Light. Lastly, when running iOS 9, all iPhone models use a font Apple calls “San Francisco”. Still a san-serif, the rounded typeface is the most dramatic change in typography that the iPhone has had. iPhone typography larger contributes to Apple’s brand, giving it a feel of sophistication and modernity. Other Apple devices share the same typeface, including the AppleWatch.
40
Android ROBOTO
Google’s efforts to perfect a universal typeface began in 2005. They acquired a small operating system-merker well known as Android, and then later, Droid. Previous to these developed typefaces, many cell phone devices used typefaces borrowed from the computer. Droid fonts looked nice, but had a set of problems such as their appearance in scale changes and high-definition screens. Google then released Roboto in 2011. It was a grotesk, san serfic face that uses modern letter proportions.It received some critisim for looking like a Helvetica ripoff. In the past years, Roboto has made the most significant changes yet. Designer Christian Robertson has rounded out the family. These changes will help make the products they exist in sleeker, legible, and enjoyable to interact with.
41
Responsive What is responsive typography? It is typography that responds to it’s environment in an interface design. Until recently, resolution was more or less homogeneous. Today, screen sizes can vary between devices, making things much more complicated for typographers. Responsive typography is a tool in helping to avoid the need to redesign different layouts for varying screen sizes. This can also be explained as the idea that a layout will automatically adapt to the device viewport, or screen. In responsive typography, the readability is more important than having a layout always as wide as the viewpoint. This engineering is about finding the perfect compromise for legibility. Responsive typography will adjust itself to shrink at breakpoints. This is accomplished by changing the size of the html section so all of its descendants inherit a relatively smaller size.
Typography
42
The Challenge of an Ever-changing Screen Size and Resolution
http://www.zeldman.com/wp-content/responsive-typography-type-size.png
43
Type Today
Rene Knip & Janno Han Type foundery co-founders Rene Knip and Janno Han devleoped arktype.nl. This dutch designed foundry houes a collection of digital typefaces borne from their professional practice. It includes 25 opentype fonts and families that were designed specifically for architectural lettering and environmental graphics. They are visually tricking yet remain perfectly legible.
44
45
Type Today Adobe Caslon created
1990
1997
1993
Fella Parts created
46
Klavika typeface created
Css level 1
2004
2000
Gothan typeface created
Google Fonts arrives
Hoefler & Frere Jones divorcce
2014
2010
2007 iPhone arrives
2013
Experimental Jetset
2015
47
Bibliography 8-9 w 1 2
“Barry Deck. Template Gothic. 1990.” Barry Deck. Template Gothic. 1990. MoMA, n.d. Web. 14 Nov. 2015. Domusweb. N.p., n.d. Web. 14 Nov. 2015. <http://www.domusweb.it/content/dam/domusweb/en/design/2011/12/22/domusweb-best-of-design-2011/big_370256_4453_States%20of%20design21.jpg>. Barry Deck. N.p., n.d. Web. 14 Nov. 2015. <http://www.barrydeck.com/wp-content/uploads/2013/12/TG_bold.gif>.
10-11 w w 1 2 3
“About Emigre.” Emigre. N.p., n.d. Web. 15 Nov. 2015. “Emigre.” Fontshop. N.p., n.d. Web. 14 Nov. 2015. Amazonaws. N.p., n.d. Web. 14 Nov. 2015. <https://classconnection.s3.amazonaws.com/894/flashcards/763894/jpg/rudy_vanderlans-emigre_magazine-19891317177631981.jpg>. Emigre. N.p., n.d. Web. 15 Nov. 2015. <http://www.emigre.com/ImagesMag/01_003.jpg>. Emigre. N.p., n.d. Web. 15 Nov. 2015. <http://www.emigre.com/ImagesMag/10_003.jpg>.
12-13 w w 1 2
“Emigre Fonts: Rudy VanderLans.” Emigre. N.p., n.d. Web. 14 Nov. 2015. Dohman, Antje. “Emigre Magazine: Interview with Rudy VanderLans.” Emigre Magazine. N.p., 2010. Web. 14 Nov. 2015. DeviantArt. N.p., n.d. Web. 13 Nov. 2015. <http://img15.deviantart.net/9426/i/2009/316/a/1/rudy_vanderlans_by_bamboo_sugar.jpg>. Virbcdn. N.p., n.d. Web. 13 Nov. 2015. <http://media.virbcdn.com/cdn_images/resize_1024x1024/75/PageImage-498024-2529895-Picture10.png>.
14-15 w 1 2 3 4
“History.” Cranbrook Academy of Art. N.p., n.d. Web. 14 Nov. 2015. Amazonaws. N.p., n.d. Web. 13 Nov. 2015. <https://classconnection.s3.amazonaws.com/333/flashcards/2994333/png/untitled1366934664437.png>. Tumblr. N.p., n.d. Web. 13 Nov. 2015. <http://40.media.tumblr.com/3e1d48b7cc5391414682e87ea3c94436/tumblr_mrj66ci3fd1rimxooo1_1280.jpg>. “CRANBROOK IDENTITY SYMPOSIUM / Branding, Poster and Program - 2011.” Streeting Design. N.p., n.d. Web. 13 Nov. 2015. <http://www.streetingdesign.com/IdentitySymposium.html>. Streeting Design. N.p., n.d. Web. 13 Nov. 2015. <http://www.streetingdesign.com/projects/design/OneXOne/OneXOne_poster.jpg>.
16-17 w w 1 2 3
Sollers, Susan. “Presidential Lectures: Jacques Derrida: Deconstruction.” Presidential Lectures: Jacques Derrida: Deconstruction. N.p., n.d. Web. 14 Nov. 2015. Bringhurst, Robert. The Elements of Typographic Style, version 3.1. Canada: Hartley & Marks, 2005. p. 32. Nicole Willams. N.p., n.d. Web. 13 Nov. 2015. <http://typographic.nicolewilliams.info/img/downloads/grid_01.jpg>. Friends of Type. N.p., n.d. Web. 13 Nov. 2015. <http://friendsoftype.com/wp-content/uploads/2011/02/FOT_EM_DECONSTRUCT_FINAL-1250x1074.jpg>. Web Design Report. N.p., n.d. Web. 13 Nov. 2015. <http://netdna.webdesignerdepot.com/uploads/2014/02/shutupanddance.jpg>.
18-19 w w 1 2
Fella, Ed. “Faculty Bio: Ed Fella.” (n.d.): n. pag. Web. 14 Nov. 2015. Fella, Ed. “History.” (n.d.): n. pag. Web. 14 Nov. 2015. CalArts: Design. N.p., n.d. Web. 13 Nov. 2015. <http://inform.design.calarts.edu/wp-content/uploads/2014/10/ArtForCCSshow-2014.jpg>. 2plus3D. N.p., n.d. Web. 13 Nov. 2015. <http://www.2plus3d.pl/assets/images/580_lightbox_Ed-Fella_12.jpg>.
20-21 w w 1 2
Heller, Steven. “P. Scott Makela, 39, Pioneering Graphic Designer, Dies.” The New York Times. N.p., 14 May 1999. Web. 14 Nov. 2015. “MoMA.” P. Scott Makela. Dead History. 1990. N.p., n.d. Web. 14 Nov. 2015. Emigre. N.p., n.d. Web. 13 Nov. 2015. <http://www.emigre.com/FontText/PDea.GIF>. 275design. N.p., n.d. Web. 13 Nov. 2015. <https://275design.files.wordpress.com/2010/10/keedy_scan.jpg>.
48
Annotated Bibliography Fella, Ed. “Faculty Bio: Ed Fella.” (n.d.): n. pag. Web. 14 Nov. 2015. This pdf is the most reliable biography of Ed Fella. It is available on his website. This pdf will serve as a foundation in learning about Ed Fella. It will be the main ferefrence for my information, regarding Fella’s background personal life. Fella, Ed. “History.” (n.d.): n. pag. Web. 14 Nov. 2015. This pdf will provide information about Ed Fella’s more professional life. It will lhelp me study Ed Fella’s career, how his design changes, and how he is now a teacher at CalArts. Bringhurst, Robert. The Elements of Typographic Style, version 3.1. Canada: Hartley & Marks, 2005. p. 32. This will help me understand the styles and designs of typography. To have a better knowlede about the parts and compositions of type. And to understand how typefaces are published. Drucker, Johanna, and Emily McVarish. Graphic Design History: A Critical Guide. Upper Saddle River, NJ: Pearson Prentice Hall, 2009. Print. This book will teach me the general knowledge in design. It will give me information about designers and typographers that I will be writing about in the magazine. Kane, John. A Type Primer. Upper Saddle River, NJ: Prentice-Hall, 2003. Print. This book explains the structure of typography. It explains grids and structures and general knowledge that we will need in developing a magazine. It will help me in the process of creating text and placing the images on the spread.
49
Allison Sutton Ali Syafie Danley Walkington
50