To Top

Fundamentals Of Typography

Typography is the basic fundamental of any design. It helps elaborate to comprehend the legacy after all the crafts; concurrently, this is the key tool society on the whole use to convey the info further. It’s beyond our thought to imagine a blank news paper, magazine, a webpage or TV with no written content even. If you haven’t heard the name earlier, this write up meant for you to elaborate what is Typography? You simply explain typography, a subject that elevate obsession and can turn out to be a consuming fascination. In the lines below we discuss the fundamentals of Typography in detail.

What is Typography?

By and large, Typography from a descriptive nature is a collection of Typos, but it can be a different matter depending on “whom?” and “why?” you ask this. In my consideration it’s a deeply manifested over all themes of a design, its message and tone. You can find it everywhere on the canvas/paper either it is a layout, color choice or its total arrangement of a work of art.

Your selection of typefaces with their arrangement and style help greatly to elaborate your masterpiece in character along with setting its pace as well. It helps to acquire a copyright cover of the design along with it helps a reader to understand the message of the design with clarification as well. It can be effortlessly observed the different outcomes of typography with using same words in dissimilar arrangements.

The difference

That’s why we can effortlessly say that the plane of design theme makes the typography a sturdy tool of its creator’s tool kit. In the lines below we discuss the different typography expressions and notions.


A line of characters bear at minimum five lines you can use them accordingly to express your creativity levels. These meant to explaining capital letters, lower case, ascenders and descenders, the terms we elaborate in this article onwards. Below are described five lines:

Base Line: it’s a most acknowledged line in all designing circles; here you place your text in variety of styles.

Cap Height/Cap Line: This blots the Capital Letters.

Ascender Height /Top Line: it helps to indicate the finish/touch line of letters such as k and h on the top. Surprisingly, on occasions you can observe it somewhat elevated than the capital line.

X-Height/Middle line: this line is meant to show the elevation of lower case letters apart from both ascenders and descenders. It usually measured by elevation of the letter x.

Descender or Beardline: it’s meant to measure the pieces of fonts that finish below the baseline, for example letter p and y.

Leading or Line-Height in CSS: it used to describe the gap between the lines of content, it] can be measured by acquiring space among two base lines. For CSS purpose it called Line-Height.
It’s a sturdy source; it may influence how clear extended blocks of passage are. You can compact your text with lessening the leading between the lines. Beware too much lessening the space of leading results in the colliding of ascenders and descenders as well; this surely hampers the readability of the text. However, as an illustration approach, stumpy leading can enhance the tempo of the reader with triggering the sense of cramped state along with claustrophobia even.

On the other hand, obstruct the pace of text readability, with showing extra white gap. You can observe it with rather tranquil sense in the transcript blocks. Use of extra leading may origin continuity issues because eyes of reader have to cover wider spaces between the lines of transcript. See below:
In the first example, a collusion of ascenders and descenders is clearly visible; it certainly disturbs the readability and aesthetics.

While the example # 2 suggests the sure value, which is 120 percent of type mass. This indicates that suppose your character mass is 10pt, consequently the leading ought to be set at 12pt. on the other hand 3rd example display’s 200 percent of type text, it clearly distract the readability due to wide gaping.

Some Top Leading Tricks

As described earlier leading can impact text blocks in various ways. A small block of passage like Taglines or slogans against extended block of passage such as paragraph or news column can be impacted in its exclusive approach. So, it’s not compulsory that one works fine means the same works well on other instance as well.

The quantity of words directly co-related to the leading for clarity in reading the text. Increased amount of word-spacing requires added leading for effortless readability and vice versa.


It’s another key tool of the fundamentals of Typography; it called a “gap between font groups”, and letter-spacing property in CSS. It can either be tight or loose; closely related letters are called tight tracking while letters with wider gaps are called loose tracking. Tracking bear identical tips what leading bears.

In tracking the extended may your line (it called measures as well) is, the more loose your tracking needs to be. It hasn’t set on hard and fast rules! You can adjust it in accordance to the type face alternatives, number of columns, background colors, along with adjacent design constituents, these all influence on readability of text group in the design.


It is used to define the gap among two fonts. Creative’s often get confused in defining tracking and kerning, as tracking employed with worldwide setting that impact how closely associated the characters are, while kerning is basically a microscopic tool meant to observe the gap between two letters.

However on some instances kerning is used to define character combinations to stay away from collisions (for instance KX against II). Some characters sit very much in proximity of each other to create a well balanced equal gap. Such as in the lower case I in Helvetica is rectangle, in case you place six of them jointly (e.g. IIIIII) you will observe an equal gap in between all of them.

Just think for capital W, the area it covers on the top is bigger than the area it covers in the bottom of the character, it’s a rather slanting towards the end and thus creates more obvious in contrast to the rest of the fonts. Hear come kerning, it used to alter the gap among fonts for effortless readability of the text.


It’s yet another tip from our fundamentals of Typography, which help to create acuity a great impact of the text. It is closely co-related with your design theme along with legibility and readability aspects as well.

Flush Left or Ragged Right

In western societies, left aligned text is customary since ages, if finished precisely; it augments the readability factor of the text to a great extent. Keep your concentration on right hand plane (Rag), makes a fine balance among line span, also ensure less similarity and balanced space, which works to create a good readability affect.

Flush Right or Ragged Left

In his case text is always associated on the right side, it’s troubling to read the text from left to right, it will disturbs the accepted stream of the text as well. It’s better to employ it in contrast to the rest of the text to signify corresponding replica. Notice the punctuation’s on the right-handed surface as the7y hamper the text alignment.


The commencing and finishing lines are equally aligned to the right and left. In this case justified alignment seems clean as fits precisely into a box, and it’s tricky to examine the line due to lesser illustration prompt among annihilation of text line as well. However, inconsistency in room does come into view to maintain smoothness of both the lines.

Take care of over-hyphenation, as some software’s hyphenate words at the conclusion of transcript lines to uphold its justification, also with some lines may have extra word-spacing, so you may require tweaking line breaks accordingly.


In this case, text likely to inclined towards the center rather to tilt towards the edges. Do it carefully when utilizing centered alignment, otherwise you may experience a devastating result in the end. There isn’t any split spot from commencement to finish; therefore it’s really a demanding task to read the lines correctly. It impact a lot if consists on 2-3 lines only.

Done well, centered alignment is a worth working on, with just ensuring that your text region is extensive enough to brakes the transcript into logical lines along with ample contrast flanked by the line distance end to end to craft the text attractive.

Use of Typography in Photoshop and Illustrator

In continuation of fundamentals of Typography, These powerful software’s offer their users a number of enticing features for strong typesetting. All the above discussed thoughts are available to use in Photoshop and Illustrator. The two sections that contract with typography are:

  • The Center Panel (Window > Character)
  • The Paragraph panel (Window > Paragraph)

Some Typography Guidelines

In the final section of fundamentals of Typography, here are some tricks to utilize to do the typography job at its best.

Information Pecking Order

While you’re working with your design, it’s key to success to understand the structure and packing order of information. Take care of the importance of bold and title headlines, sub headings, figure captions or body copy. Also take care of best ways to utilize diverse typefaces between dissimilar text stages. There are flourishing periodicals unite unlike typefaces to produce both conventional and latest layout trends. Working with proper information hierarchy makes them effortless to read and scan.

Choose Typefaces that carry the Theme

When working on ideas for your potential design, with selecting your typefaces do help you to elaborate your design with certain surety. Following short listing of typefaces, a complex job! Justify your selection with evaluating them touching your proposed theme.

Get Familiar

Experience makes the final outcome perfect, so try to conduct experiment with typography at your best. A touch of passion you need to master the subject for best design outputs. Also expose to portfolios of renowned designers and observe the technique they apply typography into their produced designs along with keeping the enticing typefaces of your choice and try them into your designs for best outcomes.
Also acquire the practical and theoretical knowledge of typography relating arts and science aspect as well. Confidence and clarity of thought is your top tool to create a great design, equip you with them and you can turn the wheel against the wind even.

Own Judgment

Though it looks rigidity prevails in some my described rules, so best ways to apply them is your own judgment! Trust me no one can beat this rule. What you have learn’t, what thoughts you’re working with what facilities you own to do the job, all goes secondary against your passion and clear judgment.
You should be careful about the nature of the jobs as well, as the nature of each job likely come with some new variations such as a webpage, a double spread, a letterhead, and a business card, they all have their special features you need to place them correctly in the right job.

Also with our described rules you need to consider a top opening point, outside manipulations like flanking design, and above all the company thoughts for the project as well, these all influence your work significantly. Finally your created design hits the target, the all important concern!

Typography is Everything

Our advertising and media world is full of typography, from road side signs to movies, publicity stuff printed in the newspapers and magazines and presented over TV screen; visualize them all for new and enticing ideas. Always analysis your job critically, always ready to a famous name in related circles and an era of your success starts, a dream of every designer.

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Design Thoughts