Transcript font-face
13DEC
Visual 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 @fontface 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?