1. 13DEC Visual Design Group Meeting

2. Introduction: Typography on the web

3. The Art of Looking Sideways \ Ben

4. Webfonts are a font format with a specific license that permits web designers and developers to use real typography online without losing the advantages of live text — dynamic, searchable, accessible content. What do we need to know @font-face Formats and Browsers Type Designers Type Foundries and their licenses http://www.webfonts.info/node/386

5. Case Study: 7.1 Admin DASH

6. What font did we choose? Why did we choose that font? When did we choose it? How did we use it in the interface? How do you use Google Fonts? The good? The bad?

7. What font did we choose? Open Sans and Open Sans Condensed by Steve Mattesonn. One of the more popular Google Web Fonts available. Humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

9. Why did we choose that font? Open Source No co$t Offered large range of weights for dashboard interface (light, normal, semi-bold, bold, extra bold, condensed light and condensed bold) Able to be downloaded from Google and uploaded to your own server and deployed with the website. No need to reach outside of secure environment Matches the visual language and tone that we were trying to convey Trusted source, Google.

10. When did we choose it? Created a few mood boards and offered up some alternatives but presented Open Sans as the ideal font in early design phase Early in development Cheryl, Corey (contractor) and I worked on getting the font deployed on to our servers and to show up in the browsers “One notable moment. I presented the font to Corey and he looked into the legalese and implementation. For a while he wasn’t sure if it was feasible until one night before I went home. Corey came busting out of his cube area and yelled “Ben, I got it!” It seemed like he was pretty excited to create something using fonts other than the standards and I believe this helped him take just as much of a interest in the visuals as Cheryl and I.”

11. How did we use it in the interface? Much of the interface was done in the condensed font We were interested in maximizing the little space that we had to create information density with little visual clutter Tables Tiles Small information displays Graphs Responsive layouts We utilized the regular and bold features to help the titles be seen as secondary to the information which was displayed in bold

12. Actual screenshot of implemented interface

14. The interface that we replaced.

15. How do you use Google Fonts? Google Fonts: www.google.com/fontswww.google.com/fonts Process overview: 1. Select a font. 2. Select weights and styles needed. 3. Copy code from the site to add into the head section of the HTML OR download the fonts and include them on the server with the website (then use the @font-face property in the CSS file) 4. Reference the font in the CSS file : p { font-family: “Open Sans”, Helvetica, Arial, Verdana, sans-serif; font-weight: 400;} To specify a font-weight, use a numerical weight that is included in the font you selected. More font-weight info: http://www.w3.org/TR/CSS2/fonts.html#propdef- font-weighthttp://www.w3.org/TR/CSS2/fonts.html#propdef- font-weight

16. The Good Updates the interface and is good web practice Offers more options for the look and feel Can improve legibility

17. The Bad Difficult to make it look great in all browsers especially with DoD restrictions It rendered kind of blotchy sometimes It rendered kind of thin or too fat sometimes IE just sucks. Period. It can’t be deployed from Google’s (or the Foundry’s) servers. It has to be packaged with the website With more choices comes more responsibility! There are some free fonts that are tempting to use but which do not have a good range of styles, weights, and characters.

18. Additional Resources

19. The Art of Looking Sideways \ Ben Responsive Typography: http://ia.net/blog/responsive-typography-the-basics/http://ia.net/blog/responsive-typography-the-basics/ TypeKit Blog (see categories on right): http://blog.typekit.comhttp://blog.typekit.com Typotheque: https://www.typotheque.com/tag/webfontshttps://www.typotheque.com/tag/webfonts Fonts.com Learn about web type: http://www.fonts.com/content/learninghttp://www.fonts.com/content/learning Ampersand Conference (Web Type Conference 2013): http://ampersandconf.comhttp://ampersandconf.com FF Chartwell: https://www.fontfont.com/how-to-use-ff-chartwell#introhttps://www.fontfont.com/how-to-use-ff-chartwell#intro Typophile (Tim Brown section): http://typophile.com/user/7222/trackhttp://typophile.com/user/7222/track Ilovetypography.com: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ Fonts in use: http://fontsinuse.com/in/2/formats/3/webhttp://fontsinuse.com/in/2/formats/3/web Webfonts.info: http://www.webfonts.info/resourceshttp://www.webfonts.info/resources Optimized small type on screen: http://www.fontbureau.com/ReadingEdge/#ss-9/plaintext Typewolf (list of popular web fonts): http://www.typewolf.comhttp://www.fontbureau.com/ReadingEdge/#ss-9/plaintexthttp://www.typewolf.com Popular Webfont Library: http://www.webtype.com, http://www.myfonts.com, https://typekit.com, http://www.google.com/fonts, http://www.fonts.comhttp://www.webtype.comhttp://www.myfonts.comhttps://typekit.com http://www.google.com/fontshttp://www.fonts.com Notable people: Nick Sherman, Jason SantaMaria, Erik Spikermann, Peter Bil’ak, Brian Hoff Notable foundries: exlijbris, fontfont, Just Another Foundry, Linotype, Monotype

20. Open Discussion

21. What Next? Utilize web fonts when possible and appropriate Pick another topic for next meeting. Any suggestions?