4 Essential Elementary Typography Tips for Beginners

4 Essential Elementary Typography Tips for Beginners

It is often said that letters are boring and text is static. Both neither tickle nor moves other senses apart from our eyes. But how to renovate the letters and the texts to make them interesting? As a beginner, does it sound complicated? Well, let me inform that, you can easily convert a boring text and letters to your advantage and achieve your goal. But how will you make these texts, mainly used to convey detail message use for the design function? Is that possible? Yes, it is possible through typography.

You must be well acquainted with the term typography. It is the technique to put texts and types in an orderly manner to make it visible, readable and appealing. In short, it is the art of graphically working with texts. So without wasting much time, let me help you with this art of playing with the texts and letters while designing websites.

Let us first begin with:

Creating Photoshop typographies:

To understand the whole concept you need to learn about a few Type tools in Photoshop that will help you to customize the types according to your choice.

Vertical Type tool:

This sub tool allows you to type text from top to bottom.

Horizontal Type tool:

This sub tool allows you to type from left to write.

Vertical mask tool:

This sub tool allows you to use your Type in picture background and enable you to type vertically in a mask.

Horizontal mask tool:

It is the same as the vertical tool mask except for the orientation of the type.

Therefore, the liberty to decide whether your texts will expand or shrink down horizontally or vertically will depend on the horizontal and vertical setting.

The legibility of letter and word spacing and line heights:

To keep your design relevant, you need to be mindful regarding the letter and work spacing. The white spacing between the lines of the type plays an important role in the readability of the web designing especially when there is a large chunk of text for the users to read.

Similarly, the spacing between the lines of text is also important. As far as spacing adjustment is concerned your type should use a line-height to about 140% for maximum readability.

The fount of Fonts:

There are 7 font categories in designing. Take a look at them:

Modern style:

They are produced digitally and do not have root traces on print fonts. They are commonly used for movies, events, shows and posters.

Example- Avengance, Bauhaus 93

Old style:

They are the parent fonts that are popularly known for their serifs with flag-like ending. They are composed of thin and thick parts and often used in designs which require formality, simplicity and credibility such as books and newspaper.

Example- Book Antiqua, Times New Roman


They are based on pictures and symbols and used in logos and messages.

Example- symbol


They are thematic in nature and often used to imply any specific event or occasion. These fonts are often used in branding.

Example- dripping marker


They have ornaments and curves and are calligraphic in nature. They are commonly used in wedding and other formal occasion.


Sans serif:

They have no flag like ends and are used in the main texts for print output and web texts.

Example- Calibri


They are wide fonts with slab serif- a thick horizontal ending positioned on the letters.

Example- Blackoak Std

Fonts provide you flexibility in your design. To present your writing in the best way possible, you need to choose the right font. However, the type of fonts chosen depends on the mood of the content and the design. Whatever fonts you may choose, make sure that the texts are readable.

The power of colors:

A website is identified by its presentation. It has been observed that the majority of the people remember a website by its color. Here is a list of a few colors you can apply while designing a website:

Use RED when you want to highlight any urgency

Used GREEN while highlighting relaxation

Use YELLOW when you intend to grab eye’s attention

Use BLUE to gain the trust of the site visitor

Use BLACK to highlight luxury

Use ORANGE for call to action or call to move

However, to keep the design simple use

Light background with dark text

Dark background with light text

Color contrast plays an important role to make your text and other elements in your site prominent.

Is your typography interactive?

There are few other elements that impact and interact with the Type on the web. To ensure that the typographical elements play nicely with the rest of the web group, you need to check with certain elements such as padding, navigation and margin. Therefore, if you design without considering the important elements that will successfully engage your typography than you run the risk of compromising its effectiveness.

There should be enough room for your typography to breathe and speak.

To implement all the important typographical factors, use the following tools for making your life as a designer easier. Utilizing the following tools will help you to stay ahead of the game-

Font stack builder is used to build CSS font-family

Typester, an online application for comparing fonts for the screen

EM calculator helps in making scalable and manageable CSS design

HTML Ipsum is used to type testing needs and suite your entire place holding.

Typography is everywhere in the web. Incorporating these basic elements will help you to engage your visitors, allow them to interact with your website and most importantly, will earn you appreciation as a beginner.…