Font Stacks
December 22, 2009
What’s in a font?
A Font Stack is an array of fonts that could possibly be used by the Client browser to render a website depending on the Client OS and what fonts are installed on the Client computer. It’s not a one size fits all, but it is the ability to control what fonts are displayed from best to worst case scenarios.
Why does it matter?
Font Stacks are critical in the design of a website and while widely overlooked or relying on what Dreamweaver may recommend it’s better to come up with your own. With more and more Clients updating their computers the more fonts we have to choose from.
How do Font Stacks Work?
Below is a diagram of how a Font Stack works
Here’s what Dreamweaver provides in terms of CSS “font-family declarations”. I use these as a starting point:
font-family: Verdana, Geneva, sans-serif;
font-family: Georgia, Times New Roman, Times, serif;
font-family: Courier New, Courier, monospace;
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-family: Arial Black, Gadget, sans-serif;
font-family: Times New Roman, Times, serif;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-family: MS Serif, New York, serif;
font-family: Lucida Console, Monaco, monospace;
font-family: Comic Sans MS, cursive;
Below is a recommendation for a Helvetica Font Stack:
font-family: ‘Helvetica Neue’, Helvetica, Arial, ‘Frutiger‘, ‘Univers’, sans-serif;
Example when all fonts are present:
There is a lot more we can do as Designers to provide better Design online to our Clients and understanding Font Stacks goes a long way in doing that.
Other Font Stack Resources:
Better CSS Font Stacks | Unit Verse
On top of that, CSS gives us a nice little thing called a font stack. ….. What “stack” would you recommend for someone who is being forced by ignorant …
font-family.com :: find the right font stack
What is font-family? Find the best font stack for your needs. Share great font stacks with others. Learn More. Increase Your Font Stacks With Font Matrix …
24 ways: Increase Your Font Stacks With Font Matrix
detect what font-family has been applied by the browser and set a class on the body … I totally agree with the idea behind this and a larger font stack in …
Code Style: Font stack builder:
Use the Code Style font stack builder to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts …
CSS font-family property
The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. …
PSD 960 Grid Template
December 20, 2009
In an effort to rapidly deploy comps to Clients I created a Photoshop Template to start from. The PSD contains guides, margins, gutters, 3-columns, etc. Please feel free to use as you please.
So You Want To Be An Information Architect
December 14, 2009
This is a quick post for those that want to become Information Architects.
You absolutely need to read two books: Information Architecture for the World Wide Web & Don’t Make Me Think.
You’ll need a really good attention to detail and a strong understanding of your deliverables. IA is not Usability and vice versa. They are sub sets of each other. In terms of deliverables, (being an IA) I deliver wireframes, power-points, word docs, POCs, and mockups. There are at times design aspects to those deliverables. If you come from the design side then you’ll excel, but if you’re coming from library sciences with no understanding of design principles, you have a bit more homework to do. On the usability side, I simply test if the ideas work through Usability protocols.
Find out what you’re in for. Below you’ll find the links to the books and what deliverables look like for IA.
Information Architecture for the World Wide Web
Don’t Make Me Think
Example of IA Deliverables
IA Links:
- Defining Information Architecture – Peter Morville
- Defining the damn thing – interactionbydesign.com.
- Information Architecture – Valentin
- Information Architecture Defined – Christina Wodtke
- Information architecture models – Ben Hunt
- The Definition of Information Architecture – Peter Morville
- What Is Information Architecture? – Iain Barker
- Web Site Architecture 101 – Rudy Limebac
Fullscreen Background Image using CSS
December 10, 2009
I had a project that required a background image to fill in the entire background of a website. The technical limitations were to have it totally done with CSS / JS. I did some research and found an example at giltman.com – so it was possible. I found some resources that used CSS alone but was yet to find one that scaled and fit all the image in the background with no background spaces.
I came across a great jquery plugin that did exactly what I wanted: Supersized jQuery Plugin.
Our WordPess Theme Accepted by WordPress
December 9, 2009
After using WordPress for awhile (and loving it) I needed a Framework or a Blank Theme that we could use as a base and build from there then rapidly deploy. The problem was there were so many strings attached to other Frameworks, but that’s another post.
This is our Framework that we will update monthly. Our view is to connect other Frameworks that most web Designers use like 960.gs or Blueprint for typography and leverage it into WordPress. Our goal is poetic code deployed rapidly.
Check out our WordPress Framework.
Hire Us!
There are some projects that go beyond demanding into almost impossible...If you have a project that requires attention to detail, versatile creative skill-set, fast turn around, and yet still affordable contact me to get started building your web page. Get started today!
