typography rules

10 Typography Rules to Conquer In Web Design

Feature Image Source: Freepik

How can you play a game without the rules?

In Creative Anarchy, Denise Bosler elucidates rules are pillars of great design, but a designer must know when to follow them and when to break them. So don’t suck the fun out of designing dear creative rebellions by being clueless. Just the other day I played Call of Duty with my nephew who knew the key strategies to win, and after dying almost twenty times I realized “Man, I wish I knew the tricks.” Same goes for typography – if you’re unaware about what works and what doesn’t, you’ll probably end up killing your website design.

Sarah Hyndman quote

What Is Typography?

Graphic designer Sarah Hyndman shares that although a layman would run away from a designer’s typography jargon, everyone consumes type every day. She suggests that all those “involved in the future of communication and technology understand the power of type”. Although “fonts turn words into stories” as Hyndman puts it; typography isn’t only about knowing how to choose the right font.

I’d say typography is a technique whereby designers can arrange numbers, letters and words on a website. It is important that your website is synchronized, user-friendly and directional.

3 things your website design must have


Even if you use complementary fonts such as serif with san serif, you can add harmony to your web page with the placement of type on the canvas. Another way to achieve concord in web design is by using graphic design principles such as alignment, proportion and white space when working with type.


Typography should aid visitors rather than make them bounce off. Everything from font selection to micro-typography methods, assist designers to create a well-crafted website that is beautiful and readable. Anything in design is functional when it can be used for the purpose it was created or added to your creation for.


When new visitors come to your web site, they should instantly know where to go without a manual. With typography alone, they should be able to direct themselves around the homepage to your portfolio, blog or sales pages. In fact, with hierarchy through header tags you can guide viewers and readers in the direction you want them to walk their eyes on your design.

Pillars of website design
Your basic purpose is to make your website attractive and easy-to-understand. In the book Balanced Website Design: Optimizing Aesthetics, Usability and Purpose Lawrence and Tavakol explain the three “pillars of website design” – they are usability, purpose and aesthetics. Depending on the business, design technologies and tools plus its audience, these aspects may vary in quality.

Typography In Web Design

Although we were introduced to the idea and practice of responsive and fluid typography, it’s pivotal to know the basic strategies regarding the ideation, execution and presentation of written content on your web design. Whether you’re a newbie or an entrepreneur looking to make a website, this video highlights 10 rules that will surely enhance the user-experience and user-interface of your site. While HTML allows web designers to structure the type on a web page with assorted tags for alignment and emphasis, CSS helps them in the presentation of content. But there’s more to typography than the language of web. And while you should know the contemporary typography trends, you must also know these building blocks of typography on which several successful websites stand.

Now that you know the rules of typography in web design, will you use them or break them?

Vectors Source: Freepik ; iStock.com

A visual design blogger passionate about interactive, experiential and captivating techniques designers, marketers and brands use to accentuate messages, tell stories, and spread awareness. I’m a visual addict like Alice, who finds books (or anything) without pictures boring! My writings focus on graphic and web design, branding, and visual marketing. My hobbies are to write poems, draw zentangles, read mysteries, and watch YouTube videos.

4 thoughts on “10 Typography Rules to Conquer In Web Design

  1. I had a great interest to know about typography and finally , I came to know from your article. The article was very helpful for me. Thanks for the great informative post.

Leave a Reply