13DECVisual Design Group Meeting

Introduction: Typography on the web

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

Case Study: 7.1 Admin DASH

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?

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.

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.

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.”

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

Actual screenshot of implemented interface

Actual screenshot of implemented interface

The interface that we replaced.

How do you use Google Fonts?

• Google Fonts: www.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-weight

The Good

• Updates the interface and is good web practice

• Offers more options for the look and feel

• Can improve legibility

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.

Additional Resources

Responsive Typography: http://ia.net/blog/responsive-typography-the-basics/

TypeKit Blog (see categories on right): http://blog.typekit.com

Typotheque: https://www.typotheque.com/tag/webfonts

Fonts.com Learn about web type: http://www.fonts.com/content/learning

Ampersand Conference (Web Type Conference 2013): http://ampersandconf.com

FF Chartwell: https://www.fontfont.com/how-to-use-ff-chartwell#intro

Typophile (Tim Brown section): http://typophile.com/user/7222/track

Ilovetypography.com: http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Fonts in use: http://fontsinuse.com/in/2/formats/3/web

Webfonts.info: http://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.com

Popular Webfont Library: http://www.webtype.com, http://www.myfonts.com, https://typekit.com,

http://www.google.com/fonts, http://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

Open Discussion

What Next?• Utilize web fonts when possible and appropriate

• Pick another topic for next meeting. Any suggestions?