Design Reference

If you handed me the flyer design above and told me to improve it as much as possible in only three minutes while keeping the overall personality, this is what I would give back to you: This design simply feels better, and not just because I refuse to ever use the “Party LET” typeface, especially when typing the word “party”. I also split up the content a little better added some emphasis points and, most importantly, changed to a left alignment. Notice how the left alignment feels very anchored. The text on the page has a clear starting point and you can follow that hard edge all the way from top to bottom. Despite the fact that the first flyer feels “balanced”, it doesn’t feel anywhere near as structured.

When To Stay Away from Centered Alignments All right, so you get the point: left alignments are good, centered alignments are bad, so what? The reality is a little more complicated than that. There’s nothing inherently bad about a centered alignment, you just have to know how to properly yield one if you’re going to implement it with any amount of success. The first thing you need to learn is when not to implement a centered alignment. The answer here is pretty simple: when you have a lot of content. As we saw in the last example, centered alignments are pretty poor for large blocks of text. The lack of a hard edge makes reading difficult and erratic. The same goes for relying on a centered layout for your page as a whole, most of the time, it’s simply not the best idea. The website wireframe below is quite problematic from a layout standpoint. Now, don’t read that as advising against centering your content on the page. There’s a difference between building a website that uses a centered container and a website that uses a center alignment. You can easily have left or right aligned content that is still centered in the browser window using margin: 0 auto. That’s another conversation entirely.

Conclusion To sum up, centered alignments are weak, but not bad. There’s a very important distinction there that you really must grasp to be a good designer. “Weak” implies that they can easily be taken too far and are easy to abuse. However, you can and should be using centered alignments in your designs. Make sure that, if your entire layout is built on a centered alignment, you have a very simple design with only a few items. Once you start adding big blocks of text and lots of images, the centered alignments starts looking messy. Also, try building a solid left, justified or even right alignment for your page as a whole, then experiment with selectively dropping in centered alignments in key areas such as headlines. Finally, as a quick trick when you’re in a jam, try wrapping center-aligned portions in a box that goes with the flow of the rest of the page.

Photoshop isn’t the industry standard for nothing, and there will be some of you out there hyperventilating at the thought of dropping it to design in the browser, after all we are creatives not coders. Well, put down the paper bag as there is still a way you can create beautiful typography using web fonts in Photoshop. Extensis have created a plug-in which can be installed to Photoshop versions CS5 and higher that will give you access to all WebINK and Google Web Fonts to use for free, directly inside Photoshop.

Services like Typecast make it much easier for designers to work with web fonts and I pretty much do all my typography for the web using it. It allows you to create typographical mock ups (just like you would in Photoshop) using its visual interface to assign fonts, styles, weights, colours, line height, margin, padding and more to your typography. The best thing about using Typecast is that it is all working within the browser so you are making decisions on type exactly as it will be rendered for the user. Does a certain font not look too hot at 19 pixels? Bump it up to 20 at a click of a button, back down to 19 before finally settling at 18 pixels in size, all done in seconds rather than hours sitting with a developer.

Use Font Families First of all, when possible, check out the various fonts within a single family. These fonts have meticulously been designed to work together and are therefore the safest method of varying your font without creating visual discord.

Lobster & Cabin Lobster is one of my favorite scripts of all time. It’s bold and beautiful while remaining quite readable, attributes not easily found in other scripts. To complement this strong statement, you don’t want anything that competes for attention. Instead pick something plain and simple like Cabin.

Dancing Script & Josefin Sans Scripts are hard to implement properly, especially when they’re not as widely applicable as Lobster. Dancing Script, shown in the example above, definitely isn’t my favorite script but it’s one of the better ones available in the Google Font Directory. Since Dancing Script is a lot more feminine than Lobster, I paired it with Joesfin, a really thin sans-serif to further this style. This combination is definitely appropriate for any products or websites with a female skew.

Sans-Serif Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. The first sans-serifs were created in the late 18th century. There are four basic classifications of sans-serif typefaces: Grotesque, Neo-grotesque, Humanist, and Geometric.

Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk. These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs.

Neo-grotesque typefaces include some of the most common typefaces: MS Sans Serif, Arial, Helvetica and Univers are all neo-grotesques. They have a relatively plain appearance when compared to the grotesques.

Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande. These are more calligraphic than other sans-serif typefaces, and are also the most legible (hence the popularity of some of them for website body copy). They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths.

Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail. They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule.