I love lynda.com training videos that cover an array of topics in web development. When I last logged in I came across a new video series called “Web Fonts First Look” by James Williamson. I thought this series was incredibly helpful and learned a lot more about typography for the web than I think I could have from 1 or 2 books on the subject.
Throughout the video tutorial, James Williamson works on a project called Alice in Web Fonts to demonstrate various techniques in web typography. He demonstrates with a few other fonts but one in particular called JUNCTION which I thought looked really nice! (Must consider using it in a project at a later date!)
Below are some of the notes I took as well as a lot of the resources mentioned from the video lessons.
These are the core controls with text in CSS that have these following properties:
font-family, font-size, line-height, color, font-weight, font-style, font-variant, text-transform, text-align, text-indent, width, letter-spacing, word-spacing
These are generic declarations that can appear in the font-stack if one does not exist:
serif, sans-serif, monospace, cursive, fantasy
There are a couple of resource sites to acquire information to target machines that already have fonts pre-installed and they are as follows:
- codestyle.org
- http://media.24ways.org/2007/17/fontmatrix.html – a matrix chart of fonts that can help build your font stack.
@font-face rules
There are rules for how to setup your fonts in your code and a great place to find out how that should be structured can be read here: “W3C CSS Fonts Module Level 3”
Step 1: Declare a font family by name.
Step 2: Embedded Open Type (.eot) font needs to appear first for IE to render right.
Step 3: Provide an absolute, relative, or local source reference to the font. (However a ‘local’ reference seems to be deprecated now because mobile devices such as the Droid will cause problems with the page loading.)
This is an example of @font-face construction for fonts that will be saved and served up from your own web server.
@font-face {
font-family: 'MyWebFont';
src: url('../_fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('../_fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../_fonts/webfont.woff') format('woff'), /* Modern Browsers */
url('../_fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../_fonts/webfont.otf') format('opentype'),
url('../_fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
In the video tutorial there was a discussion that you are limited to listing about 9 @font-face listings from what I can remember. However from my recollection he didn’t discuss how that can be resolved when he said that he would follow-up with that comment. If perhaps anyone knows more about this subject please post a follow-up link.
Check out Ethan’s article for the @font-face post
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
VENDOR PRE-FIXING
“webkit” is often referring to Safari and Google Chrome browsers
You can optimize a pages CSS output to certain browsers by putting a vendor name before it’s CSS prefix to apply subtle affects. Here is an example of how that can be done:
-webkit-transform: rotate(-10deg); /*Safari, Chrome and mobile platforms*/ -moz-transform: (-10deg); /*Mozilla*/ -o-transform: (-10deg); /*Opera*/ transform: rotate(-10deg); /*a default property*/
Prefixing Services
- Compass
Compass is a framework for Sass that, among other things, will automatically handle the process of prefixing your CSS3 properties. - Prefix-Free
A unique JavaScript-based solution that dynamically determines which browser is being used, and then assigns the necessary prefixes to the stylesheet. - CSS3 Please
A nifty service that provides copy-and-paste, cross-browser CSS. Adjust the values according to your needs, and you instantly have a snippet that will correctly target all applicable browsers.
modernizr.com
Modernizr adds classes to the element <html> which allow you to target specific browser functionality in your stylesheet.
SOURCES
- www.w3c.org/fonts/WG – WebFonts Working Group (W3C)
- fffo.grahambird.co.uk – For a breakdown of different font places to choose from you can view a comparison chart from “@FONT-FACE – FACE OFF”.
- caniuse.com/#cats=CSS – Browser support for CSS and other technologies.
- http://www.type-a-file.com – Speed up CSS development
For further reading on “Font-Hinting”
WHERE TO GET FONTS!
| Affordable Fonts to Purchase | Open-Source Fonts |
|---|---|
| Browser Testing Sources | Font Converters | Other Web Font Tools |
|---|---|---|
|
For further inspiration check out the following:
- webfontsgallery.com
- webfontawards.com
- typographica.org
- designmadeingermany.de/magazin/5
- underconsideration.com/quipsologies
- thinkingwithtype.com
- typekit blog
FOLLOW-UP ARTICLES
- The History Of A Model for Fonts On The Web
- Bulletproof @font-face Syntax – Paul Irish
- Tim Brown – best blog place on web typography and free high quality web font sources
- Comparing Body Size Comparisons With Different Type
- Better CSS Font Stacks
- 24 Ways – Increase Your Font Stacks with Font Matrix
- Wiki style website which includes great articles, demos, and coding samples…
- i love typography – Blog Source, reviews and featured fonts…
Video (30 minutes)
Tim Brown – More Perfect Typography
Leave a Reply