5

days

12

students

100+

explorations
Infd studio
Typography module in progress | Information Design Studio

The knowledge of typography and its proper usage is of utmost importance to information designers as it is a powerful tool in the visual communication of information.

About the Newsletter

The newsletter documents the events, products and takeaways of the module on Typography, Grid and Layout, that was presented as a part of the first semester course for the Information Design discipline at National Institute of Design, Bengaluru. The five-day course was held from 17th to 23rd October, 2016.
The module, conducted by Poornima Vaidyanathan, commenced with a lot of excitement and expectations surrounding it. The topic is of much interest to designers across all disciplines, and it was hardly a surprise that her audience was more than just the intended students. The was judiciously divided among the lectures and assignments that got progressively intensive, as the professor took us through the minutest details that, surprisingly, can make or break any text.


Day 1

...
History of Type

The session commenced with an introduction to the subject. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Even though it dealt with forms and their impression using ink, typography has evolved from stone impressions to the age of crisp digital fonts. It formally began with the Roman serif letterforms on stonecutting followed by imitation of handlettering by scribes. The invention of the movable by Gutenberg in the 15th century revolutionised the way type appeared on print (Blackletters). Nicholas Jenson combined the best of Gothic and Italian letterforms, creating the Roman typeface. Roman style simplified by weights (Old Style) gradually gave way to Transitional types and eventually to Modern typefaces with broad verticles and razor-thin serifs. Italic typefaces were invented to make printing economical. Monster fonts (Fat-face, Extra-condensed, Slab-serif) were invented to grab the viewer's attention at a distance.


...
Anatomy of Type

We understood that letterforms are distinct shapes in themselves, just like human forms. We got aquainted with terms like - baseline, x-height, body-height, cap-height, ascenders, descenders, serifs, stem, ear, apex, crossbar, link, counter, bowl, bracket and so on which describe the characteristics of various letterforms. We also leart how the 'g', 'a', '&' can help us identify different typefaces.


...
Classification of Type

Typefaces are broadly classified on the basis of absence of serifs (Sans-serif) or their presence (Serifs). Centaur, Garamond, Times New Roman, Bodoni and Rockwell are some well known serif typefaces. Posed with the question which one came first, we discovered that to improve readability, even at smaller sizes, the serifs were clipped off, giving rise to the family of sans-serifs. Arial, Helvetica, Univers, Futura, Avant Garde, Gill Sans and Frutiger are some legendary sans-serif typefaces that revolutionised the world of graphic design.


Assignment 1

The objective was to sensitize one to type and get familiar with letter forms and its characteristics. The task was to describe oneself in one sentence with not more than five words in the sentence and choose an appropriate typeface to express this descriptive sentence using the letterforms to emote the same.



Day 2

- ...
Manipulating Type

Now that we had aquainted ourselves with the individual letterforms, it was time to learn how we can manipulate text parameters like - kerning, tracking, leading, and alignment to change their visual appeal.
Kerning is used to adjust the spacing between pairs of characters in a piece of text to be printed.
Tracking refers to a consistent degree of increase (or sometimes decrease) of space between letters to affect density in a line or block of text.
Leading refers to the distance between the baselines of successive lines of type.
Alignment refers to the arrangement of the text in a space. With respect to the boundaries, text can be left, right, centre or justified aligned.

-

...
Using Type correctly

With all the knowledge gained, it was important to know how to use it correctly in different contexts and learn a few DOs and DON'Ts. Text should be both legible and readable. Readability is how easy it is to read words, phrases, blocks of copy such as a book, a web page or an article. When using white text on a black background, it is advisable to use a bigger point size, as the background ink tend to encroach upon the letters in print. Legibility is a measure of how easy it is to distinguish one letter from another in a particular typeface. In large blocks of text, kerning, tracking and hyphenation can be used to prevent widowing or orphaning of text.


...
Hierarchy in Type

Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception. It can be created in many ways through the choice of typeface, size, weight, style and colour.


Assignment 2

The objective was to understand hierarchy in type. The task was to take the same sentence chosen to describe oneself and work with given different ways to bring in hierarchy in type.



Day 3

...
Grids and Layouts

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. A grid helps achieve clarity, efficiency, economy and continuity in content. A few popular grid systems include - Manuscript grid (for continuous text), Column grid (for text divided into columns like newspapers), Modular grid (for comic strips) and Hierarchical grid. A modular grid is a grid which has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. Modular grids are created by positioning horizontal guidelines in relation to a baseline grid that governs the whole document. A hierarchical grid is usually used for webpages.
A layout is an arrangement of grids in the horizontal or vertical space.


Assignment 3

The objective was to understand and identify with letterforms and typefaces and the anatomy of letterforms.The task was to select a typeface / type family and classify the same. Study its evolution and create content for an informative A3 poster about the chosen typeface.



Day 4

...
Digital Fonts

Ever since the advent of printing with movable type, typography and technology had become inseparable. Today we live in a digital world. Just like print, typography becomes an important part of the digital interfaces that we use in our everyday life. Knowing that the technology is different and understanding it goes a long way in using type correctly on digital platforms. A digital font is a piece of computer software that contains a collection of vector 'drawings' along with spacing and kerning data that could be accessed through the keyboard. A family of typeface consists of a number of variant fonts (light, regular, italic, bold, bold-italic etc.) that share a common design. Display of pictorial typefaces maybe be simply single fonts. The oldest desktop fonts were bitmaps which comprised of individual pixels and lacked the smooth finish when scaled in screens. Adobe solved the issue with PostScript type by using beizer curves to create a scalable vector-graphics format.
TrueType fonts are similar, except for the fact they use quadratic curves for the letterforms. OpenType is a new cross-platform type that serves well on both digital and print and comes with a large set of custom ligatures.
Readability of type on screens is solved by a method called anti-aliasing, wherein an illusion of smooth outlines is created by using gray outlines surrounding the character. ClearType and CoolType rendering techniques utilize this feature to produce crisp text on screen.
Fonts are made using font creation softwares like Macromedia Fontographer. Most fonts can now be bought or downloaded online via type-foundries websites.


Assignment 4

The objective was to work with grids for publication and web. The task was to create a single fold A4 invitation (A5 size when folded), inviting internal NID faculty to view a showcase of your class typography poster display.



Day 5

...
Type in Infographics

By now, we had imbibed in a lot of knowledge and hands-on experience in using type in design for communication. The course was concluded with some tips on how to use this knowledge in practical design. One important factor for us is the design of information. Information should be easily comprehensible, for which grids, layouts and hierarchy in type are very crucial. Another important factor is the choice of type, that can actually emote the information presented. We concluded the module with an exhibition of our week's work, immersing and enriching ourselves and learning how to think in type.


Assignment 5

The objective was to understand layouts comprising of various elements. The task was to summarize the course on typography and create an e-newsletter to share with fellow colleagues. The e-newsletter must contain an introductory ebanner followed by content broken down into columns within an underlying grid.