TYPOGRAPHY AND THE WEB
TYPOGRAPHY AND THE WEB Brief History
The Birth of Digital Type Microsoft and Typography Influence of Apple Adobe and Typography Google and Typography
BRIEF HISTORY 1970s-1980s
BRIEF HISTORY 1970s-1980s
1970: International Typeface Corporation is founded by Edward Ronthaler, Aaron Burns and Herb Lubalin. 1971: Compugraphic’s first phototypesetters, the CompuWriter, allows operators to output text directly without the use of tape.
1971: CompuWriter
1972: ROLAND 800 is invented. This is the first sheet-fed offset press with an integrated ink control system. 1975: First laserprinters are invented and sold.
1972: ROLAND 800
1976: The Monotype Lasercomp is invented. This is the first system that comes with a Raster Image Processor (RIP). This allows us to create digital typefaces. 1976: Production of the Linotype hot metal composing machines comes to an end. 1977: The Compugraphic EditWriter 7500 is invented. This phototypesetter has a keyboard and a photo unit combined together to be used as one piece of equipment. Mid-1980s: Personal computers become more affordable and popular.
1977: Compugraphic EditWriter
THE BIRTH OF DIGITAL TYPE
THE FIRST DIGITAL TYPE FONT In 1968 the first digital type font DigiGrotesk was designed by the Hell Design Studio. You could get this font in seven weight varieties from light to bold all in sans serif.
BITMAP FONT - VECTOR FONT The first digital fonts started as bitmap fonts. Bitmap fonts are pixels that make up the outline of a letter in the form of small little boxes. These fonts were easy for computers to code and were fast and easy to use. However, these fonts were rasterized and could not be
changed in scale, unless you had one font saved as multiple fonts as different sizes. Later after the bitmap fonts came vector fonts. These were outline fonts using instructions and mathematical formulas to describe each letter. This allowed the letter’s outline to be scaled to any size.
OUTLINE FONTS AND THE BEZIER CURVE From the vector font came outline fonts and the Bézier curves. This kind of font is smaller, and therefore faster to process. Letters would be outlined using the Bézier curve. This shape of the Bézier curve is defined by anchor points set along the arc of letters.
OPENTYPE
From Apple’s TrueType font format came the birth of OpenType. OpenType is a font format developed by Microsoft and Adobe in 1997 as an extension of Apple’s TrueType. Adobe and Microsoft are still updating and refining fonts. Every major font foundry and most minor font foundries are currently developing fonts in OpenType format.
MICROSOFT AND TYPOGRAPHY
MICROSOFT AND TYPE
Microsoft has typography groups researching and developing fonts and font technologies. Microsoft was on of the first companies to develop a typography groups. They added these groups when they started to build software that required these new fonts. Microsoft’s typography groups also help support the development of TrueType and OpenType fonts.
MICROSOFT WINDOWS
Microsoft Windows was one of the first softwares that required Microsoft to create typography groups. Windows needed bitmap fonts that were also printer-resident fonts on screen. Originally Microsoft worked with Bitstream, but later licensed fonts from Bitstream and made significant changes
The first Windows user face font was “SysFixed,” which was included on Windows 1 and Windows 2. Windows 2 also added support for the proportional bitmap font system. Later the bitmap fonts MS Sans Serif and MS Serif were created, these fonts showed the direction font was going, and that Apple’s TrueType outline font was the chosen font format.
MICROSOFT FONTS TODAY Trebuchet Comic Sans
As Microsoft grew, the typography groups turned into a service group for the company. Fonts are now produced for Office, Windows CE, games, and all other products. Microsoft now mostly relies on outside sources for their fonts. Microsoft did have one prominent type designer come through the company, Vincent Connare, who designed Trebuchet and Comic Sans before leaving the company in 1999.
INFLUENCE OF APPLE
DESKTOP PUBLISHING REVOLUTION
The Macintosh originally sold below Apple’s expectations. Steve Jobs was ousted from the company in September 1985 due to the poor sales, and CEO John Sculley worked to improve the Macintosh. Later in 1985, Apple introduced the world to an affordable laser printer along with Aldus Corporation PageMaker (which is the Macintosh’s first useful app).
This affordable laser printer saved the Macintosh by allowing small businesses and print shops to easily print without expensive lithographic processes. Thus, began the Desktop Publication Revolution.
THE ONLINE APPEARANCE OF APPLE
THE ONLINE APPEARANCE OF APPLE 1996-Recent
Apple’s website has transformed into less. Showing that less is in fact more. Apple doesn’t want you to see everything at once. Their website is designed to make you stop and look through each individual product page. Apple is very consistence, puts information where they want you to see it, and they use strong typography with product shots to grab your attention.
TYPOGRAPHY AND APPLE Apple Keyboard: Univers 57 (Condense Oblique) was the typeface of choice on the Apply keyboard from 1984-2003, when it was then replaced with VAG Rounded. Apple iPod: Chicago was one of the original typefaces used for the Macintosh, so it traveled to be on the first generation iPod. However, the font later switched to Myriad. “Think Different”: From 1984-2002 Apple used a modified version of ITC Garamond for it’s slogan “Think Different” OS X: The original OX X Puma used a serif typeface, compared to the current OS X Snow Leopard, which uses a sans-serif font.
“It was the first computer with beautiful typography. If I had never dropped in on that single course in college, the Mac would have never had multiple typefaces or proportionally spaced fonts, and since Windows just copied the Mac, it’s likely that no personal computer would have them.� STEVE JOBS, 2005
TRUETYPE
The Mac was superior for the typefaces it rendered, but relied on hand-coded bitmap files. This put Apple at a disadvantage compared to Adobe’s PostScript outlines because Adobe’s PostScript outlines would be scaled to any size without pixilation. This problem got Sampo Kaasila to write a new font format called TrueType. However, when PostScript and TrueType went head-to-head TrueType lost, therefore distancing itself by working with Microsoft by licensing TrueType to Microsoft for use in Microsoft Windows.
ADOBE AND TYPOGRAPHY
ADOBE
John Warnock (bottom right) and Chuck Geschke (bottom left) worked together at Xerox, and began to develop a language called “Interpress” that was used to control Xerox laser printers. They later tried to turn this into a commercial product, failed, and went to go try it on their own. Adobe was founded 1982 by John and Chuck. They thought at first they’d make a really powerful printer, but instead decided to develop tools for manufacturers to control the printers with.
ADOBE ORIGINALS
In 1989 Adobe Originals program began. At this time publishing revolution had begun and designers were looking for high quality digital fonts. Not all fonts became Adobe Originals, Adobe picked timeless strong type designs that would be known for decades. Some Notable Adobe Originals are: Myriad速, Minion速, Trajan速, Lithos速, and Adobe Garamond.
GOOGLE AND TYPOGRAPHY
GOOGLE BACKGROUND 1995: Larry Page and Sergey Brin meet. 1996: Larry and Sergey begin creating a search engine called BackRub, which operated on Stanford servers for over a year, but eventually took up too much bandwidth. 1997: Google.com is registered as a domain with the mission to organize an infinite amount of information on the world wide web.
Google’s logo is based on the font, Catull BQ. The only difference is the cross bar on the letter “e” no longer tapers at the end. Google set’s their logo apart from others by the use of color with typography.
GOOGLE FONTS
Is an interactive directory of free-hosted web fonts. It was launched in 2010, and then revamped in 2011. The font embed code is very simple and easy to use. <link rel=”stylesheet” type=”text/css” href=”http:// fonts.googleapis.com/css?family=Tangerine”>
GOOGLE FONT PLUGIN
Google has a plugin, which allows you to use any Google Font for any text on existing website without writing a single line of code.
Google has created over 2,000 doodles for their homepage and around the world.
BIBLIOGRAPHY
Bosler, Denise. Mastering Type : The Essential Guide to Typography for Print and Web Design. Cincinnati, OH, USA: F+W Media, Inc., 2012. ProQuest ebrary. Web. 23 April 2015. History. INVENTION OF THE PC. http://www.history.com/topics/inventions/invention-of-the-pc. Web. 23 Apr. 2015. Prepressure. http://www.prepressure.com/. Web. 23 Apr. 2015. Design History. http://www.designhistory.org/Digital_Revolution_pages/ EarlyDigType.html. Web. 23 Apr 2015. Microsoft. Typography. https://www.microsoft.com/typography/ AboutMST.mspx. Web. 23 Apr 2015. Adobe. https://www.adobe.com. Web. 23 Apr 2015. Apple Gazette. http://www.applegazette.com. Web. 23 Apr 2015. Turnbull, Connor. “How Apple Has Influenced Web Design Over the Years”. Tuts+., 28 March 2011. Web. 23 April 2015. Drucker, Johanna, and Emily McVarish. Graphic Design History A Critical Guide. Boston: Pearson, 2013. Print.
Sydney Rotthaus GRPH223 Typography 1 Professor: Stacy Asher Spring 2015