Wednesday, March 7, 2012

Serifa

History


Serifa is an Egyptian font – also known as slab-serif – meaning that is has thick, blocky serif that appear to be heavier than the letterform itself. Serifa was also designed by Adrian Frutiger – for more information on Adrian Frutiger, see my post on Univers. Serifa was designed in 1966 for the Bauer Foundry. Similar to Frutiger’s Univers design, he designed Serifa on a grid system, regular weight (or 'parent' face or ‘Roman’) was referred to as 55, italic 56, bold 65, black 75, light 45 and light italic 46. Serifa differs from other Egyptian typefaces (like Rockwell and Memphis) because of its more Humanist design – meaning it is based on the original Roman capitals.




Uses


Serifa is a quality choice for both digital and print design, keeping in mind you will need to increase the tracking the more the font size is increased – standard readability rule of thumb.



Visual Study






Sources



Carter, Rob, Philip B. Meggs, and Ben Day. Typographic Design: Form and Communication. 5rd ed. New York: John Wiley & Sons, 2012. Print.

Dodd, Robin. From Gutenberg to Opentype: An Illustrated History of Type from the Earliest Letterforms to the Latest Digital Fonts. Vancouver: Hartley & Marks, 2006. Print.

"Serifa web font family | Fontdeck." Fontdeck web fonts: Real fonts for your website. N.p., n.d. Web. 7 Mar. 2012. .

"Typedia: Serifa." Typedia: A Shared Encyclopedia of Typefaces. N.p., n.d. Web. 7 Mar. 2012. .

Images Used Without Permission:
http://typophile.com/files/animalcomp1_6218.gif

Saturday, March 3, 2012

Univers

History


In 1954, the method for creating typefaces was changing. The Lumitype:Photon machine – a machine that would expose photographic paper by shining light through a disk containing the desired font – changed the way typesetters were deigning typefaces. Adrian Frutiger was one of the first of those designers to design for this new machine. In just a few days Frutiger came up with the design that would become Univers, originally wanting to call the design 'Le Monde' and then, when that was rejected, 'Galaxy'. Keeping with the astrological reference, Univers was accepted. Univers is considered the first sans-serif of the photo setting age.


Univers is a sans-serif typeface, but the differs from its predecessors because of the shift in naming convention that Frutiger wanted to take. Designed on a grid system, regular weight (or 'parent' face) was referred to as 55, bold 65, extra bold, 75 and light 45. The accompanying image helps illustrate the naming convention for the entire Univers family, which has 21 variants.



Design Differences


Univers has a larger x-height than most other sans-serif fonts. "The lowercase letters are larger in relation to their ascenders, descenders and capitals. The capitals are closer to the size and weight of the lowercase letters." [Dodd] All 21 variants of the family share the same x-height, capital height and ascender and descender length creating a font that is completely interchangeable with itself. The horizontal curves of the typeface are slimmer than other similar fonts. This was done to overcome the optical illusion that makes the other sans-serif fonts horizontal lines appear thicker.

The capital 'K' has arms that meet its stem at one single point. The capital 'Q''s tail lies mostly flat along the baseline. The lowercase 'g' has a tail rather than a bowl, much like other Swiss-inspired sans-serif fonts. Another defining characteristic of Univers is the diagonal cut on the ascender of the lowercase 't'.

Use


Univers looks both great in print and on screen at nearly any size. In 1997, Adrian Frutiger redrafted the original design, optimizing for on screen use.

Rachel Galindo & Univers


Rachel Galindo, a graphic designer in Austin, Texas crafted a beautiful book from her typographic study of Univers. Samples of her book can be found on her portfolio website: www.behance.net/rachelgalindo. The study shows how nicely that the variants of Univers can be interchanged with each other, creating a 'wavy' or 'rolling' appearance in the text. It is from one of her designs, which to me looks like a the text block is collapsing in on itself or that letters are pouring from a block of text, which I am basing my visual study for Univers.

Visual Study




Sources


Carter, Rob, Philip B. Meggs, and Ben Day. Typographic Design: Form and Communication. 5rd ed. New York: John Wiley & Sons, 2012. Print.

Dodd, Robin. From Gutenberg to opentype: an illustrated history of type from the earliest letterforms to the latest digital fonts. Vancouver: Hartley & Marks, 2006. Print.

"Typedia: Univers." Typedia: A Shared Encyclopedia of Typefaces. N.p., n.d. Web. 3 Mar. 2012. .

Images used without permission:
http://im.typotheque.com/static/Univers.png

http://behance.vo.llnwd.net/profiles4/97992/projects/199592/979921237698772.jpg

http://graphics8.nytimes.com/images/2010/07/02/business/02moyroud_2/02moyroud_2-popup.jpg

http://26.media.tumblr.com/tumblr_l578ijKE4h1qz7as3o1_500.jpg

Thursday, March 1, 2012

Symbols

This font post is unique to the rest - I'm going to deal with several fonts within one post.

Dingbats


Dingbats refer to ornamental designs (e.g., symbols, glyphs, characters) used in typesetting to decorate text. These have been around as long as printing. The forms we are commonly acquainted with are Wingdings (designed from the Lucida typeface) and Zapf Dingbats, created by Hermann Zapf (Zapfino, Palatino, Optima).

Wingdings, a set of Dingbats, were originally created in 1990 by Microsoft to be included in their Windows operating system. Wingdings is a TrueType font and consists of three sets including Wingdings 2 and Wingdings 3.



Zapf Dingbats were designed in 1977 from over 1000 sketches of signs and symbols done by Hermann Zapf. The International Typeface Corporation (ITC) chose 360 of those sketches and created the PostScript font set ITC Zapf Dingbats. The set was originally packaged with one of Apple's early printers, the Apple LaserWriter Plus.

✁ ✂ ✃ ✄ ☎ ✆ ✇ ✈ ✉ ☛ ☞ ✌ ✍ ✎ ✏
✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟
✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ★ ✩ ✪ ✫ ✬ ✭ ✮ ✯
✰ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿
❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ● ❍ ■ ❏
☺ ☻ ♥ ♦ ♣ ♠ • ◘ ○ ❐ ❑ ❒ ▲ ▼ ◆ ❖
◗ ❘ ❙ ❚ ❛ ❜ ❝ ❞




Unicode


Unicode – a computer industry standard for encoding, representing and handling digital text – is the standard for web text, (hopefully) defined in the header of each webpage and typically defined as UTF-8 (again, one would hope). The intent is to present text the same on every machine, every operating system, every browser. It is because of Unicode that some characters copied from Word or other word processing programs do not translate to the web, creating a weird looking character. These can typically be found where an endash, bullet, apostrophe, single- or double-quotes should be.

ASCII


To support characters like those mentioned above that aren't available in Unicode type there is a set is known as ASCII characters. ASCII stands for the American Standard Code for Information Interchange. ASCII is a character encoding system including 128 characters. When you see an ampersand on the web, the person who coded the content most likely referred to it as & to create that character. The ASCII set contains symbols for every letter of the alphabet (upper and lower case), numbers, punctuation (including endash, emdash, bullet, latin letters, copyright, trademark, registered symbols and content mark-up symbols (paragraph tags, etc.), and much more.



Sources


"ASCII - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 1 Mar. 2012.
.

Carter, Rob, Philip B. Meggs, and Ben Day. Typographic Design: Form and Communication. 5rd ed. New York: John Wiley & Sons, 2012. Print.

"Dingbat - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 1 Mar. 2012. .


"Unicode - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 1 Mar. 2012. .


"Wingdings - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 1 Mar. 2012. .


"Zapf Dingbats - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 1 Mar. 2012. .

Tuesday, February 28, 2012

XKCD Guest Post

Baskerville

History


Baskerville is a transitional font that came about during the middle of the 18th century. John Baskerville, a man who had made a great deal of money hardening furniture and other objects through an varnishing process, once established, turned his interests to printing. J. Baskerville designed his typeface and had his employee, John Hardy, cut the punches for him. The work took several years because of Baskerville’s perfectionist behavior. He also went on to find new ways to improve upon the printing press to allow for greater precision.

Design Differences


Baskerville, the letterform, is known for its wider form and moderate stroke. It is noted that Baskerville gives a page a light gray appearance because of its form width and balance with the pages white space.

Another characteristic to point out in Baskerville is the tail of the capital ‘Q’ – it first sharply strikes to the left and then folds to the right, slightly tucking under the next letter, similar to the finish of a calligraphic capital ‘Q’. An interesting characteristic can be found in the tail of the lowercase ‘g’. Its descender does not make a fully closed loop, but tucks around itself like the tail of an animal. Additionally, the cross bar of the lowercase ‘e’ is high and the lowercase ‘j’ descender tucks to the left.


Famous Fans


Ben Franklin was an admirer of the Baskerville letterform. Being a printer himself, he could appreciate the simple and delicate lines that Baskerville offers.

Visual Study


'A Study in Q' - Shading provided by the first chapter of The Hound of the Baskervilles by Sir Arthur Conan Doyle



Sources


Carter, Rob, Philip B. Meggs, and Ben Day. Typographic design: form and communication. 3rd ed. New York: John Wiley & Sons, 2002. Print.

Dodd, Robin. From Gutenberg to opentype: an illustrated history of type from the earliest letterforms to the latest digital fonts. Vancouver: Hartley & Marks, 2006. Print.

Images used with permission:
http://www.stormtype.com/services/get_poster.php?man_id=3
http://4.bp.blogspot.com/_9vzd2fD5z7o/TLOQUDq00nI/AAAAAAAAAmI/iaBnNiGjqLA/s1600/152807.gif
http://cdn.ilovetypography.com/img/g-glyph-baskerville-old-face.gif

Thursday, February 23, 2012

Zapfino

History



Hermann Zapf was born in Nuremberg on November 9, 1918. At ten years old, his father, active in the trade unions, was taken to Dachau when the National Socialist Party came into power and brought down the unions. Due to his father’s political record, Hermann was not able to go in to the electrical trade as he had wished. In 1934 Hermann started as an apprentice lithographic retoucher.

Inspired by seeing a Rudolf Koch calligraphy exhibition on 1935, Zapf began teaching himself calligraphy. Zapf’s new talent was noticed and through the D Stemple AG typefoundry in Frankfurt and in 1938 he designed his first typeface, a blackletter design called Gilgenart.

His love for calligraphy grew with time. Zapf went on to design several very now famous typefaces like Palatino and Optima, both of which are heavily influenced by his appreciation of calligraphy.

In 1948, Zapf designed a calligraphic script font – based on samples from his sketchbooks – call Virtuosa. He was disappointed with restrictions of designing the script font using metal plates. Zapf felt the kerning was wrong and the slant was too harsh. He intended for “exuberant flourishes” which the metal could not provide.

In 1993, with the help of another typographer, David Siegel (Tekton) and programmer Gino Lee, began digitizing Zapf’s original script concept, calling it Zapfino. Zapfino, completed in 1998, finally realized Zapf’s original concept for his calligraphic font. The Zapfino fontset includes One, Two, Three, Four, Ligatures and Ornaments, and is essentially a complete digital calligraphic kit.



Visual Study



I use Zapfino when a client is looking for an “elegant” wedding invitation design. It is a clean and whispy font that has plenty of variations to avoid repetition that comes from using digital script fonts. The only complaint that I have is that (for some clients) the weight of the font is not heavy enough (i.e., there is no ‘Zapfino Bold’). When this is an issue, I outline the font and offset it by one or two pixels (depending on the font size being used), which typically satisfies the client and doesn’t detract from the design of font.



Sources



Dodd, Robin. From Gutenberg to opentype: an illustrated history of type from the earliest letterforms to the latest digital fonts. Vancouver: Hartley & Marks, 2006. Print.

"Download Zapfino® font family - Linotype.com." Download fonts from classic to cool - Linotype.com. N.p., n.d. Web. 23 Feb. 2012. .

"Linotype Zapfino™ - Desktop font « MyFonts." MyFonts: Webfonts & Desktop Fonts. N.p., n.d. Web. 23 Feb. 2012. .

"Virtuosa - Font News." Download fonts from classic to cool - Linotype.com. N.p., n.d. Web. 23 Feb. 2012. .

"Zapfino - Fonts.com." Fonts.com. N.p., n.d. Web. 23 Feb. 2012. .

"Zapfino - Wikipedia, the free encyclopedia." Wikipedia, the free encyclopedia. N.p., n.d. Web. 23 Feb. 2012. .


Images used without permission:

http://naranho.files.wordpress.com/2011/08/zaph0.jpg
http://image.linotype.com/news/fontnews/virtuosaclassic/virtuosa_sample01.gif
http://origin.myfonts.net/116/fs/u/5b/3776da4b764dc34c897cd0fe66b7fb.gif

Tuesday, February 21, 2012

Chunk (Five)

Reason


The reason I choose to write this post about Chunk (Five) – referred to in the rest of this post as 'CF' – is, I was working on a project for a colleague a few weeks ago and I had to download it for a design that I was given to edit. I became so enamored with the font that I decided to update my website logo using CF (see Goodarts dot Net, above). I was curious to se where CF came from and decided to spotlight the typeface in today's post.

History


CF is a modern, ultra-bold slab serif designed by Meredith Mandel circa 2009. Very little detail is available on CF. Meredith Mandel says on her website that she designed it to be "reminiscent of old American Western woodcuts, broadsides, and newspaper headlines". Font-A-Day notes that CF was designed for The League of Moveable Type. The League is a collaborative of designers seeking to advance the use of type and available typefaces on the web.

With the advent of the css styling @font-face – first with IE4 and Netscape 4, then revitalized with Safari 3.1 support, now all modern browsers support the @font-face technique. @font-face allows front-end designers to code in a reference to a font file that is hosted on their server, then assign that font to a css font tag (e.g., h1, h2, p, a, etc.) that will then display that font the same to all users. This was a huge leap forward in text layout for web designers.

I started using @font-face for my own projects a little over a year ago. It is very beneficial for web designers to be able to choose what font every user will see, rather than relying on system fonts to show an approximation of what the deign intended. An alternate option was to create images for each instance of that font (e.g., headers, titles, etc.) which, in turn adds increased download to a website and lends to accessibility by allowing screen readers to directly read the instances rather than rely on alt tags.

Visual Study


For today's visual study, I submit the new Goodarts dot Net logo (also at top of page) and my new Ciricullum Vitea design:





Sources


"Chunk | The League of Moveable Type." The League of Moveable Type. N.p., n.d. Web. 21 Feb. 2012. .

Cuppyhouse, Ronald. "Chunk Five | Font-A-Day." Fontaday - A new free downloadable TTF or OTF font every day!. N.p., n.d. Web. 21 Feb. 2012. .

Hermann, Ralf. "The @Font-Face Rule And Useful Web Font Tricks | Smashing Magazine." Smashing Magazine. N.p., n.d. Web. 21 Feb. 2012. .

Mandel, Meredith. "meredithmandel." meredithmandel. N.p., n.d. Web. 21 Feb. 2012. .

Images used without permission:
http://payload.cargocollective.com/1/0/28893/379252/CHUNK_POSTER.jpg