SPD Annuals on iPad...

The Society of Publication Designers (SPD 45) iPad app. available on iTunes for $19.99

SPD45

by Robert Newman

This app is a magazine and graphic design lover's delight, packed with 600+ examples of the best of contemporary magazine design from 2009. It's a great resource, the pages are beautifully displayed, and it's a lot handier and much more portable than a traditional print annual. This is a wonderful template for the future display and archiving of printed work. One warning: This is a large app with many images, so it takes a while to download...it's probably best to do it straight to your computer and then synch it over to your iPad.

We dig typo/graphic Posters...

typo/graphic posters is a directory of typographic and graphic posters. They feature type posters by designers from all around the world. It's quite interesting to see how each designer have their certain aesthetic. Site founded and designed by andré felipe.

Check it out.

a.

Germans do it best!

Type specimen: Schriftguss AG vormals Brüder Butter Schriftgiesserei

Dresden, Germany ca.1925

This is such a beautiful type specimen I came across on flickr. It is designed by a German Type Foundry circa 1925. They've used only red and black ink. It amazes me to think everything was set individually by hand. Look how nicely they designed their index page, for example, how beautifully they lined the page numbers in the gutter.

I believe some of their fonts are available online.

Enjoy!

Ayca

Assignment - Design First Feature Opener

Guys, finish up your templates if you have time or leave them as is for now to concentrate on your new assignment:

Design your first feature opener.


FEATURE OPENER GUIDELINES
Design your first feature opener as a spread. Think about the A-B-C layouts. Think of it as a mini poster. Design at least 20 layouts.

FEATURE OPENER INCLUDES:
- headline
- subhead
- by line
- image of your choice (illustration/ photography/ both)
- no text or little text

• Pay attention to layout, color and scale change, choice of image. This spread will reveal your personality, sense of taste, what you deliver when you run wild.
• Choose your swipe wisely. Remember that every art director is going to know if you choose a photo from a famous photographer. You want your art direction and design to be seen, not the famous photographers work. Choose a nice photo/illustration.
• Choose type nicely. Remember a feature opener consists of a headline, a subhead, a byline, and very few or no text type. Pick typefaces that are relevant to the story.
  
• Regarding your feature openers. Design a bunch of layouts, at least 20. If you work in Photoshop in 72- 100 dpi you could be able to make a lot of variations in no time... Change layout save as, change image save as, change typography. Print to size the ones you liked the best. Print all the other variations as well and bring to class.
• Look at SPD annuals for inspiration, see if you can spot the A-B -C layouts we discussed in class.

NOTES

• Post all work on your blog ahead of time and print to size and bring to class.
• Bring everything, feature opener and templates to class. This way we can see if they hold together.
  

a.

Finding the Typeface in your Dreams!

Having Trouble finding the right typeface for your project? Or perhaps you saw a type and want to know what it was.

Check out the sources on the web or on mobile devices:

Typophile

Forum based typography source. Memberships are free.

http://typophile.com/

MyFonts

World's largest type foundry. Submit an image to WhatTheFont to find the closest matches in their database.

Also available as an App on the iPhone for free.
http://new.myfonts.com/WhatTheFont/

Identifont

The largest independent directory of typefaces on the Internet. It let's search by appearance, name, similarity, picture, designers or publishers.

http://www.identifont.com/

Typography Insight

Designed and Developed by Dong Yoon Park. This project was his Thesis Project at Parsons MFA Design and Technology. Available as an App on the iPad for $1.99.

http://typeinsight.org/

(Thanks Derek for letting us know about this exciting App)

How to Print the Baseline Grid?

Hit Ctrl-P/Apple-P in order to bring up the Print dialog. On the General tab, be sure to click Print Non-Printing Objects, Print Blank Pages, and Print Visible Guides and Baseline Grids.

Type Terminology

Points, picas and inches conversion chart

Type Anatomy via ilovetypography

Type Specimen Q+A

Guys,

This is not your assignment but we used to give it as an assignment in this class so it would be good for you to know.

When some of you asked "what would be the best way to choose type" in Wednesday's class, we gave you this answer:Make a Type Specimen Book. (You know the books each type foundry prints to feature their fonts.)

To choose text type: Set as many text fonts as you can on 8/9, 8/10, 8/11, 8/12 and 9/10, 9/11, 9/12, 9/13 and 10/11, you see how it goes. Don't go larger than 12 points for text type. Set flush left/rag right; justified Use the different weights of the same font family.

To choose Display type: Set as many display faces as you can in different weights and styles like David Berlow did.

The benefits of designing a Type Specimen for yourself are:

• You will have a decent type example you would take reference from in future projects.
• You will get comfortable using some particular typefaces.
• (If you design it well) you might have a portfolio piece.

Q+A:
Q: Can we use lorem ipsum for the text face examples?
A: No, do not use Lorem Ipsum for your text. Instead, please find some text on the Internet or use your own, since Lorem Ipsum never looks like real text. Try to pick a text that's related to your magazine's subject matter.

Q: Can we use the same font for text as display? For example, if I choose Miller as my Serif Display type, can I also use it for my Serif Text type?
A: Yes, you may use the same typeface as "display" and "text". It would be good to see the same typeface in different styles. At the same time, you may find out that certain display typefaces go along well with different text typefaces. It's to your advantage to do this exercise with as many fonts as possible.
Ideally it would be best to set each typeface all both as "display" and "text", just like David Berlow did to see the relations between the different styles and point sizes of each typeface (see the image below where he experimented with the typeface FB Scotch).

David Berlow Type Specimens Published 2008 A collection of David Berlow’s prolific typographic work as co-founder of Font Bureau is showcased in this impressive booklet, a celebration of him receiving the Society of Typographic Aficionados (SoTA) Typography Award in 2007. Specimen pages show styles of each family for easy comparison of weight, width, copyfit and aesthetic. FREE DOWNLOAD David Berlow Type Specimens Get a free paper copy sent to you in the mail by signing up to the FB News List, an occasional update of news and new font releases.

Ayca

Student Works - Templates

Here are some examples of previous student templates:

Department:

template

finalized piece

Feature:

template

finalized piece

Design Department and Feature Templates

This diagram shows the basics of a random magazine.
Make variations and try to cover as many corners as possible.

Design department and feature templates.

In real life, every section of a magazine has a template and the designer would pull that particular section's template and fill it with new content. They don't do everything over and over each time. This saves them time and designing templates for your magazine will save you time, too. You will be determining the structure and what your type combinations are ultimately going to be.

TEMPLATE GUIDELINES

* Design your templates in single sheets as right hand pages.
* Do not use photography or illustration or any gray boxes.
* Decide; trim size of your mag (keep in mind your printing options), the margins, how many columns you will use, the baseline grid, gutter, column width and where your hangline should be.

* Decide the hierarchy between these graphic elements, the distance between them, etc.

Feature templates contain; a headline, a subhead, a byline, body copy (text type), folio line, captions and credit line.

Department templates contain; a headline, a subhead, a byline, body copy, rubric, folio line, captions and credit line and a hangline where your text falls under.

* Make variations of layouts so that you'd have alternatives to choose from.
* Include all details such as drop caps, lead-ins, captions, pull quotes, photo credits, etc. The more you figure out now, the less you'll have to later.
* Print with the grid.
* Do not use Lorem Ipsum. You may copy some text online but make sure you use something related to your topic.
* Keep in mind that the text type is the same throughout the magazine to hold everything together. You'll make variations however you'll pick one eventually and go with it. So try as many as possible.
* Kern your headlines.
* Read Genevieve's Editorial Design Book PDF for further guidance.
* Post on your blog.
* Print on decent paper that has high brightness. Pick something that's not going to make the ink bleed much. Bring everything to class. (I believe hammermill is good enough, if you know other papers please share)

We want 20 variation 20 for department and 20 for feature templates at least. Try variations of text faces. Check out our favorite typefaces to starter with.

a.

Web Fonts Galore

Guys,

AIGA held a panel discussion on May 24 called Designing with Web Fonts. Unfortunately we missed the panel. However, I am posting a post by Jodi Vautrin which was published on AIGA's web site on the subject. Full of exciting news and resources.

Enjoy,

A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Recap: Designing with Web Fonts

by Jodi Vautrin

---

photo by Ben Gebo more photosWe hope you had a chance to join us on May 24th for the Designing with Web Fonts panel discussion in Cambridge. If not, we hope to see you next time! In the meantime, here are some discussion highlights and resources that were shared.

We kicked off the discussion with a keynote introduction from our moderator, Sam Berlow
http://www.fontbureau.com/people/SamBerlow/

How we got here is long and complex tale...
http://www.alistapart.com/articles/cssatten/
Suffice to say, the options for designers are nearly limitless: 10's of thousands of typefaces available for web use...are all of them good? That is your job...
http://typekit.com/tour/library
http://fontdeck.com/typefaces

Why Web fonts?
The promise of Web fonts was that it would allow seamless branding from print to web, save time and money by reducing the production time, and enable search engine optimization because all of he text on your sites would be live.
http://www.fontslive.com/info/web-fonts.aspx

Getting fonts to work on a website requires the following: specific font formats for specific browsers and bulletproof CSS to tell the browser to display the correct font in the users browser.
http://www.extensis.com/en/WebINK/how/index.jsp;jsessionid=5EFTDAETEJUDHLAQAAUARSQ

There are two ways to get Web fonts
1. Pay a service to deliver the data, or
2. Deliver the data yourself
http://www.miltonbayer.com/font-face/
(beware of delivering data yourself, you need rights and delivering print fonts may not have the same quality as a web font)

How do these subscription services work? Subscription and Self-hosting:
http://www.extensis.com/en/WebINK/how/index.jsp
http://typekit.com/
http://fontdeck.com/
http://webfonts.fonts.com/
http://www.webtype.com/
http://www.extensis.com/en/WebINK/

Subscription: Sign up, Choose a pricing tier base don your usage needs, assign the font to a URL it will be used for, pay, copy and paste the CSS into your site code, the fonts are live
The service will send the appropriate font file to the user accessing the url you have specified

OR

Self Host: You serve the font file to user accessing the url you have specified, by placing the fonts on your own server and serving the data yourself.
http://webfonts.myfonts.com/
http://www.fontsquirrel.com/
http://www.miltonbayer.com/font-face/

Advantages to both:
Subscription services are constantly adjusting delivery as browsers and data improves. Pay every year.
Self host, there is a one time payment, but you need to keep up with the technology and adjust code/data as both are upgraded.

Pricing Information:
Font Licence Calculator: Get a real time quote for typeface licensing
http://www.typotheque.com/licensing/price_calculator
Typekit https://typekit.com/plans
Fontdeck http://fontdeck.com/about/pricing
WebINK http://www.extensis.com/en/WebINK/pricing/index.jsp;jsessionid=WM5VPK4YOCSOVLAQAAUARSQ
Fonts.com (Monotype Imaging) https://webfonts.fonts.com/en-US/Subscription/SelectSubscription
Webtype (Font Bureau) http://www.webtype.com/info/advantage/

Compatibility:
Here is an overview of the options and their compatibility:
Web font hosting services - An Overview - by sprungmarker.de

A couple of Myths I would like to debunk:

1. You can only use one of these services or methods.
Not true. Here is sample of a website using two services and serving files them selves all on the same page.http://getsatisfaction.com/

2. Web fonts do not work on windows.
Not true. But make sure you test
That was simple right?
Here is how I recommend navigating this labyrinth:

Sign up for all of the free trials play with the different services.
https://browserlab.adobe.com/en-us/index.html

In general, what to look for:

1. Quality
don't buy anything for the web until you have tested it in the browsers you or your users will be---using. Mac, windows, and devices
https://browserlab.adobe.com/en-us/index.html

2. Legal
Find out who owns the data
Serving data illegally puts your client and you in a legally compromised position.
Font Squirrel is a great service for converting print fonts to webfonts, but
do not take fonts and convert them unless you have permission. We will find you...
http://www.fontsquirrel.com/

3. Budget
Check the pricing carefully
Pageviews, GB, time...

I want to reiterate number one. If you are developing for a client, Check their Google Analytics carefully to see what browsers and platforms the users are coming from. If your analytics say Windows XP and Internet Explorer, test the site in that exact environment.

Examples of others who have begun to take advantage of display and text capabilities of web fonts:
http://spymuseum.org/
http://reesenews.org/
http://www.webfontawards.com/gallery
http://typographica.org/

The real future is implementing Web fonts into responsive web design and dynamically adjusting typography to page size.
http://demo.nomadeditions.com/real-eats/toc.html
http://treesaver.net/

In conclusion
If you have not jumped in, jump in, it is free and easy to get started.
Make sure you test in users environments
Make sure you use fonts at the sizes they have been recommended for.
This an exciting time to be developing web sites
Good luck to you all.
- Sam Berlow

A big thank you also to our panelists, from L to R from audience:

Scott Dasse / Creative Director, Boston University Interactive Design
http://www.bu.edu/interactive-design/our-work/
Mike Swartz / Creative Director, Upstatement
http://upstatement.com
David Berlow / president, Font Bureau; partner Webtype, Ready-Media
http://www.fontbureau.com/people/DavidBerlow/
Vladimir Levantovsky / Sr. Tech Strategist at Monotype Imaging & W3C
http://www.monotypeimaging.com/

We're going to continue this topic into some hands-on workshops in our Fall/Winter season, so let us know what, specifically, you'd like to learn. No questions are too basic or too complex, so ask away! We'll also send out an informal survey to you all to find out what you'd like to get out of the workshop.

---

Jodi Vautrin serves as Vice President of Programming and Director of Emerging Ideas on the board of AIGA Boston. Contact her at: emergingideas@boston.aiga.org

---

Posted by boston in General | June 7, 2011