10 Typography Rules in Web Design for Designers


181
1.4k shares, 181 points
10 Rules of Typography in Web Design

10 Typography Rules in Web Design: Either you are a web designer or an entrepreneur, If you are looking to make a website for your business, This video is for you. In this video Logo Design Guru has covered the main 10 rules to help you structure your written content on each web page.

Don’t Miss:

10 Rules of Typography in Web Design:

1. Dump Lorem Ipsum

Lorem Ipsum is simply dummy text for web design templates and in the 2nd draft for client.

Dump Lorem Ipsum-Rules of Typography in Web Design

2. Use HTML Coding

Use HTML coding for content hierarchy:

  • <h1> has the highest rank and serves as the heading for the entire page. There should be exactly one <h1> tag per page, and since it represents the page as a whole its text is often (but not always) the same as the <title> tag in the document <head>.
  • <h2> has the 2nd-highest rank and should be used to denote the various sections of your page. Unlike the <h1> tag, there can be many <h2> tags in the same page (because there can be many sections within a page).
  • <h3> has the 3rd-highest rank and can be used to denote sub-sections within page sections. Note that since it represents a sub-section within a page section, an h3 should never be used if it didn’t have an h2 before it (because it doesn’t make sense to have a sub-section without a “parent” section).
  • <h4> has the 4th-highest rank and can be used to divide level 3 sections (denoted by h3) into smaller groups. An h4 should never be used if it didn’t have an h3 before it (for example, you should not “skip” down from an h2 to an h4 without there being an h3 in between).
  • <h5> and <h6> have the lowest rank, and are very rarely used. If you find yourself with this many levels of content, it probably means there is too much going on for one page. You should consider slitting up the content into several pages to make it easier to navigate.

Use HTML Coding-Rules of Typography in Web Design

3. Do the Right Micro Typography

Do the “Right” micro typography kerning, tracking an leading to easy reading.

  • Kerning which refers to the way specific letter pairs fit together
  • Letter Spacing or Tracking both of which mean spacing applied to all letters
  • Word Spacing is exactly what it says, the spacing between whole words
  • Font Choice can help or hinder attempts at clear communication
  • Typographic Errors can sabotage even the best designs

Don’t Miss:  7 Principles of Typographic Contrast

Do the Right Micro Typography-Rules of Typography in Web Design

4. Improve The Presentation

Improve the presentation of website’s typography with CSS – Make your website standout with customised typography.

Improve The Presentation-Rules of Typography in Web Design

5. Use Responsive Typography

Use responsive typography for responsive web design.

Use Responsive Typography-Rules of Typography in Web Design

FULL VIDEO: 10 Rules of Typography in Web Design:

Via: Logo Design Guru

 

We hope you like this post “10 Rules of Typography in Web Design” and learned from it.


Choose A Format
Story
Formatted Text with Embeds and Visuals
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Open List
Submit your own item and vote up for the best submission
Poll
Voting to make decisions or determine opinions
Meme
Upload your own images to make custom memes