Typography Rules Every Web Designer Should Know

We are going to skip the usual introduction of the importance of good web design and cut right to the typography rules.

No matter how much content you have, any visitor will come to your site to be more informed about what you offer mainly through reading the text. The key is in the details and they can either make your text good or bad. That’s why every designer should focus (apart from having a good composition) on certain typography rules.

Follow on LinkedIn

Rules, rules, rules, always with new rules.

The Fundamentals of Typography

position) on certain typography rules.

Typography is pretty complex. So, first, familiarize yourself with the basic principles of typography design. The fundamental design elements of typography include spacing, typeface, color palette, contrast, hierarchy, consistency, and alignment.

Take your time to learn about these fundamentals – the different typefaces, the specific vocabulary, and the measurements involved and don’t be afraid to practice and experiment with them within your design process.

Readability

To be perfectly frank, you can forget about the copy-paste method from the file. Don’t be that kind of designer that thinks that’s his only duty — to copy the text and paste it. If you carefully think about it and integrate the text into the web you can make something that will be visually stunning to any visitor of your site, hence creating an excellent user experience.

Having certain punctuation marks like a comma, full stop or a dash can make your text visually more readable and more attractive to the eye. Your text should “breathe”. Also, make sure that every letter has space, but it makes sure it’s not too spacey.

So you should take care about kerning, leading, and tracking.

Leading – is the vertical space between each text line. It’s a very important aspect of web design that determines how to vertically sort the text in columns. For content that has many lines of text, like a blog, this rule is of crucial importance.

Kerning – is another way of making space between characters. If the letters are too close to one another they won’t be readable and if they are too far apart they are not going to bring satisfaction to the reader. It’s important to find balance.

Tracking – tracking often gets mixed up with kerning, but they are different. Tracking represents spacing in the whole world. Once you’ve determined the space between letters, you can use tracking to move space between all the letters at once.

Avoid Lorem Ipsum

If your text is not thoroughly planned and doesn’t have real content, it will be hard to make something interesting out of it.

Every site depends on the text. And it’s important to have it in order to point out all the important stuff. You can’t do that if you are using only Lorem Ipsum. Demand from your clients to provide you with text on time, because that is going to ease your process of designing something interesting and visually appealing.

Lorem Ipsum doesn’t have many similarities with the real text. Any change you make will change your design and the design of elements surrounding it.

Hierarchy of Elements

The readers should be provided with the flow of the text. Where it starts, continues, and ends. Following the typography rules, titles and subtitles should be visually larger (the title should be larger than the subtitle). This means that the size of typography is one of the most important things when it comes to the hierarchy of elements.

Also, you should always consider pointing out important words or parts of the text by using different styles like — bold or italic. This will definitely enrich your text.

Typography Rules – Macro & Micro Typography

Macro typography represents the structure of your typography; how it’s going to be placed on your web, how it will appear as a part of your complete design, and how it’s going to appear aesthetically when you take a look at a complete block of text.

Micro typography is absolutely necessary when it comes to merging the block of text. Its main concern is the detail of spaces that determine whether the words will be easily readable or not.

As you can see the macro and micro typography are an inseparable whole. One is there to help you align everything on your page and make it look attractive to the eye, the other is there to take care of all the small details. Also choosing the right, font, color and style is what makes this the whole package.

Typography Color

When a web designer is working with typography design in color, thinking about the shades of a particular color is necessary. You have to be able to predict whether a certain shade will be visible on different backgrounds in order for visitors to see everything clearly.

The easiest way to make sure the visitor will stay on your site and read everything till the end is by paying close attention to the color scheme of your typography. For once it should be very different from the background color.

You might have noticed that the most common color combinations are black and white and black and yellow because they are drastically different and in contrast.

Follow on LinkedIn

There are some very well-known color combinations like dark shades of blue in combination with shades of light pink backgrounds. But imagine if the text was in light pink and the background was dark blue. People wouldn’t feel that comfortable while reading and looking at the screen.

Wouldn’t you agree with these typography rules?

Get Familiar With CSS

If you are a web designer you simply must get familiar with some of the basics of programming, HTML, and CSS that are most important for your work.

Knowing CSS will help you stay consistent and everything in its right place when it comes to optimizing typography for a page. It will also give you some advantages because if you break some norms you are going to be able to create an effective design.

You should set the right grid but not following the rules can help you make something original. And CSS will help pack everything into a complete whole.

Forget About Center Alignment

Aligning your text to be in the center is so outdated, that you should definitely avoid doing that. Although it is for aligning titles.

Just like we all know that the font Comic Sans is forbidden in graphic design, the Comic Sans of web design is center alignment, so just don’t do it.

The most common type of alignment is left alignment as it follows readers’ natural reading tendencies. Other forms of alignment can be incongruous if used frequently and without purpose.

Use Grids

Besides alignment, another way to adjust your content spatially is to include grids in your design. A design grid makes sure everything on your page is added in relation to something else, leading to visual harmony and giving coherence to your piece.

You don’t have to use design grids for every piece, though. You can bypass them for simple details. However, this tool can help you align everything well when adding intricacies to your design.

Punctuation Marks & Other Symbols

A lot of sites have symbols that Browsers usually don’t recognize. That’s because the majority of texts are usually written in Word or other similar programs.

One of the worst problems can be caused by Smart quotes where the program automatically changes this symbol ~ to this -. This can present a problem if you are copying a text in a foreign language because accents can get lost (ex. Spanish). So we can’t stress enough how important it is to pay close attention when applying a text.

With that in mind make sure your text is aligned with your design and if you want some fancy symbols use HTML entities. HTML entities — can help authors get a more intuitive approach to special symbols and it offers a bunch of referential symbols.

Plan Ahead and Follow the Typography Rules

In order for your text to be the focal point of visitors, you should think about the size of the font. You should plan ahead your elements in order to get enough space for everything.

The optimal size of the font would be 10 pt because it’s the most readable size, and everything below 8 pt will be problematic for readers to see. Everything above 12 pt should be left for titles or very important information.

On the other hand, you should always have your audience in mind. If your audience consists mainly of elderly people you should consider making your font size bigger.

All of these factors should be taken into consideration and that is why planning ahead is so important. Thoroughly inspect every element of your design and make it work for you.

The Significance of White Space

White space is a tool used to add focus and visual interest to your piece. Effective use of white space can add value to your design by balancing out the text. You can also use it to draw attention to a particular part of your piece. Adding white space around essential elements of your content helps emphasize them.

Achieve all your digital marketing goals with us.

Please fill out this short survey to help us get to know you and your business better.

---

PlayMedia is the digital marketing agency that will take you to the top, and help you grow your business through dedication, transparency, and a unique, highly individual approach.

Mladen Maksic CEO
Play Media

Stick to Grammar Rules

Inconsistencies in punctuation and grammar can significantly reduce the value of your piece. The right use of punctuation can differentiate between professional and amateur content. The best designers pay attention to details such as double spaces, punctuation marks, improper capitalization, etc.

Sans Serif Fonts

Typography rules in its basics said that sans serif fonts are the most optimal fonts for easier readability. Longer texts always look better if they are written in these fonts. Especially if they are written in fonts like Verdana which is specifically designed for desktop typography. Titles and other smaller blocks can be written in serif fonts and it will bring an optimal dynamic between the two.

These are some of the best combinations of Sans- Serif & Serif fonts:

• Helvetica Neue – Garamond
• Myriad – Caslon
• Futura bold – Souvenir
• Super Grotesk – Minion Pro
• Montserrat – Courier New
• Rockwell Standard – Lora
• Century Gothic – PT Serif
• Raleway – Lusitana
• Alternate Gothic – Georgia
• Source Sans Pro – Times New Roman

Although people tend to avoid certain fonts, combining two fonts can bring out something new and attractive to the eye.

Conclusion

Hopefully, this post has given you an insight into why typography in general and typography rules are so important. Your site should first and foremost be functional, but it should also be aesthetically pleasing as well. If you plan ahead, learn some basics of HTML and CSS, and avoid some common mistakes, your website can get a completely new and original look. And isn’t that what we are all looking for?

Follow on LinkedIn

Check our blog and learn more about why WordPress is the best hosting.