Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Income Diary, a blog that offers simple, practical advice for how to earn money online. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Income Diary

“I launched IncomeDiary back in 2009 after a conference I attended in Washington DC in March that year. Before this, I had been running websites successfully for around 4 years and one of the major things I took away from meeting like minded entrepreneurs was, you got to give back! This is what this website is all about, educating and helping internet entrepreneurs, no matter what level they are.”

Here is a screenshot of the homepage:

First Impression

Income diary isn’t breaking any barriers in blog design. It’s a very straightforward design that utilizes a layout seen on a million other blogs around the web. Is this a negative thing? Not in the least. In the same way that newspapers eventually all fell into a similar and predictable format, it’s perfectly natural that blogs would land on a few standard layouts that work well.

The benefit is that new visitors are immediately comfortable with the format and know how to get around from the second the site loads. Innovative layouts are great too, but there’s a common misconception in design that something that isn’t innovative isn’t good, and that’s simply not a true statement.

That being said, there are a lot of solid design choices made on this site. Aesthetically, it doesn’t blow me away, but it is fairly attractive and functionally solid. The primary question that I always ask for any design critique is, “Does the design accomplish its purpose?” In this case, think the answer is yes if the purpose is to successfully educate people on how to make money online. Let’s explore why this is true.

Color Scheme

If you’re familiar with our design critiques, you should already know what I’m going to say about this color scheme. It uses the simple color scheme trick that you almost can’t go wrong with:

First, the designer chose a main color, in this case green. Green is a solid choice, not because of anything aesthetic but because of the psychological correlation that we inevitably make: green = money. This site is about making money so there’s no color more appropriate!

Next up, a few different shades of this color were chosen. This provides a decent way to have subtle variation throughout the design: gradients, different header bars, etc. Finally, one color was chosen that complements but stands out from the main color. This technique provides an incredibly safe route to choose a color scheme that is neither monotonous nor overly busy.

Logo

Like everything else, the logo takes a very safe and predictable route. This is something important that is worth discussing. Is this a boring, generic logo? Yep. Is it better than a non-designer attempting to create a complex logo? Absolutely. The bottom line is that not everyone who creates a website is a professional designer. If this is the case with you, don’t feel bad about typing out your website name in a simple manner and calling it a day. One day when you have the budget (though arguably this site should right?), you can hire a professional to create a unique identity for you.

One thing that I think this site needs to rework is the tagline on the logo. It’s simply too thin and tiny and doesn’t read well. A simple solution might just be to increase the size of this line so that it has the same horizontal width as the line above it.

Navigation

The navigation area is a classic CSS nav format with big blocks defining each link. One thing that I’m constantly criticizing designers for in these critiques is link hover effects that are so subtle that you can barely tell that one exists, especially if you happen to be a color blind user. Fortunately, that’s not the case here.

As you can see, the difference between the hover and non-hover states is quite dramatic and can clearly be seen by all users. This may seem small, but small mistakes can ruin a design so it’s important to get this stuff right.

Information Hierarchy

Creating a solid informational hierarchy cuts to the very core of what your goals are in a web design. If you write down all the things that you want to accomplish with a web design, this should always be near the top of the list.

One of the most solid aspects of this design is how all of the information on the page is structured. For instance, notice that the most recent post in the home feed is given more visual importance than the other posts in the form of a larger preview image.

We use this same trick on the Design Shack homepage to an even greater degree. It’s a bit subtle on Income diary and I would even suggest that the designer find an additional way to make it stand out even more (different background color, larger headline, etc.).

There’s yet another level of differentiation as well. As you scroll down the post list, there’s a section with a few products that you can purchase. This is where that other color comes in that we discussed before:

This content is thrown into a nice minimal box with solid text and image layout and plenty of whitespace. It’s a great way to set this content apart from the main feed.

Now, though I like the design of this little box area, I’m a perfectionist so there’s one thing that drives me crazy:

The button below the product preview is almost the same width as the image above it, but not quite. It’s literally a manner of a few pixels but I can’t help but be distracted by it. Either make it the same width or make it much narrower, anything else looks like a mistake.

Footer

We’ll end this critique off with a quick look at the footer, simply because I like the way it looks. I love how the content breaks the footer line, the transition from gray to white when you hover over a link, the clean, minimal presentation of the social icons, and the oh so subtle hint of texture behind the logo. In my opinion, this is the best looking part of the site. A strange conclusion to be sure, but I’m just a big fan anyone that doesn’t slack off and toss on an ugly footer as the last step of a design.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

How would you rate the design of Income Diary?

First off let me apologise for the laboured metaphor I’m about to inflict on you, but I thought it could be entertaining to try and describe the web design industry using a medium I’m sure you’re all familiar with—Dungeons & Dragons. However I should point out that I’m no D&D expert, having played it last when I was 13. So please don’t leave comments to the line of “you got that all wrong as those character classes were changed in AD&D 2nd Edition, Unearthed Arcana.” or I’ll pull out my +2 broadsword and go Berserker on your ass.

In the world of Dungeons & Dragons, characters could have a variety of professions such as Fighter, Thief or Magic-User. These professions were loosely related to a characters natural abilities. So if you were intelligent you’d be well suited to becoming a magic-user, whereas if you were dexterous, becoming a thief was a good option.

In the real world, your natural interests and abilities will also dictate the career path you follow to some extent. It’s doubtful that you’ll have a natural ability in a particular discipline, but your innate attributes will make it easier for you to pursue certain careers than others. So if your a logical thinker, development is a natural avenue, while if you’re empathetic, people management is a good career. If you have both, you get to choose one or the other or maybe even combine those skills and become a scrum master.

In the world of Dungeons & Dragons, Fighters were the bedrock of any quest. For a new party, you wouldn’t get very far without a fighter or two to guard your back, while a group of fighters could easily operate on their own, without the assistance of other classes. The same is true on the web. Programmers are the fighters of the web. It’s entirely possible to start an online business with a couple of programmers and you”d be successful for a while at least.

Thieves are sharp, agile and good with technology. The hackers of the fantasy world. In a modern campaign you’d want at least one thief along to pick locks, disable traps and run interference. With their penchant to form guilds (The Guild of Accessible Web Designers anyone), Thieves were front end developers of the D&D multiverse.

Thieves and Fighters could make pretty good headway on their own, but throw an illusionist into the mix and you’ve got a powerful combination. Illusionists are learned in the arcane sigils (typography to you and me) and had the power to dazzle people with their magical incantations. Relatively useless straight out of college, they only came into their own at higher experience levels, where they become formidable allies. Illusionists benefit from being around higher-level magic users as they can swap spells and learn faster. Similarly design is typically a learned profession but novice designers struggle on their own. So they need lots of support from senior practitioners. However when designers start to become seniors themselves, they are amazingly powerful, and a good creative director is worth their weight in sharpies (£5,500 if you assume the average weight of a man is 62kg).

Clerics are the wise healers of the pack. Their job is to look after the spiritual and physical well being of the team. A little like a good project manager when you think about it.

Lastly you have the Rangers. Rangers require higher than average attribute scores across a range of different areas, so tend to be less common. Like Wizards and Thieves they are also a learned class, having to study things like tracking and animal lore. In fact, higher level Rangers even have the ability to cast certain spells or defuse traps. As such they are a bit of a hybrid. Rangers are great in open country and typically work alone. However they’re not much use in towns. So Rangers aren’t needed on every quest and are a bit of a specialism. To me, Rangers are the UX Designers of the D&D world. Highly trained specialists, of use in a subset of specific projects.

Characters in Dungeons & Dragons progress by gaining experience points which relate to the complexity of the quests they undertake and the level of the foes they defeat. If they do something themselves all that learning goes to them. However if they are part of a team the experience is typically distributed amongst everybody. So the more quests you undertake, and the bigger those quests are, the more you’ll progress in your careers. If you play infrequently and only accept easy challenges it can take you ages to move forward, while if you work with a small but experienced team on tricky adventures you’ll grow much faster.

The same is true with the web. Learning comes through experience and the more projects you undertake the better you’ll get. If you accept simple projects with little risk you’ll have an easy life but you won’t push yourself. It’s only by taking risks and working on projects that are slightly outside your comfort zone will you learn new skills and push your career forward apace.

With some character classes, new skills become available at higher levels. You could argue the same is true on the web. There are certain skills you would typically only pick up at higher experience levels and are unlikely to be present in junior practitioners. As such, your level of experience really does impact what you can and cant contribute to a project.

Now here’s where things start to get interesting. In D&D it’s possible for characters to follow multiple classes. However if you do this you have to split your experience across the different classes making progress much slower. In new of mid level teams, this isn’t so much of a problem. So a 2nd level Thief-Ilusionist can hold their own with a 4th level fighter. But a 6th level Theif-Illusionist would probably be outclassed by a 12th level Ranger.

This is also true in the real world. It’s totally possible to do both design and development, and in the early stages one will actually aid the other. But as you undertake one project after another you’ll find that it’ll take you longer to become an expert in either. So it’s great if you’re an all rounder in a team of all rounders, but becomes difficult to carve out a meaningful niche amongst a group of experts.

There is one caveat here and that’s that Bard character. Bards were a really weird class and therefore not something many people played. They had to have really high ability scores across a range of attributes. They also had to start out as a Fighter, then duel class as a Fighter-Thief and then finally duel class as a druid. It’s only after going through this long and laborious process that they could become a 1st level Druid and start all over again.

I think this is the position a lot of UX practitioners have found themselves in. Rather than going through the higher education track, they have worked their way thought the design and development professions, never settling on either. Instead they will get to a medium level of mastery before getting bored or distracted by something else. As such, there is a subtle but important difference between a designer and developer who does a bit of UX (think multi-class character) and a self trained UX practitioner (think a multi class character who took a specific set of steps in order to change class to a Druid).

And that’s it. My slightly laboured, incredibly nerdy description of the web design industry, as explained through the medium of D&D.

You have the initiative. What’s your next move going to be?

DYSON’S WEBSITE won’t sell me a vacuum cleaner. It claims New York, a U.S. state it provides in its own drop-down menu, is “not a valid state.” I have previously ordered Dyson products from the Dyson website and shipped them to a different address in New York. I have an account and everything. But the website won’t let me ship products to my office. This is just one of about a dozen errors that wasted half an hour of my life today.

Business cards are an awesome creative outlet where designers tend to push themselves to come up with unique and interesting solutions. If you’re a newbie to business card design though it can be difficult to break out of the cliché unoriginal layouts that will no doubt pop into your head. This post of over 15 free layered business card templates should help you out.

As a bonus, we’ve included not only layered business card templates, but a few editable 3D mockup files as well so that once you start creating your own awesome designs, you can show them off in style.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Templates Creative Business Card Vol 3 Seextwood business card by hertzz Page Curl Business Card Industrial Business Card Vol 1 Free Modern Business Card II Business Card Template 2 by An1ken Free Business Card PSD by robbythedesigner Free Modern Business Card I Technix business card by hertzz Bokeh Card by anderworks Business Card Che Guevara Business Card by robbythedesigner Corporate Business Card Vol 2 3D Mockups Psd Business Card Mock-Up Vol 1 Free letterpress business card mockup Free Business Card Mock Up Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

15 Free Business Card Templates That Don’t Suck: http://goo.gl/blBga

  

Controlling who is able to view a post is a simple task once the system is established. Limiting access to certain users has several advantages, ranging from a design studio distributing artwork among various clients, or a small school arranging to have its students' homework posted online through a cheap and easy solution.

The easiest method to get this system working is to make the receivers of the information subscribers (since they will not be able to post), and the distributors of information authors (since they can only edit their own posts). This system eliminates several headaches for a webmaster by managing who has access to specific posts. The username will be used for identification of who is allowed to view certain posts since it is unique and, for the most part, constant.

A great example of an analog style control that makes an impact through its use of texture.

I particularly like the soft use of lighting effect.

This design was featured on the Friday 27th of January 2012. It falls under the category of Element, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

A great example of a letterpress business card that oozes minimalism.

I particularly like the restrained use of text, and the attention given to the typeface.

This design was featured on the Friday 27th of January 2012. It falls under the category of Business Cards, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

A bold site for a digital agency that makes strong use of typography.

I like the minimal header, and how it gives way to a portfolio of previous work.

This design was featured on the Friday 27th of January 2012. It falls under the category of Design, and has a layout style of Other.

If you'd like, you can visit this site, or view all our other featured designs.

I was really disappointed to see a recent post from somebody I admire and respect defend the validity of the new UX Developer job title that has been cropping up of late. As well as being misleading, the title, UX Developer has implications that are damaging to the field of User Experience and will hasten the current devaluation of the term.

Despite what many newcomers to the industry may think, User Experience Design is a well-defined specialism as distinct from visual or interface design. The practice of user experience design is a specific field of study with its own books, conferences, membership organisations and college courses. User experience designers therefore have a distinct set of skills and practices that form the core of their profession.

That being said, user experience designers don’t own these practices any more than developers own the ability to code up wireframes. So it’s right that designers and developers look to understand more about user experience as it is for UX designers to want to understand more about the technology that drives their products or the designs that bring them to life. This is one of the aspects of being a professional; the desire to develop your core skills while understanding where your domain overlaps with others.

When I look at new job titles my first question is to ask what new or specific activities form the core of that discipline and make it distinct from other fields. Is this indeed a brand new field of practice or simply a catchy name for a set of composite skills? So when I first heard the term UX Developer I was intrigued. What new skills or techniques are these practitioners using that are specific to the technological side of the equation, and is there anything here I can use?

With eager anticipation I grilled every self styled UX Developer I met to find out what new skills or techniques they had developed. However the more people I asked the more disillusioned I became. Rather than being a new discipline, it became clear that UX Developers were simply developers interested in UX. So developers who wanted to get involved with the initial research, attend (or even set up) usability tests, build HTML/CSS prototypes, consider user needs when coding up pages and put pressure on designers and managers when these needs fail to be address.

I’ve been working with people like this for years. They’re called “good developers.”
There seems as little need for the title UX Developer as there is for the term UX Product Manager, UX Programmer or UX Database Engineer. Similarly, if you’re happy for Developers that do some UX activities to invent a new title, what should a UX person who does a bit of front end or back end development call himself or herself? How about front end UX designer, or creative UX technologist? That has a nice ring about it and isn’t confusing at all.

The sad truth is that UX has stopped referring to the quality attribute of a product or a set of specific skills and activities, and has become a value judgement. For some reason people think that the term UX means “better”, “more valuable” or “more important”. So by adding UX to your business or job title it somehow sets you apart as a better designer, a better developer or a better agency. That, or at least one that can charge more money. This is obviously nonsense and disrespectful to all the talented designers and developers out there. So when I see people adding the term UX to an otherwise perfectly descriptive job title, it makes me view them with a healthy dose of scepticism.

[Andy Budd spent 5 years as a designer and front end developer before transitioning to a dedicated UX designer; a role that he has had for over 8 years. During this transition period he would never have dreamed of calling himself a UX Developer. He hopes other developers feel the same way.]

Where Dave and I are joined by Chris Eppstein. Sponsored by LessAccounting and United Pixelworkers (who are offering a 10% discount on shirts with coupon code "shoptalk").

Direct Link to Article — Permalink

ShopTalk Episode 3 is a post from CSS-Tricks

You already know that inline styles are "bad practice." Inline styles aren't reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn't. There are some instances where inline styles make perfect sense. Perhaps you have an application where user's pick their favorite color, and then you set the background of the body to that. Using an inline style in that case is actually more efficient than external CSS, since it's specific to one user and one element.

Now let's say you want to animate to a value set in an inline style. Say you want to animate a progress bar. You start at zero, and need to go up to any arbitrary value. Perhaps a call to the server tells you how complete an upload is and you set the value from that.

In a post I did nearly a year ago, I lamented that you can't animate to an inline style. You can't declare a keyframe in inline styles and you don't know what final value to animate to in the external CSS. Alas I was wrong, as I didn't know about this bonafide little CSS trick.

<div class="progress-bar"> <div style="width: 75%">Upload is 75% complete.</div> </div>

Here's the trick: just omit the to or 100% declaration from the @keyframe:

@-webkit-keyframes progress-bar { 0% { width: 0; } } @-moz-keyframes progress-bar { 0% { width: 0; } }

Then you call the animation on the progress bar:

.progress-bar > div { -webkit-animation: progress-bar 2s; -moz-animation: progress-bar 2s; }

And just like that, the progress bar will animate itself up to the value set by the inline style.

View Demo

Here's a Dabblet if you wanna mess with it.

Special thanks to Michael Paryna who emailed me about this and got me to give it a try.

Animate to an Inline Style is a post from CSS-Tricks

W3C today published the report of the Workshop on Data and Services Integration, hosted on 20-21 October 2011 by MITRE in Bedford, Massachusetts, USA. This workshop provided a way for the community to meet and discuss some of the challenges... W3C Staff

  

UX practitioners, both consultants and in house, sometimes conduct research. Be it usability testing or user research with a generative goal, research requires planning. To make sure product managers, developers, marketers and executives (let’s call them stakeholders) act on UX research results, planning must be crystal clear, collaborative, fast and digestible. Long plans or no plans don’t work for people..

You must be able to boil a UX research plan down to one page. If you can’t or won’t, then you won’t get buy-in for the research and its results. This article addresses one key aspect of planning UX research: the one-page plan document. Before we get to that, we’ll briefly discuss the benefits of research planning and identify the audience of a research planning document.

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Origins of Type

The modern Roman alphabet, which is the basis for type as we know it was developed somewhere around the year 300, according to “A Typographic Workbook: A Primer to History, Techniques and Artistry” by Kate Clair and Cynthia Busic-Snyder. Lettering, even though it was all done by hand or chisel, featured some of the same characteristics we see in modern type styles and fonts, such as detailed capitals (modern serifs) and script writing. Producing letters was considered an art form and specialized skill and many of the pen strokes used to create the first alphabets are the same as those used in popular fonts.

It would be hundreds of years, and with the development of printing presses, before sans serif fonts came to life. William Caslon IV developed the first printed type of this style in 1816, according to “A Typographic Workbook.” A font family bears the Caslon name, a family that included several type pioneers.

Technology is also a factor and helped contribute to the millions of fonts on the market today. With digital typesetting, almost anyone can develop and sell a font. But some of the most popular, as well known fonts bear the names of the fathers of modern type – John Baskerville, Giambattista Bodoni, Adrian Frutiger and Hermann Zapf, among many others.

A Lesson in Type Styles

Of the thousands of font choices out there all fall into one of five basic typeface categories – Fraktur, serif (which contains several subcategories), sans serif, script or cursive and novelty, according to “Typography and Design for Newspapers,” by Rolf E. Rehe, who earned a Lifetime Achievement Award for his contributions to typography by the Society for News Design. All of the fonts in each of these categories share a set of characteristics that make them distinguishable. The way fonts are mixed within categories can set the tone for a project.

Fraktur type

Fraktur typefaces are also categorized as those with names containing “Old English” or “Black Letter.” These typefaces contain letters that were originally made using multiple strokes with pen and paper. Today, these typefaces are not widely used but are still often seen in the nameplates of newspapers such as the Detroit Free Press. Fraktur typefaces can be difficult to read in multiple lines of text or at smaller sizes. They are best used for short, large phrases.

Serifs

Serif fonts are some of the most commonly used typefaces in print publishing. Most books and newspapers use serif fonts as the primary body copy. There are four distinct types of serif fonts – old style, modern, transitional and square serif. Old style serifs are the least commonly used in text-heavy projects; the letters tend to be quite round and letters do not connect between strokes. Letters also have rather pointed serifs. Garamond is a popular example.

Modern serifs are used commonly in big type. The letters are distinguished by contrasting thick and thin strokes in letter elements. Fonts in the Bodoni family exemplify this style.

The transitional serif subcategory combines attributes of the old style and modern groups. Fonts have some contrast between thick and thin strokes and feature the more rounded shape with pointed serifs that are common with old style typefaces. Times New Roman is a common example of this type style.

Finally, square serifs have a uniform shape and stroke weight; fonts can be rounded or feature a tall, condensed shape. Each serif has a square edge that closes in 90-degree angles. Rockwell is a common square serif font.

Sans serifs

The independent film “Helvetica” brought one of the most popular sans serif fonts into the eye of the non-graphic design public in a major way as a winner at several film festivals in 2007. For the first time people outside the graphic design community were looking at and really talking about a font. This is an example of a sans serif typeface, which features uniform stroke width and weight in each letter, and no serifs. This typeface style is one of the most widely used in web design for body copy and is becoming more common in print publishing.

Scripts, Cursive and Novelty

Script or cursive and novelty font types all fall into the for-seldom-use category. The script or cursive styles are based on handwriting and feature lots of extras with each letter. These fonts also tend to have a very distinct left or right slant. Script type styles also allow for each letter to connect to others; cursive does not. Novelty fonts are all those that fall outside the traditional categories and sometimes feature cartoonish or artistic elements. All of these font styles are best used in projects without mass blocks of text.

Mix Fonts Successfully

Mixing fonts can be an essential part of any project. Using just one font exclusively can work for some projects but much of your work likely requires emphasis that is best achieved through the use of varying type styles.

Start With the Body

Choose your main body font first and select other complementary typefaces. You don’t want to build an entire project around a headline. Determine the size of your primary font and whether you prefer serif or sans serif. Try to select one or two fonts that add punch but be sure to limit your palette.

Mixing Serifs

It is acceptable to mix serif and sans serif fonts and can actually give your project a sleeker feel. Using fonts that have very different styles and weights can put a great deal of emphasis on the less-used font. If you go with a serif for the body copy, add emphasis with sans serif headers or subheads. For smaller projects, such as a business card, experiment with using a novelty font for your name or company name and use a simple sans serif font for everything else. Douglas Bonneville, author of “The Big Book of Font Combinations” developed a chart featuring 19 font combinations, pairing a serif and sans serif styles. The chart includes common fonts and is a great starting point in developing a font palette for almost any project. Type designer Alessandro Segalini has a similar cheat sheet that goes one step further, and ranks fonts based on compatibility.

Be Cautious

Add pop without going overboard and be careful when using multiple fonts. Take a step back from your project and watch where the eye goes. Watch the curvature and slant of letters to ensure harmony between type styles. It can cause an unintentional chaos when you mix fonts that slant in different directions. Also take width into consideration; combine fonts with similar strokes, such as a palette of thin fonts with a headline style that uses a strong solid serif.

Watch Your X-Heights

When mixing fonts, opt for font families where the letters have similar x-heights, ascender and descender lengths and overall letter width. Ensuring similar letter attributes will help create harmony among the fonts and make it easier to use less complicated leading formulas and keeps allows different typefaces to sill work with your hyphenation and justification rules within certain set widths. The similar letter attributes also allow readers to move through copy without “noticing” a distinct font change.

Think About Scale

Size and scale can make or break your font choices. Serif and sans serif fonts work well at almost any size and can carry large blocks of text. Headers and headlines should be larger than body fonts, but be careful not to overpower the main copy. Color adds emphasis as well; adding just a pop of a bright or unusual color can make a font look larger than it is, while grays and muted tones can make fonts appear smaller.

Be Wary of Certain Combinations

Avoid selecting similar fonts; using two typefaces that mirror each seldom works and can create visual imbalance. Note the combinations of Time New Roman paired with Garamond and Trebuchet and Verdana above. The slight differences between the fonts can be confusing to the eye and distract from your design. For slight variances, opt to use items such as bold, italics and underlines within a font family to achieve subtle differences.

Keep It Readable

Keep text readable. Avoid mixing fonts within the body copy or using too many fonts. When selecting a font palette, determine what each font should do and stick to those rules. Don’t replicate the font from your nameplate in the body copy; keep that font unique. Use the body font for only body copy and not for headlines and subheads. When working with web-based projects ensure that fonts are web-safe and will render properly using different Internet browsers.

Watch Those Specialty Fonts

Use specialty fonts sparingly. Gimmicks only work in small quantities. Fraktur, script and novelty type styles can get lost and become unreadable if used too small or for chunks of text. These font styles also work best when they stand alone or are serving as art objects.

Conclusion

Selecting a font palette for any project can be both challenging and rewarding. Remember to keep the basics in mind when choosing typefaces – serif and sans serif fonts work well for most applications and in a variety of sizes, other type styles should be used for specific and small bits of type only.

The key is for your print or web project to have pop and be easy to read and understand. Experiment with a variety of font options and listen to your instincts when making a final selection. Sometimes the simple choice is the best one. More is not always better when selecting a set of fonts.

Image Sources: jimnista, cliff1006 and gromgull.

Three new links: "HTML5 Accessibility Chops - title Attribute Use and Abuse", "Pronunciation - Accessibility for Web Writers, part 16", and "5 Infographics on Web Accessibility for Designers".

One new link: "CSS1K".

One new link: "Comparison of Usability Testing Methods".

Four new links: "Official RNIB Accessibility Hackathon", "Design it. Build it. (DIBI) Conference", "W4A 2012", and "Future Insights Live".

One new link: "8 Tips for a Sane IA".

Two new links: "Viewports All the Way Down..." and "Web Designers Should Just Become Designers - an Interview With Don Norman".