How To Size Text the Web Standards Way
This blog entry covers:
- Why it is important to use relative text sizing units (ems and percentages)
- Why NOT to use pixel units
- Why NOT to use point units
- Why NOT to use keywords
- Helpful resources
When designing web pages, you might think that choosing a font size should be amongst the easiest and quickest decisions a web designer makes: simply choose a readable pixel size and move on right? Well, that is one way to do it...but it certainly isn't the most thoughtful, adaptable and accessible. It is, for several reasons, bad practice and anyone designing a website should seriously consider getting acquainted with the relative way of sizing text. It takes more work, but it's a more efficient method that produces better results across multiple browsers and devices and allows your content to be accessible by a wider audience.
Pixels are not the only way to size text. The units available to web designers for sizing text are pixels, points, percentages, ems, and even keywords.
So which should you use?
Ems and percentages are considered the desirable units for sizing fonts using CSS because they avoid the pitfalls of pixel and point sizing (explained below), are re-sizable in all browsers that support resizing, AND are relative to a user's font size preferences.
Yeah, well, computer screens display in pixels. I love pixels. Why shouldn't I design in pixels?:
That would be lovely if everyone used the same browser, the same monitor and if we all had the same vision. We, however, don't live in that world and good design keeps functionality at the forefront. A well-designed website will allow text resizing and will do its best to look the same across different browsers, platforms, devices, etc. The proper text sizing tool in the web designer's arsenal is not the pixel, it is the em (with a little help from the %).
When it comes to text (and line-heights), our usual friend The Pixel, ignores user preferences and doesn't re-size in Internet Explorer. This makes pixel-defined text sizes a bad idea when considering accessibility issues and we must consider accessibility issues. Accessibility to equal information and services is not only a human rights issue (which is reason enough), but also about making sure your code can be adaptable to a variety of devices and applications.
The resizing issue can't be underestimated. Internet Explorer stills claims the largest audience and small text is a very real problem for countless users.
Another drawback, albeit one that I am guessing is not an issue for the majority of websites, is an inconsistency amongst browsers on how to handle non-integer pixel values (i.e. some can handle 12.5 px, while others can not). This matters if pixel-perfect sizing is desired on every major browser. I doubt designers regularly (if ever) code non-integer pixel units for text sizes, but it can accidentally happen when a pixel value is applied to a parent and a percentage or em to its child.
Ok, what about points?:
No! Don't do it! Points were not designed for screen-based design. They are a great desktop publishing unit, but not a great web design unit. When being converted to pixels, the math is extremely inconsistent amongst different browsers. It's a confusing explanation best left at: don't use points for text sizing unless you are writing a print-media style sheet.
Hm, well, that leaves keywords?:
No again and I find them too confusing to explain very well, but they offer up the same issues as points regarding consistency and control problems. For a detailed explanation by someone much better at explaining these than me, feel free to read this concise explanation.
Helpful Resources:
The Em Calculator: Converts pixel sizes into em sizes
A List Apart article: Explains how to use ems and percentages to size text using CSS
The Practice of Recreation
After taking several computer-based design classes, I've come to expect at least one assignment per course to be some sort of variation of recreating an image as accurately as possible using the tools and techniques taught in class. We did this twice in Illustrator and I'm amazed at how much progress is visible between my first recreation project and my last one. The first attempt was much harder and looks much worse, BUT it was part of the learning process. I struggled to get Illustrator to recognize specific objects as selections. I struggled to get colors to work. It was a pain and I hated how it looked! HOWEVER, that assignment made me much more grateful for everything I learned later.
Early in the course, we were to recreate an image from a list of themes (being a bookseller, I chose the literary theme.) Here it is in all its glory:
original image (L), my frustrating attempt at recreating it (R)
The end of our course culminated in a three-part final project, part of which was to recreate a wine label as accurately as possible. I have to say, everyone in my class improved so much. It was awesome. We had to get each of our three illustrations printed and mounted to present on the final day of class and some of the work was simply breathtaking. I went to (risd)prints by concept link in Providence because they work with the RISD community. I had my wine label printed on a huge piece of archival paper that would normally cost about $75, but as a student, cost closer to $25. I recommend them, although they can get really backed up at the end of a school semester; I was lucky and was able to get all of my stuff done within about two hours.
original wine label (L), my recreation of the label (R)
The vast majority of the time spent on the wine label project was spent using the pen tool to create all of the shapes. The text for "Orangedale Sunflower Brand" was also created using the pen tool, but I typed in the smaller pieces of text with fonts from my computer that matched closest to the original poster fonts.
To create the shapes, I placed the original image on its own layer and lowered the opacity to somewhere around 50%. Then, I put on some good music and settled in with the pen tool.
original image with lowered opacity and the beginnings of the shape tracing
near the end of the tracing period w/ the original image turned off
larger image of my recreated wine label
The trickiest part to recreate was the center of the flower. It'd be nearly impossible to trace because it is simply too detailed and busy. My teacher asked me how I planned on doing the center of the flower, and I said I was thinking of using the symbol tool to spray a bunch of custom symbols inside of a circle shape. She told me one of my classmates was having a huge issue with his file size after using the spray tool for a similar issue (in his case, he was trying to recreate plants in a field).
I told her I'd try using a pattern instead. She suggested creating a few circle shapes on different layers with transparent backgrounds. That would create a more random detailed effect. I think it was a time-saving tip that worked pretty well. Now I have nice print that I'm going to frame and put somewhere in our new apartment.
The Tilde Technique in Illustrator
This was one of my first "exercises" in Illustrator class. I can't even recall the specific instructions. I think we were supposed to use basic shape/line tools, some color, a little text, and stick to only a few specific themes (I remember choosing the "spring" theme). My teacher showed us this fun little technique using the tilde key (it's that sideways looking "S" to the left of your 1 key). If you hold the tilde key down with a shape tool selected, Illustrator will rapidly repeat the shape as you move your mouse. It can create some complex looking designs in a matter of seconds. I'm probably going to be saying this over and over again, but I love Illustrator. It's amazing. So in the spirit of this entire blog, I am posting some of my "training-wheel" pieces.
It's amazing to look back at the exercises and assignments I did at the beginning of the course and remember how I struggled to get things to look the way I wanted them too, simply because I wasn't familiar enough with Illustrator to know how to do them better/easier.
On this one, I was testing out the tilde technique, the gradient window, the pathfinder window, and text on a path.