After spending a lot of time working with graphic designers, I now know a lot more about design than I did before. I have learned that it’s the small things that can make or break a design and can find a lot more of my mistakes before having the template scrutinized. Below is a compilation of some of the most valuable lessons I have learned about design.
Web Typography
If there is one thing to take from this piece it’s this. Typography is one of the largest make or break factors of a design. With a simple change of font, you can change the look of a page from sleek and modern to old and dusty.
The first thing you need to know about typography is a bit of terminology and how it translates over to CSS For some reason, CSS decided to ditch the standard terms and make their own so talking typography with a designer will be tricky without these definitions.
Typography Terms
Leading: The amount of vertical space between lines of text. In CSS, this translates to the line-height property. This will be the most important and commonly used typography property.
Kerning: The space between each letter in a word. This translates to letter-spacing in CSS Usually the font used will have a good default setting but in some cases it may need to be adjusted.
Word Spacing: The space between each word. This translates to word-spacing in CSS. Again, this one won’t need to be used very often, but it is still good to know the terminology.
Serif: There are 4 main types of serif fonts. Old Style Serif, Transitional Serif, Slab-Serif, and Modern Serif. A serif is the flourish found on the ends of letters. Times New Roman is a serif font while Arial is a sans-serif font. Most printed books are printed in serif fonts as it was found to be easier to read. For the web, sans-serif fonts are more commonly used. Each type of font gives a web page a different look and feel.
The three most important aspects to typography on the web is font-family, line-height, and font-size. Make sure that you pay attention to what font the designer is using. If it is not a standard system font, try to find a web-font version and always use your fall-backs correctly. If the design is using Helvetica for example, follow that up with Arial, and then the generic sans-serif. Your CSS would look like “font-family:’Helvetica’, Arial, sans-serif”.
With line-height, make sure your lines aren’t too cramped. If they are, it will be too difficult to read and it will look very strange. I usually use em’s to dictate the line-height unless I am trying to vertically centre a single line of text like in a navigation menu in which case I will set it to the exact height of the bar in pixels.
Finally, font-size. I try to always use em’s to size fonts. This way, it is easier to change the size from the browser. The problem (and at the same time, advantage) of em’s is that it’s relative sizing. If you set the body element to 0.75em (12px), when you then size, for example, the header to 0.75em, the header won’t be 12px. It will now be 9px. Rather than figuring this all out yourself, a great resource to determine what em size to make your fonts, check out pxtoem.com
The Grid System
Designers usually design using a grid system. Grid systems can be very complex or very simple. Either way, they are based on a system of rules. Every element is placed where it is for a reason. It is never arbitrary. This does not mean however that every element lines up in a perfect column. Sometimes it is a half, a third, or a quarter of a column. Communicate with your designer to find out how wide each column is intended to be and how much spacing between each column there should be. Pay attention to what element in the main column lines up to what element in the sidebar. If you stray from the grid, the final outcome may look very lopsided.
Overall, the biggest lesson learned is communication. Web designers and web developers usually come from different educational backgrounds but have to work together to get a website off the ground. Sometimes a designer will add an element that is outside the scope of a project or that isn’t possible at all. Other times a developer might miss a font change or use the wrong grid size and make the designer really mad… To avoid these issues, remain in communication as much as possible and the final outcome will be drastically improved.