This post is about Typography Rules that every web designer should not only know in detail. But these rules must be among their topmost priorities if they are willing to survive in the myriad of web designers these days.
WHY? You’ll know shortly.
But, first, let’s make it clear what typography is? Typography has long ago been considered as one of the fundamental steps of web designing. In the literal sense of the word, Typography is basically the style and appearance of printed matter. Or to make things more complex yet technical Typography is the art or procedure of arranging type or processing data and using that printed material to visually appeal visitors.
Yes! the question that just popped into your mind about the incorporation of images, videos, sounds even some bells and whistles (if you’re crazy enough) to make your website look aesthetically appealing is also on point. But when someone visits your website, it’s mostly to get information about the product you are presenting. The ‘product’ can be anything in the world but the visitor’s perspective to judge you is always same. And i.e., “What the owner has to SAY about the product?” (properties, features, other details) Now, if you want that text, which is obviously precise (a page long or two), to appeal visitors both visually and functionally than you need to learn the art of typography.
Typography, as mentioned above is an art which regardless of the saying “art needs no boundaries” is strictly bounded by some rules. In fact, the more wisely you use the rules the more you are to get the best design. Now, without further delay, we’ll skip to the rules right away.
Check out these 10 rules (ranging from typefaces to layout, grid, color scheme, design theme and so on) that every designer should keep in mind.
Stick to basics at first:
This is particularly for the newbies who don’t really know the nitty gritty of Typography. And neglect its technicalities. Typography is much more than a straightforward practice of web development. Neither should it be straightforward as it’s the fusion of art and science. And even if you want to make a difference or inclusion of some customized features you need to first master the basics of this art.
A typeface is to be selected at first. Which includes identification of many different things like the specification of vocabulary, accurate measurements, and central selections of alignments, fonts and color palettes. These selections are actually the medium of your design. As they decide whether you design is good, bad or best. So before you claim your expertise in the field make sure you are well aware of the basics.
Set Priorities:
Priorities need to be set right after you are assigned to the designing. Obviously, your topmost priority is already set and i.e., an easily readable and understandable text. Now your second priority should be to maintain balance in your designing. However, your selection may vary from color contrasts, Font combinations, and other designing essentials but if they are contrasting in themselves then you might not get a favorable response. For example, Small fonts on dark contrast with weird alignments would only irritate the reader.
Another important thing that should be kept in mind or prioritize already is the consistency of the font style and size throughout your design. A lot of designers recommend that 2-3 fonts should be a maximum in most cases to avoid overcomplicating the design.
Don’t let Grammer Nazi attack your art:
Grammer is at times a bit tricky which can, not only trap you but also humiliate you if you are not cautious enough. Mistakes like double spacing, ampersands, misplaced hyphens, dashes, and other punctuation errors provide ‘lack of professionalism’ image to the customers.
Well, what you can do here is take notes from various guidelines for design-specific sentence structure because grammar mistakes may seem trivial to you but professionals think otherwise. Moreover, it is a subtle but powerful tool that can take your designs to a whole new level of professionality and attention to detail.
Align Wisely:
Right Alignment is directly related to Readability. So, always choose the correct alignment. There are four different kinds of alignment: left aligned, right aligned, centered and justified.
Most commonly used is Left alignment as the left edge of writing keeps it simple and easy to follow. It’s also been said for the help of newbies that when in doubt choose left aligned.
Right aligned, first, is not easy to follow and is definitely not for long excerpts. This is mostly used for decorative purposes within branding or small pieces of type in certain publications.
Centered text is also one of the widely used but its also not for larger bodies because the un-tidy aligned edge makes it uncomfortable for the readers to follow so you better restrict it to invites, posters, branding etc and not take it along for long texts.
Then there is one more that is the justified type. Justified type is almost one of the best module type as it seems to give clean right and left edge to writing and we mostly see this in novels but its deceptive at times. It has its issues with word and letter spacings. But its mostly a win-win situation.
Keep the smarter you along:
Balance, pairing, and adjustment among the fonts and color scheme is very important. People usually try to put up everything that’s cool or inspires them in a single typeface which is terrible. In order to give an aesthetically pleasing sense to your work, you need to choose elements smartly. You may even choose a minimum of fonts and still, your products can give mesmerizing effect rather than the one flooding with different fonts and colors. Not to mention, multiple fonts can confuse the audience on which elements of the design are the most important.
Maximum of three fonts i.e., one for the title, one for the text, and one for subheading is considered enough. Well, you definitely can get an exception of a couple of fonts if you have a long text. Otherwise the minimum it is, the cleaner your text is, and the smarter you are.
Kerning is important:
Kerning is usually described as the adjustment of space between characters to create a harmonious pairing. During my research, I came across a phrase that “kerning doesn’t really seem important but it is…” Excuse me! I beg to differ because I most definitely think that kerning is one hell of an important thing since the very beginning. As it spoils the overall look and its easily noticeable. Bad kerning i.e., too tight or too lose spacing among characters never goes unnoticeable. And even if the kerning blunders are subtle enough to go unnoticed in long sentences, they are sure to make big difference in logos, and titles.
So, good kerning i.e., equal and balanced spacing among characters is important for a good typeface.
Legibility over aesthetics:
Contrast:
The contrast between background and text should be contrasting and not be corresponding. For example, a light colored text over light background will not work well in comparison to a sharp colored text over the light colored background. Your color palette should be enhancing yet satisfying because according to color theory all the colors in the primary wheel has certain effects on consumers.
Capital letters:
Use of capital letters gives an unpolite sense of communication. Plus it also adds up to difficulty in following as normally our eyes are set to lowercase that it becomes both uneasy and unpolite.
Font vs color:
We are well aware by now that how important contrasting and fonts are to represent a text. But these two have to coordinate to put up a good show. Dark contrast with big fonts give a horrific image (OK! a bit exaggerating) but its a big No-No for sure. For a striking design, maybe you can go for some light colored background with some Calibri (body) or New Times Roman or Segoe Script etc without a color discord.
Type size:
Keep the audience in mind:
What should be the first thing coming to your mind when you are assigned a design? It should, NO! actually, it must be that Who you are designing for? Who is your targeted audience? Then you need to keep the audience in mind throughout your process. We all know there are certain colors if not fonts associated with age levels and businesses.
For example, bright colors are for children. Shocking colors are for the chirpy ones. And for the sophisticated ones we have the greyish tones, black, and white etc. If you keep this in mind you’ll never face the complaint of the irrelevance of theme and the audience.
NOTE: If by any mistake you mismatched the audience with the theme, you’ll fail miserably in not only conveying your message but also fail to attract or give good aesthetics to the audience.
Widows and Orphans debate:
There’s this big debate going on for widows and orphans. So let’s address it as well or we’ll feel left out. Just to introduce you to this lot (in case you don’t know already) here’s what Drew de Soto’s explanation from ‘Know Your Onions: Graphic Design has to say, “A widow is a term for a line of text that belongs to a paragraph and has moved over to the next column. An orphan is similar, but a single word on its own on a line, poor little thing.”
This sends signals of amateurish writing. And if caught earlier should be edited immediately by changing the line lengths or column sizes.
Be a Trendsetter:
The thing with trends is no matter how much we fall for them for a particular period they eventually fade out. Everything that’s related to that trend feels outdated and we often feel like throwing them away to make space for the new ones. Same goes for designs where trends come and go. What professionality and maturity demand from us is to not fall for something that’ll soon be replaced by something else. Do take hints and ideas by trends but value your inner designer rather than replicating the trending one.
Importance of Purposeful Hierarchy:
Hierarchy, to put it simply, is a technique used to put up such elements together that would not only make good visual sense. But are also quick to skim (prominence). Having cool, purposeful, visual hierarchy with really simple advancements in color, length, and size etc. enhances your message. So, in order to make good sense of what you mean, purposeful hierarchy plays an important role. And one should have a proper sense of hierarchy before setting their best foot forward in typography.
Summing it all, Typography as said above is an art. And as we all know art needs constant polishing, Typography is no exception. So, you need constant knowledge and update of all new and old Typography Rules to flow into the stream with dignity. And what else you need to do is follow these rules until and unless you got to break one and create your own. As it’s rightly said by some anonymous person: The time you completely understand a design rule is a time when you have the permission and authority to break it. Which from my perspective would be one big deal.
For more such information and related articles please visit Webful Creations.