A blog and a newsroom for beginner level UI designers. Here we can discuss about User Interface and User Experience related concepts. And also learn about web design and its other elements.

Wednesday, August 5, 2015

Typography Explained - I

Typography could be considered the most important part of any design. In this post, we’ll discuss about the basics of typographic theory, including the different kinds of typefaces (and how typefaces and fonts differ), as well as the basic anatomy of a typeface. And each part will also offer more resources for delving deeper into typography.Typography is the art and technique of arranging texts to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line-height, line length, line-spacing (leading), letter-spacing (tracking) and adjusting the space within letters pairs (kerning). In modern times, typography has been used in we design (web and print media) film, television and online broadcasts to add emotion to communication.In other words,Typography means the style and appearance of content in web and print media. The art or procedure of arranging type or processing data and printing from it.

Most of them would confuse between typeface and fonts. A typeface is a set of typographical symbols and characters. It’s the letters, numbers, and other characters that let us put words on paper (or screen). A font, on the other hand, is traditionally defined as a complete character set within a typeface, often of a particular size and style. Fonts are also specific computer files that contain all the characters and glyphs within a typeface.Classifying Types:There are a number of different ways to classify typefaces and type families. The most common classifications are by technical style:

1.) Serif2.) Sans-Serif3.) Script4.) Displayand so on.

Mostly used font typefaces are serif and sans-serif. Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. An example would be the Times New Roman font. Sans serif does not have these details or flourishes. An example would be the Arial font.

Script typefaces are derived from 17th century formal writing styles. Many characters have strokes that join them to other letters. These typefaces include calligraphic writing, manuscripts and casual joining letters scripts. Good Example of script typefaces are Brush Script, Lucida Calligraphy, Monotype Corsiva, etc..

Decorative or Display styles is the largest category and also the most diverse. Rarely used for lengthy blocks of text, decorative typefaces are popular for signage, headlines and similar situations were a strong typographic statement is desired. Sample typefaces are ITC Tempus Sans, ITC Blackadder, Droid sans, etc..

The Anatomy of a Typeface:The different letter forms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface:

The above image shows the different guidelines that are generally present in a typeface. The baseline is the invisible line that all the characters sit on. Rounded letters sometimes sit just a tiny bit under the baseline, and descenders always drop below this line. A given typeface will have a consistent baseline.The meanline is the height of most of the lowercase characters within a typeface, and is generally based on the lowercase “x” if there are varying heights among the lowercase characters. This is also where the term “x-height” comes from. The cap height is the distance between the baseline and the top of uppercase letters like “A”.

The above illustration shows three common parts to letterforms. The stem is the main upright of any letter, including the primary diagonal. It’s could be considered the anchor of the character. The bar is any horizontal part, which are sometimes also called arms. The bowl is the curved part of a character that creates an interior empty space. The inside of a bowl is a counter.

The ascender of a lowercase character is any part that rises above the meanline, such as the uprights on the letters “d”, “h”, and “b”. Descenders are the parts of a lowercase character that drop below the baseline, such as in a “p”, “q” or “g”.

Serifs are the extra flourish at the end of a stroke on serif typefaces. Some typefaces have very pronounced serifs, while others are barely distinguishable.

The aperture of a character refers to the opening at the bottom of some characters, such as the uppercase “A” or lowercase “m”. An ear is a decorative extension on a letter, as highlighted on the “g” above. Hairlines are the thinnest part of a serif typeface.

Crossbars are horizontal strokes, as found on the uppercase “A” and “H”. Terminals are only found on serif characters, and are the end of any line that doesn’t have a serif. Loops are found on some lowercase “g” characters, and can be fully closed or partially closed.

Spurs are tiny projections from curved strokes, such as on some uppercase “G” characters. Links connect the top and bottom bowls of a double-stacked lowercase “g”. The spine is the curved stroke found on the letter “s”.

Tails are sometimes-decorative descending strokes, as seen on an uppercase “R”. Finials are the tapered endings of some strokes. Shoulders are any curved stroke that originate from a stem.Rest of basic typography concepts are explained in next posts.Source:practicaltypography, noupe, wikipedia, maconprinting, buzzfeed, fonts.com