Entries Tagged as 'Web Design'

Using Pixels or Ems in Your Web Designs

Q:What is the practical difference between px (pixel) and em (pronounced m)? When is it best to use one over the other?

The short answer is that pixels measure dimensions relative to the screen while ems measure dimensions relative to type size.

The slightly longer answer is that pixels are the natural unit for measuring dimensions on a screen and are often used when precise deign is required. Ems are the natural unit for measuring type and used when you want to allow maximum design flexibility.

The carpenter’s adage goes “measure twice, cut once,” but carpenters deal with the physical universe where a board always stays the same length once it has been put into place. Many designers want to define with exact precision the placement and size of elements, similar to the way they might design for print or video. Those medium are static, even video, which might move and be projected on to larger screens, but the aspect ratio does not change so everything is scaled relatively. However, on the Web, you are dealing with a variable canvas, with its final size dependent on the whims of the viewer.

Read the Full Article on Peachpit.com »

Web Designers and CSS3 Tricks

This week I had two different articles go out on different blogs.7-rotate.jpg

The first was over on Peachpit.com where I’m writing a weekly blog now called “Ask the Web Designer“. This week I answered the very basic question “What is a Web designer?” Answer: Everybody. Here’s a bit more of my answer:

The long answer is that a good Web designer is a good design, and this can come “naturally” or from training, but is not medium dependent. However, a professional Web designer has to understand the medium well enough to know it’s strengths and limitations. Any designer can pump out something that looks brilliant when displayed in a Web browser window, but is slow to load, static when loaded, and completely unusable.

Read the article »

I also finally had an article I wrote weeks ago published in Webdesigner Depot with 5 (really 6) new CSS3 techniques that work in several browsers. However, since none of the browsers that supported the techniques included any version of IE and even though I went to great pains to explain that up front and talk about using these to enhance designs, the post caused quite a lot of heated discussion around using anything that doesn’t work in the browser that “everyone” is using. Here’s a typical comment in that vein:

While not developing for IE may work for you, most clients I’ve had still use IE. I do think if people start using these new techniques in sites it may help push IE to support the new techniques, yet I won’t be able to use them until they work for my clients.

Overall, the comments were positive, though, and I hope that the article will get some good discussions started around Web designers supporting a Web browser that seems hell bent on not supporting Web design.

Read the article »

Let Me See Your Typographic Inspirations

FluidWebTypeographyI’m underway writing my next book, Fluid Web Typography: A Guide , which will be out this fall. As with Speaking in Styles: The Fundamentals of CSS for Web Designers , I’ll be doing the layout myself. I got some input on the cover, but it’s not completely mine this time.

I’ve been collecting a lot of Web sites to use in the new book to show off the best in Web typography, but I’m looking for more. If you have a site you are particularly proud of, or can suggest one, take a look at my criteria below, and then add a comment after this article with a link to the site or (if you want to keep it private) use my contact form to send me the link.


What I’m looking for:

  1. Good use of typography in an attractive Web design (obviously). This includes typefaces, contrast, scale, motion, rhythm, and composition.
  2. Use of fonts other than the core Web fonts. Anyone using fonts from the Web-safe fonts list or using @font-face to download fonts would be best.
  3. No or limited use of type in images. I want to concentrate on typography set using text in HTML.
  4. No or limited use of Flash for typography. Some Flash for videos is OK, but I’m not looking for typography in Flash
  5. Recent. The newer the better.

The sites I get that fit my criteria will be considered for use in Fluid Web Typography and receive a copy of the book when it comes out.

Free Web-Safe Fonts Desktop

SiS-Desktop_1280x800.png

A little present to brighten up your dull Monday morning. I’ve created a new desktop wall paper listing the 62 cross-OS Web safe fonts, based on my list of Web-safe fonts. These are the fonts that are most likely to be on both Mac and Windows computers, making them prime candidates for incorporating into your Web designs. And you can now have them all at your fingertips.

To use, just find the font(s) that best suites your needs, add them to your font family list in your CSS:

font-family: "Franklin Gothic Book", helvetica, arial, sans-serif;

and sit back and watch the typographic yumminess. if the person viewing your site has that font installed (which is likely but not guaranteed) their browser will use it. Otherwise, the design falls back to the other fonts in the list.

I’ve created the desktop for a variety of monitor resolution, so choose the one that best fits yours:

If you find the list useful, please make sure and spread the word.

Will 2010 Be The Year of Web Typography?

Picture 2.pngAfter over a decade of unbearable waiting, false starts, and interminable doldrums, it’s just possible that 2010 may be spring-time for Web Typography. A perfect storm of new techniques coupled with new Web browser capabilities promise to elevate Web Typography from its current monotonous state into an actual creative discipline, and this might happen more quickly than expected.

Since 1998, the promise of downloadable fonts—the ability to embed any typeface we need in our designs—has been just over the horizon. But just like the horizon, it has seemed as if the more we move towards that goal the further it moves away. As a result, Web design has suffered greatly, with the same 5 fonts being used over and over and over.

I don’t want to bore you with the details, but here’s a quick recap of what is happening in the world of Web Typography that will change the way you design this year.

Web Safe Fonts

Picture 1.pngThe most likely source of new typefaces for designers to choose from has been right under our noses—pre-installed fonts. Every OS has a list of typefaces that the manufacturer has placed on every machine that gets shipped. Windows includes around 16 fonts and Macs have a little over 30. Couple this list with the fonts installed by Microsoft Office (and let’s face it, who doesn’t have Office installed) and Apple iLife (standard on all Macs) and the list of pre-installed fonts soars to around 180. Admittedly, not all of those fonts will be available across all operating systems, but there are over 60 fonts that are available on both Windows and Mac. For a sortable list of these fonts, check out my list of Web-safe fonts.

Downloadable Fonts


Both Firefox and Safari now include the ability to download the two most common font file format types Open Type (OTF) and True Type (TTF) and Opera will soon follow suite. The only hold out, is Internet Explorer, which currently holds the majority of the Browser market.

The OTF, TTF, and EOT Debate

While it is unlikely (unlikely as in “over Bill Gates’ dead body”) that IE will ever support OTF or TTF, IE has support it’s own font file format for download—Embedded Open Type (EOT)—since version 4. Microsoft, and many type foundries, like EOT because it includes DRM to prevent unlawful use of the the property. Although this severely limits the font choices available, it at least opens the possibility of having downloadable fonts.

However, it is possible that browser manufacturers may agree to some restrictions on how OTF and TTF are downloaded. For example, they could restrict the use of the font so that only the referring domain could access the font in it’s pages (so, no sharing). They can “sandbox” the file or encrypt it so that the end user could not steal the font. To be effective, though, these restrictions would need to be agreed to by all browser manufacturers.

A New Font Format?

Right now, a new Working Group is being set up within the World Wide Web Consortium (W3C) to consider the possibility of creating an entirely new font file format, or at least a font file wrapper, to be used exclusively on the Web. This new format might be EOT, or an EOT light, or possibly something entirely new.

The obvious disadvantage of a new format is that it will likely be restrictive, including some level of DRM and will require us to buy the font in the new format, rather than choosing from the thousands we might already own. On the upside, though, a new format will also likely include some form of file compression that will speed font file downloading.

The debate rages on at the W3C, and, given the snail like pace of previous initiatives, this may not see fruit for many years. If you want to see the sausage being made, you can join the mailing list discussion and either look or contribute your own ideas.

Downloadable Font Services

The most promising idea on the horizon for Web typography are the several Web Font services that will allow you to bridge this gap in file font formats between browsers. They promise to allow you to select from increasingly large lists of fonts that can then be licensed and downloaded for use on your Web site. None of the services literally sell the fonts, instead they allow you to choose from an assortment of free and priced fonts, add code your Web site that will then download the files from their own servers, restricting access to a domain you specify (so, no sharing).

The top contenders differ mostly in their interfaces and how the fonts are embedded:

  • Kernest: Uses a link to tag to an external CSS file, which includes the @font-face rule sourcing a file specific to the browser type of the end user. I tested Kernest out on my other blog, JasonSpeaking, in the site title. I found Kernest’s interface a little slow and difficult to navigate, but once my fonts were chosen, it was a breeze to deploy them.
  • TypeKit: Uses JavaScript to embed the font-file directly into the page. I tested this out on the Yuri’s Night web site, the interface was clean and easy to use, but I didn’t have any success getting the fonts to display once I added the code to my Web site. I’m not 100% clear yet why it’s not working, and I haven’t had a chance to talk to TypeKit about it yet, but I’ll be playing around with it some more in the coming weeks and let you know.

As great as it is to see these new endeavors, they both have some systemic issues, especially for designers, that will need to be addressed:

  1. If you don’t already own the font, but want to do visual comps, how do you design without the font?
  2. You have to rely on someone else’s servers, which might slow down your Web site.
  3. It appears as if fonts will be licensed per domain, which is kind of like licensing a font per document.
« Previous PageNext Page »