Posts tagged as Typography

the latest
Older

Reconsidering Arial

Jonathan Nicol does a nice job of visually demonstrating how Helvetica and Arial render at smaller sizes on a PC. My typical font stack has been Helvetica, followed by Arial; however, seeing Helvetica rendered at small sizes on a PC makes me reconsider that habit. The conclusion for me can be generalized as: use “Arial, Helvetica” for body copy and “Helvetica, Arial” for headings.

Oct 7 2009

Helveticons

A set of icons based on the visual language of Helvetica Bold. Roll over the area in the top right (the big “245″) to see the icon set preview. A very pleasant respite from the glossy, high-fidelity style of Apple-inspired icons.

Jul 9 2009

Two Logos for the Road to Recovery

Aaron Draplin and Chris Glass's us.TIGER.gov logoI love this take on the new TIGER logo (excerpted from a mostly positive assessment).

The type choice for TIGER is odd though: Kabel (slightly modified).

First because, well, who in the world uses Kabel? But second, it’s designed by Rudolf Koch, a German typeface designer; and while there is nothing inherently wrong about that, as designers it’s important to acknowledge the context of certain typefaces and consider whether their origins are relevant. Wouldn’t a typeface designed by the most prolific American type designers Morris Fuller Benton or Frederic W. Goudy have been more appropriate? To the public it doesn’t matter and in the bigger picture it hardly makes a difference, but when you are able to add a little more meaning to a logo, why not?

Mar 8 2009

Favorite CSS Framework Design Patterns

Over the last couple of years, a whole collection of mature CSS frameworks have emerged, with the ambition of making CSS development faster, the rendering more predictable and the code easier to maintain. I’ve recently wanted to revisit some methodologies I use when it comes to maintaining CSS across a product line, and what better place to research CSS best practices and abstractions than the frameworks used by thousands of other people.

Reset

Every single CSS framework out there that I’ve looked at ships with a reset stylesheet. I think even the most framework-averse CSS artisans can find value in reseting the browser defaults and have all the elements start off on equal footing, regardless of browser. There are a couple of options for this, you can go with the industrial reset.css, courtesy of YUI, or with the local, organic variety, via Eric Meyer.

Font Reset

Font-sizing is another area that is hard to do “right”. Ideally, you want your fonts to scale when the user changes their browser’s font-size setting. Doing so means using relative units, which means lots of added complexity (i.e. arithmetic), and even then, consistent results across browsers aren’t guaranteed.   There are a couple of schools of thoughts on text sizing, but I like to err on the side of Yahoo.  If anything, they’ve put their YUI framework through a testing gauntlet, so you can be confident that their methodology will produce good results.  You have to use percentages to set your font-size (easiest to reference their percentage → pixel translation table), but outside of that inconvenience, you get scalable font sizes virtually for free.

Neutering deprecated elements

I noticed Tripoli using this strategy. They take the likes of the <font> and the <center> tag and hinder their ability to affect the page style and layout. It’s a pretty interesting way to discourage their use and making bad habits a bit more toothless.

Setting good defaults for core elements

One of the most jarring things when you first switch to using a reset stylesheet is that writing simple, semantic markup no longer results in an intelligible document by default — all the headings, paragraphs and lists are the same size and so are the margins between the elements. You’ll feel like you’re doing a lot of extra work defining that which should be more implicit. Either way, if you’re far enough into a project, even if you didn’t use a reset stylesheet, you would probably have redefind those elements anyways , as the browser defaults aren’t good. Defining smart defaults on top of the reset stylesheet helps you save time redefining these basic elements, while establishing a more rigorous typographical system than the browser defaults could ever provide.

Concept of a template for basic layout

A lot of the frameworks use the concept of a template. You start off by marking-up your document with a pre-defined structure of common elements. For example, you’d add the header, navigation, content, primary-sidebar, secondary-sidebar and footer to your HTML.  Once these pieces are in place, you can liberally change the layout from fluid to fixed, as well as change the order  in which the sidebar and content elements display – all by adding one <div> around the common elements that specifies the template you’re using as a class.

css-template-graphic

Modular Components

There are many common interface patterns, but most don’t merit being included on every single page. Things like pagination and, arguably, form styles are great candidates for including individually on top of the core CSS framework. You would include these components only when you need them.  There are a lot of good thoughts in this presentation from Yahoo’s Nicole Sullivan on how to best abstract site components in terms of structural markup and CSS classes. Particularly, pay attention to the concepts of “extending” components by adding classes, as well as “separating the container from the content”.

Pseudo-namespacing

All re-usable CSS components should use class names with some standardized prefix. For example, instead of using “.block” you’d use “.ez-block” to define a generic class block. This helps identify the component as a piece of the framework and gives the developer working with the framework sufficient caution when over-riding those styles. This also helps minimize conflicts when including javascript and CSS modules that aren’t endemic to your CSS framework.

Bringing it all together

With all of this in mind, this is the list and order of all the CSS components that would be included to make up my ideal CSS workflow. 

Ideal CSS framework stack

Notable CSS Frameworks

Mar 4 2009

The Story of FF DIN

A Font Shop mini-site dedicated to FF DIN.  They do these really well.  This type has some of my favorite characteristics: simple, neutral and rooted in information design.   Knowing the background of a typeface always gives me more confidence to use it.  That, and the fact that Pentragram is all over it.

Feb 20 2009

Posts tagged as Typography

the latest
Older