request a quote

Introduction of Typography in Web Design

I

In communication with the audience or users, language plays an important role. We can see that 95% of the whole talk appears as a text. The arranging and styling of text on the entire page is commonly known as typography. Every website has some information that is in form of text. The typography shows how the text appears and looks to the reader on the screen.

 

Planning your typography

 

Before diving into typography, you must know some basics of it.

 

  • READABILITY

 

Before choosing a typeface, you must have the difference between legibility (clarity) and readability (simplicity). In this case, a typeface that is easily accessible at one size becomes difficult to understand at another size. That’s y choose the contrast and font that will be readable to show your content. 

 

  • SCALE

 

While writing, you have to bold fonts, add titles, and underline headings. In this typeface, scales matter. Set a scale in your mind that you have to use so that your headings, as well as text, are readable. Sometimes headings are readable, while text sizes are too small to be read with the naked eye. 

 

  • Tone and mood

 

When you are writing content, you should be careful about the mood of the site. Either it will be serious or joyful. Either it is casual or formal. When you are determined by the specific typeface, then you eliminate many typefaces. E.g. you can’t use Baskerville for a modern playful site.

 

Typeface classification

 

There are 5 basic classifications of typefaces.

  1. Serif 
  2. Sans serif
  3. Script
  4. Mono spaced
  5. Display

Serif and sans serif typeface are used for headlines, titles, and logos. Script and display typefaces are used for headings. Mono spaced is used for the body as well as headline and is used on a typewriter. 

 

Tips for typography

 

  • Keep minimum no of fonts:

 

As multiple fonts have a bad impact on the website. It looks unstructured and unprofessional. The combination of GEORGIA and VERDANA looks homogenous pairing.

 

  • Limit line length:

 

Set the characters in a line so that there should be a sequence in the whole content that is known the width of your text. For mobile, 30 to 40 characters are commonly used. By this technique, the whole article is readable.

 

  • Choose a typeface:

 

Users can access your site through various interferences. Thus you have to select a typeface that works in multiple sizes and weights to maintain readability. Your typeface should be easily accessible in narrow or small sizes.

 

  • Space

 

Don’t minimize space in lines. Have an equal distance between lines as much narrow lines are not readable and very large spaced lines are out of the page. The skill of using a balanced space keeps your writing updated and impressive.

 

  • Color contrast

 

Don’t use the same color or same contrast for text or background. The text should be in a visible form that can be easily scanned. If you have a background black then text in the black color does not match. It will not be visible. Thus choose the color contrast wisely. 

 

  • Avoid red and green color

 

Don’t use red and green colors excessively as the red color shows the text that is wrong or has some grammatical mistakes. The red and green color is the most common form of color in color blindness.

 

  • Blinking text

 

Avoid using blinking or highlighting texts. Some GIFS are also distracting attention and put a bad impact on users. These are also annoying some users.

 

 Conclusion:

Bad typography distracts the audience. For making an engaging website, take help from Proficient Web Designers Pakistan and make your content easy to access for every single visitor. In today’s article, we take a view on web designing typography. I hope you enjoyed this reading and thinking to design your website is a great way

return to top
Services
Products
Portpolio
Trainings
More
Services
Welcome to SparkInfosys
Products
Welcome to SparkInfosys
Portfolio
Welcome to SparkInfosys
Trainings
Welcome to SparkInfosys
Welcome to SparkInfosys
Welcome to SparkInfosys