2. Typeface: Taxonomy
There are five basic classifications of typefaces
Serif
Sans serif
Script
Monospaced
Display.
3. Serif Fonts
• Serif fonts are typefaces that have serifs, which are extra
strokes on the ends of their letterforms.
• Times New Roman
• Garamond
• Baskerville
• Georgia
• Courier New.
• Old Style Serifs like Adobe Jenson, ITC Berkeley Oldstyle, and
Goudy Old Style.
• Transitional Serifs like Times New Roman, Baskerville, and
Americana.
• Neoclassical & Didone like Didot, Marconi, and Bodoni.
• Slab Serifs like American Typewriter, Rockwell, and Soho.
4. • Serif fonts are usually used in lengthy text, such as books,
newspapers, and most magazines and are the most commonly
used printed typestyle due to perceived readability.
• After all, when you strive to create something beautiful and
remarkable to look at, the main goal is to have your message
clear and readable!
5.
6. San Serif
• A category of typefaces that do not use serifs, small lines at
the ends of characters.
• Popular sans serif fonts include Helvetica, Avant Garde, Arial,
and Geneva.
• Sans serif fonts are more difficult to read when compared to
serif fonts.
• They are used most often for short text components such as
headlines or captions.
7. Types of san serif fonts
• Grotesque Sans-Serif Typefaces
Include a slight contrast between the thin and thick strokes,
and a ‘bowl and loop’ on the lowercase "g". Although it's an
older style of sans serif, you can find plenty of contemporary
sans serif fonts in the grotesque style.
8. Neo-Grotesque Sans-Serif
Neo-grotesque fonts are a refined version of grotesque fonts,
with even more decoration stripped away to leave a very plain,
clean, minimalist typeface. Some of the most popular sans serif
fonts, like Helvetica and Arial
9. Geometric Typefaces
• Geometric typefaces are strongly influenced by geometry.
Think straight lines, perfectly circular bowls, and a uniform
stroke thickness and optically circular bowls.
• Geometric fonts can be very stylish and high-impact, but
they're not always ideal for long-form body copy.
• Futura is a geometric font.
10. Humanist Typefaces
• Humanist fonts have a more organic feel than some of the
other types of sans-serif typefaces.
• They're also highly legible, making them a good choice for
body text as well as headlines.
• Popular fonts like Gill Sans, Open Sans, and Verdana are all
humanist typefaces.
11. Script fonts (Cursive fonts)
• A script font is basically a style of typography that resembles
cursive or connected writing.
• A script font is a classification of fonts designed to resemble
traditional cursive handwriting.
• Thirthy Font (OTF, TTF) ...
• Wild Ones Script (OTF, TTF) ...
• Zattoya Signature Typeface (OTF, TTF) ...
• Geraldyne Script (OTF, TTF) ...
• John Davidson Script (OTF, TTF) ...
• Daisies of Our Lives (OTF, TTF) ...
• Naycila Script Font (OTF, TTF) ...
• Seirra Script and Serif Font (OTF, TTF)
12.
13.
14. Types of monospaced fonts
• Courier
• Lucida Console
• Menlo
• Monaco
• Consolas
• Inconsolata and Source Code Pro.
• Monospaced fonts are customary on typewriters and for
typesetting computer code.
15. Display fonts
• Display type, on the other hand, is type that 14 point or larger,
and it's typically used in small quantities for emphasis and
effect.
16. Measurements
• The height of type is measured in points
• The width of a letter or a line of type is measured in picas.
• Point System (DTP Point) (mainly used nowadays)
1 pt = 1/72 inch=0.353 mm
12 pt = 1 pica = 4.23 mm
6 pica = 1 inch
Point system (pica system)
1 pt = 0.351 mm
12 pt = 1 pica = 4.21mm
Didot system (pica system)
1 p = 0.375mm
12p = 1c=4.5mm
17. Type spacing
• Spacing is a key element in graphic design.
• It can keep things separated or together, and acts as an
indicator for a start or an end.
• In graphic design, perhaps the most important thing spacing
does is grab attention.
• Kerning
• Tracking
• Leading
18. Rasterization
• Rasterized text is text that has been turned into a bitmap.
• In other words, the text has been reduced to pixels on a
screen.
• Rasterizing a Photoshop layer converts a vector layer to pixels.
• Vector layers create graphics using lines and curves so they
maintain their clarity when you enlarge them, but this format
leaves them unsuitable for artistic effects that use pixels.
• For example, if you add your company name to an ad as text,
which is a vector layer, you may want to blur, distort or add
texture to the letters. To add any of these filters, you must first
rasterize the layer.
19. • A raster image file is a rectangular array of regularly sampled
values, known as pixels.
• Each pixel (picture element) has one or more numbers
associated with it, specifying a color which the pixel should be
displayed in.
• Examples of raster image file types are BMP, TIFF, GIF, and
JPEG files.
•
20. Anti aliasing
• Anti-aliasing is a term used to describe the software process
of making the edges of graphics objects or fonts smoother.
• Additional pixels in-between the edges of an object and its
background.
• Anti-aliasing improves the appearance of polygon edges, so
they are not "jagged" but are smoothed out on the screen.
• Antialiasing removes jagged edges by adding subtle color
changes around the lines, tricking the human eye into thinking
that the lines are not jagged. The slight changes in color
around the edges of an image help the line blend around
curves, giving the impression that the line is true. These color
changes are made on a very small scale that the human eye
cannot detect under normal circumstances.
21.
22. Sub pixel rendering
• A subdivision of a pixel, typically used to show the amounts of
red, green or blue at a location.
• A single pixel on a color subpixelated display is made
of several color primaries, typically three colored elements—
ordered (on various displays) either as blue, green, and red
(BGR), or as red, green, and blue (RGB).
• For color displays, each pixel is made up of three subpixels for
red, green and blue.
• Each subpixel can be set to 256 different shades of its color, so
it is therefore possible for a single LCD pixel to display
• 256 ∗ 256 ∗ 256 = 16.8 million different colors.
23. • Our eye sees a single pixel like this:
• But a magnifying glass reveals it as:
• This means that an LCD screen boasting a horizontal
resolution of 800 whole pixels is actually composed of 800
red, 800 green, and 800 blue sub-pixels interleaved together
(R-G-B-R-G-B-R-G-B ...) to form a linear array of 2400 single-
color sub-pixels.
24. • When our eye sees a solid white line:
• What's actually being displayed is:
• This is also called font rendering technology
25. Font Embedding
• All of the font information used to make your document look
the way it does is stored in the PDF file.
• So no matter what fonts someone else has on their computer,
they'll be able to see the file as you intended it to be seen.
26.
27. Web Fonts
• Web fonts are fonts especially created for websites.
• They're usually on a web server.
• This means web fonts are downloaded by the browser while
rendering the web page, and then applied to the text.
• Web fonts require files that are loaded from one of two
places: the visitor’s own computer or a web server.
• In the case of web servers, web fonts work with the
CSS @font-face rule. This is a widely supported rule for the
CSS stylesheet. It allows you to download the web font from a
server and use it on the web page.
28. • Gotham web fonts are another popular option. Gotham web
fonts are based on geometric sans-serif typefaces and look
fantastic on the web.
• WOFF — Web Open Font Format
• Exensa Grotesk is the perfect Helvetica web font.
• Hamlin
• Herz is another fantastic Helvetica web font.
29. Encoding
• Encoding is the process of converting the data or a given
sequence of characters, symbols, alphabets etc into a
specified format, for the secured transmission of data.
