Unit 1 Design and Graphics
Unit 1 Design and Graphics
3|Pa ge
Basic of Design and Graphics
The art and profession of selecting and arranging visual elements — such as typography, images,
symbols, colors and ideas to convey a message/information to an audience. Sometimes graphic
design is called "visual communications."
Elements of Design
Line
Shape
Texture
Value & Color
Space
Principles of Design
Movement
Balance
Emphasis
Unity
1. Line: A line is a form with width and length, but no depth. Artists use lines to
create edges, the outlines of objects. A line is created by the movement of the artist's
pen.
Line Direction
Horizontal
lines are calm
and quiet,
4|Pa ge
Vertical lines
suggest more
of a potential
for movement.
Diagonal lines
strongly
suggest
movement
and give more
of a feeling of
vitality to a
picture.
5|Pa ge
Line as Value
Lines or crosshatching can also be used to create areas of grey inside a drawing.
These areas of darker shading inside a figure, called areas of value, can give a more
three-dimensional feeling to an object.
2. Shape
A shape is an enclosed object. Shapes can be created by line, or by color and value
changes which define their edges.
6|Pa ge
Positive/Negative shapes
In a picture, the shapes that the artist has placed are considered the positive
shapes. The spaces around the shapes are the negative spaces. It is just as
important to consider the negative space in a picture as the positive shapes.
Sometimes artists create pieces that have no distinction between positive and
negative spaces. M. C. Escher was a master at creating drawings where there
was no distinction between positive and negative space. Here are two
examples of Escher's work which show the interplay between positive and
negative space:
3. Texture
Texture is the surface quality of an object. We experience texture when we touch objects
and feel their roughness, smoothness or patterns. Texture is the artist's way of
mapping these tactile impressions on to the two-dimensional picture. Texture is created
by varying the pattern of light and dark areas on an object. Notice how the areas of light
and dark give the impression of depth to the image below.
7|Pa ge
Value Color Color Space
Hue Monochromatic
Color Value Analogous
Intensity Complementary
Triadic
2. Optical Color Mixing
2. Color Discord
Value
Color
Color occurs when light in different wavelengths strikes our eyes. Objects have no
color of their own, only the ability to reflect a certain wavelength of light back to our
eyes. As you know, color can vary in differing circumstances. For example, grass can
8|Pa ge
appear gray in the morning or evening or bright green at noon. Colors appear
different depending on whether you view them under incandescent, florescent or
natural sunlight. Colors also change according to their surroundings. You can see
this by looking at the color squares below - the reddish outline box is the same color
in all the examples.
Properties of Color
Hue
Hue refers to the color itself. Each different hue is a different reflected wavelength
of light. White light broken in a prism has seven hues: red, orange, yellow, green,
blue, indigo and violet. White light occurs when all the wavelengths are reflected
back to your eye, and black light occurs when no light is reflected to your eye. This
is the physics of light.
9|Pa ge
When it comes to using color in art, things get quite messy. Looking at the colorwheel
above, when using color pigments, the three primary colors used are yellow, blue and
red. These three colors are blended together to produce other colors, called secondary
colors, such as green, orange and purple. Mix enough colors together, and you get black.
Computer colors are produced by Things get even dicier on computers when you go
combining the three colors of red, to print out these colors. Printing uses theCYMK
green and blue together. Believe convention which takes cyan (light blue),
it or not, you can get yellow by yellow, magenta (pinky red) and black inks and
combining these colors. tries to recreate the color that your computer
created with red, green and bluelight.
Color Value
Color value refers to the lightness or darkness of the hue. Adding white to a hue
produces a high-value color, often called a tint. Adding black to a hue produces a
low-value color, often called a shade.
Intensity
Intensity, also called chroma or saturation, refers to the brightness of a color. A color
is at full intensity when not mixed with black or white - a pure hue. You can change the
intensity of a color, making it duller or more neutral by adding gray to the color. You
can also change the intensity of a color by adding its complement (this is the color
found directly opposite on the traditional color wheel). When changing colors this way,
the color produced is called a tone.
When you mix complementary colors together, you produce a dull tone. However, when
you put complementary colors side by side, you increase their intensity. This effect is
called simultaneous contrast - each color simultaneously intensifies the visual
brightness of the other color.
10 | P a g e
Below are some examples of how this works, using a program called Metacreations
painter. As you can see, you choose a hue from the outer ring. Inside the triangle,
you can vary the saturation of the hue (amount of color), the tint or the shade.
Above: adding white (tint) to the color by Above: adding black (shade) to the color by
moving the cursor to the top part of the moving the cursor toward the bottom part of the
triangle. triangle.
When small dots of color are placed adjacent to each other, your eye will combine
the colors into a blended color. This is the principle used when printing color in
magazines. Dots of cyan, magenta, yellow and black are distributed in a pattern on the
paper, and depending on the quantity of a certain dot, you will see a specific color on
the page. Paul Signac used a technique called pointillism that involved creating art using
the combination of dots to form images.
11 | P a g e
Color and Space
Certain colors have an advancing or receding quality, based on how our eye has to adjust
to see them. Warm colors such as red, orange or yellow seem to come forward while cool
colors such as blue and green seem to recede slightly. In the atmosphere, distant objects
appear bluish and the further away an object appears, the less colorful and distinct it
becomes. Artists use this to give an illusion of depth, by using more neutral and
grayish colors in the background.
Color Schemes
Monochromatic
Analogous
Complementary
Triadic
This color scheme involves the use of colors that are equally
spaced on the color wheel. The primary colors of yellow, red
and green could be used together in a color scheme to produce
a lively result.
12 | P a g e
Color Discord
We live in a three-dimensional world of depth. When we look around us, some things
seem closer, some further away. The artist can also show the illusion of depth by
using the following means:
13 | P a g e
Overlapping
14 | P a g e
Linear Perspective (Converging Lines)
Linear perspective is based on the idea that all lines will converge on a common point
on the horizon called the vanishing point. You have observed linear perspective when
you notice that the lines on the highway appear to meet at a point in the distance.
Artists use linear perspective to create a focal point for apicture. Any walls, ceilings,
floors or other objects with lines will appear to come together at the horizon line.
These lines converging lead our eyes towards that point. Often, the most important
object or person in the picture will be located at that point. You can see in the
drawing above how all the lines in the drawing seemto lead your eye toward the
church in the center back of the drawing.
15 | P a g e
Principles of Design
Movement
Balance
Emphasis
Unity
Anticipated Movement
Fuzzy Outlines
Multiple Image
16 | P a g e
Optical Movement
Optical Illusions
17 | P a g e
Look at the two images above. The painting by Matisse is full of sweeping circular areas
which move your eye around the picture (it is a good example of optical movement).
The elements are flowing and circular and give you the impression of a calm quiet
rhythm. The line drawing on the right is more dynamic due to its incomplete nature and
the feeling of motion is much more evident.
Balance:
To understand balance, think of the balance beam. When objects are of equalweight,
they are in balance. If you have several small items on one side, they can be balanced
by a large object on the other side. Visual balance works in much the sameway. It can
be affected not only by the size of objects, but also their value (ie. lightness or
darkness, termed visual weight).
18 | P a g e
Asymmetrical (Informal) Balance
Asymmetrical balance occurs when several smaller items on one side are
balanced by a large item on the other side, or smaller items are placed further
away from the center of the screen than larger items. One darker item may need
to be balanced by several lighter items.
Although asymmetrical balance may appear more casual and less planned, it is
usually harder to to use because the artist must plan the layout very carefully to
ensure that it is still balanced. An unbalanced page or screen creates a feeling of
tension, as if the page or screen might tip, or things might slide off the side, just
as the unbalanced balance beam would tip to one side.
by color
19 | P a g e
by shape
by position
20 | P a g e
by texture
by eye direction
Radial Balance
21 | P a g e
Ways to Create a Focal Point
Emphasis by Contrast
22 | P a g e
Emphasis by Isolation
Emphasis by Placement
An object placed in the center will often be perceived as a focal point. If all eyes in
the painting look at one object, or if an object is placed at the center of the lines of
perspective, that object will be perceived as the focus of the work.
23 | P a g e
Unity
Classic design theory discusses unity in terms of the objects present in a piece of
art. Regarded in this way, unity discusses the need to tie the various elements of a work
of art together.
Unity is a measure of how the elements of a page seem to fit together - to belong together.
A unified work of art represents first a whole, then the sum of its parts.
Proximity
Repetition
Continuation
A much more subtle method of unifying a work involves the continuation of line,
edge or direction from one area to another. Continuation is often used in books and
magazines to tie the elements of a page together with the use of rules, and by lining
up edges of copy, headlines and graphics.
24 | P a g e
RGB & CMYK Colors
CMYK (short for cyan, magenta, yellow, and key (black) and often referred to as process color
or four color) is a subtractive color model, used in color printing, also used to describe the printing
process itself. Though it varies by print house, press operator, press manufacturer and press run,
ink is typically applied in the order of the abbreviation.
The CMYK model works by partially or entirely masking certain colors on the typically white
background (that is, absorbing particular wavelengths of light). Such a model is called subtractive
because inks “subtract” brightness from white.
In additive color models such as RGB, white is the “additive” combination of all primary colored
lights, while black is the absence of light. In the CMYK model, it is just the opposite: white is
the natural color of the paper or other background, while black results from a full combination of
colored inks. To save money on ink, and to produce deeper black tones, unsaturated and dark
colors are produced by substituting black ink for the combination of cyan, magenta and yellow.
Text is typically printed in black and includes fine detail (such as serifs), so to reproduce
text or other finely detailed outlines using three inks without slight blurring would require
impractically accurate registration (i.e. all three images would need to be aligned extremely
precisely).
A combination of 100% cyan, magenta, and yellow inks soaks the paper with ink, making
it slower to dry, and sometimes impractically so.
A combination of 100% cyan, magenta, and yellow inks often results in a muddy dark
brown color that does not quite appear black. Adding black ink absorbs more light, and
yields much darker blacks.
Using black ink is less expensive than using the corresponding amounts of colored inks.
When a very dark area is desirable, a colored or gray CMY “bedding” is applied first, then a full
black layer is applied on top, making a rich, deep black; this is called rich black. A black made
with just CMY inks is sometimes called a composite black.
The amount of black to use to replace amounts of the other ink is variable, and the choice depends
on the technology, paper and ink in use. Processes called under color removal, under
25 | P a g e
color addition, and gray component replacements are used to decide on the final mix; different
CMYK recipes will be used depending on the printing task.
Comparisons between RGB displays and CMYK prints can be difficult, since the color
reproduction technologies and properties are so different. A laser or ink-jet printer prints in dots
per inch (dpi) which is very different from a computer screen, which displays graphics in pixels
per inch (ppi). A computer screen mixes shades of red, green, and blue to create color pictures. A
CMYK printer must compete with the many shades of RGB with only one shade of each of cyan,
magenta and yellow, which it will mix using dithering, halftoning or some other optical technique;
this dithering produces a lower level of detail than the printer’s dpi suggests.
Conversion
Since RGB and CMYK spaces are both device-dependent spaces, there is no simple or general
conversion formula that converts between them. Conversions are generally done through color
management systems, using color profiles that describe the spaces being converted. Nevertheless,
the conversions cannot be exact, since these spaces have very different gamuts.
26 | P a g e
Color Psychology
Colors often have different meanings in various cultures. The meanings of various colors have
changed over the years. But the following are generally found to be accurate. Colors in the red
area of the color spectrum are known as warm colors and include red, orange, and yellow. These
warm colors evoke emotions ranging from feelings of warmth and comfort to feelings of anger
and hostility.
Colors on the blue side of the spectrum are known as cool colors and include blue, purple, and
green.
These colors are often described as calm, but can also call to mind feelings of sadness or
indifference.
Black
Black is the color of authority and power. It is popular in fashion because it makes people appear
thinner. It is also stylish and timeless. Black also implies submission. Priests wear black to signify
submission to God. Some fashion experts say a woman wearing black implies submission to men.
Black outfits can also be overpowering, or make the wearer seem aloof for evil. Villains, such as
Dracula, often wear black.
White
Brides wear white to symbolize innocence and purity. White reflects light and is considered a
summer color. White is popular in decorating and in fashion because it is light, neutral, and goes
with everything. However, white shows dirt and is therefore more difficult to keep clean than other
colors. Doctors and nurses wear white to imply sterility.
Red
The most emotionally intense color, red stimulates a faster heartbeat and breathing. It is also the
color of love. Red clothing gets noticed and makes the wearer appear heavier. Since it is an extreme
color, red clothing might not help people in negotiations or confrontations. Red cars are popular
targets for thieves. In decorating, red is usually used as an accent. Decorators say that red furniture
should be perfect since it will attract attention.
The most romantic color, pink, is more tranquilizing. Sports teams sometimes paint the locker
rooms used by opposing teams bright pink so their opponents will lose energy.
27 | P a g e
Blue
The color of the sky and the ocean, blue is one of the most popular colors. It causes the opposite
reaction as red. Peaceful, tranquil blue causes the body to produce calming chemicals, so it is often
used in bedrooms. Blue can also be cold and depressing. Fashion consultants recommend wearing
blue to job interviews because it symbolizes loyalty. People are more productive in blue rooms.
Studies show weightlifters are able to handle heavier weights in blue gyms.
Green
Currently the most popular decorating color, green symbolizes nature. It is the easiest color on the
eye and can improve vision. It is a calming, refreshing color. People waiting to appear on TV sit in
"green rooms" to relax. Hospitals often use green because it relaxes patients. Brides in the Middle
Ages wore green to symbolize fertility. Dark green is masculine, conservative, and implies wealth.
However, seamstresses often refuse to use green thread on the eve of a fashion show for fear it will
bring bad luck.
Yellow
Cheerful sunny yellow is an attention getter. While it is considered an optimistic color, people lose
their tempers more often in yellow rooms, and babies will cry more. It is the most difficult color
for the eye to take in, so it can be overpowering if overused. Yellow enhances concentration, hence
its use for legal pads. It also speeds metabolism.
Purple
The color of royalty, purple connotes luxury, wealth, and sophistication. It is also feminine and
romantic. However, because it is rare in nature, purple can appear artificial.
Brown
Solid, reliable brown is the color of earth and is abundant in nature. Light brown implies
genuineness while dark brown is similar to wood or leather. Brown can also be sad and wistful.
Men are more apt to say brown is one of their favorite colors.
28 | P a g e
Typography
Typography is the art and techniques of type design, modifying type glyphs, and arranging type.
Type glyphs (characters) are created and modified using a variety of illustration techniques. The
arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and
letter spacing.
Type glyphs (characters) are created and modified using a variety of illustration techniques. The
arrangement of type is the selection of typefaces, point size, line length, leading (line spacing) and
letter spacing.
History
Typography (from the Greek words t?p?? type = “to strike” “That by which something is
symbolized or figured...” and ??af?a graphia = to write).
Typography traces its origins to the first punches and dies used to make seals and currency in
ancient times. The first known movable type printing artifact is the Phaistos Disc, dating between
1850 BC and 1600 BC. The item dates back to Minoan age and is now on display at the
archaeological museum of Herakleion in Crete, Greece.
Typography with moveable type continued in 11th-century China, and modular moveable metal
type began in 13thcentury China and Korea, was developed again in mid-15th century Europe with
the development of specialized techniques for casting and combining cheap copies of letterpunches
in the vast quantities required to print multiple copies of texts.
Scope
In contemporary use, the practice and study of typography is very broad, covering all aspects of
letter design and application, including: typesetting and typeface design; handwriting and
calligraphy; graffiti; inscriptional and architectural lettering; poster design and other large scale
lettering such as signage and billboards; business communications and promotional collateral;
advertising; wordmarks and typographic logos (logotypes); apparel (clothing); vehicle instrument
panels; kinetic typography in motion picture films and television; and as a component of industrial
design—type resides on household appliances, pens and wristwatches, for example.
29 | P a g e
Since digitization typography’s range of applications has become more eclectic, appearing on web
pages, LCD mobile phone screens, and hand-held video games. The ubiquity of type has led
typographers to coin the phrase “Type is everywhere”.
Typography generally follows four principles, using repetition, contrast, proximity, and alignment.
Text typography
In traditional typography, text is composed to create a readable, coherent, and visually satisfying
whole that works invisibly, without the awareness of the reader. Even distribution with a minimum
of distractions and anomalies are aimed at producing clarity and transparency.
Choice of font(s) is perhaps the primary aspect of text typography—prose fiction, non-fiction,
editorial, educational, religious, scientific, spiritual and commercial writing all have differing
characteristics and requirements. For historic material, established text typefaces are frequently
chosen according to a scheme of historical genre acquired by a long process of accretion, with
considerable overlap between historical periods.
Contemporary books are more likely to be set with state-of-the-art seriffed “text romans” or “book
romans” with design values echoing present-day design arts, which are closely based on traditional
models such as those of Nicolas Jenson, Francesco Griffo (a punchcutter who created the model
for Aldine typefaces), and Claude Garamond.
With their more specialized requirements, newspapers and magazines rely on compact, tightly-
fitted text romans specially designed for the task, which offer maximum flexibility, readability and
efficient use of page space. Sans serif text fonts are often used for introductory paragraphs,
incidental text and whole short articles. A current fashion is to
pair sans serif type for headings with a high-performance seriffed font of matching style for the
text of an article.
The text layout, tone or color of set matter, and the interplay of text with white space of the page
and other graphic elements combine to impart a “feel” or “resonance” to the subject matter. With
printed media typographers are also concerned with binding margins, paper selection and printing
methods.
30 | P a g e
Readability and legibility
Readability and legibility are often confused. Readability is most often and more properly used to
describe the ease with which written language is read and understood – it concerns the difficulty
of the language itself, not its appearance. Factors that affect readability include sentence and word
length, and the frequency of uncommon words.
In contrast, legibility describes how easily or comfortably a typeset text can be read. It is not
connected with content or language, but rather with the size and appearance of the printed or
displayed text.
Studies of legibility have examined a wide range of factors including type size, type design (for
example, comparing serif vs sans serif type, italic type vs roman type), line length, line spacing,
colour contrast, the design of right-hand edge (for example, justification (straight right hand edge)
vs ranged left, and whether hyphenated). Legibility research was published from the late nineteenth
century on, but the overall finding has been that the reading process is remarkably robust, and that
significant differences are hard to find. So comparative studies of seriffed vssans serif type, or
justified vs unjustified type, have failed to settle the argument over which is best. (Serifs are the
small crossstrokes at the end of letters in fonts such as Times; sans seriffonts, such as Arial,
lack these cross strokes). Unfortunately, the fashion for legibility research was over by the time
that revolutionary changes in printing and display technology (ie, laser printing and PC display
screens) made it actually of potential interest.
Legibility is usually measured through speed of reading, with comprehension scores used to check
for effectiveness (ie, not a rushed or careless read). For example, Miles Tinker, who published
numerous studies from the 1930s to the 1960s, used a speed of reading test that required
participants to spot incongruous words as an effectiveness filter.
These days, legibility research tends to be limited to critical issues, or the testing of specific design
solutions (for example, when new typefaces are developed). Examples of critical issues include
typefaces (also called fonts) for people with visual impairment, and typefaces for highway signs,
or for other conditions where legibility may make a key difference.
Much of the legibility research literature is somewhat atheoretical - various factors were tested
individually or in combination (inevitably so, as the different factors are interdependent), but many
tests were carried out in the absence of a model of reading or visual perception. Some typographers
believe that the overall word shape is very important in readability, and that letter by letter
recognition (sometimes known as parallel letterwise recognition) is either wrong, less important,
or not the entire picture. Studies that distinguish between the two models have favoredparallel
letterwise recognition, and the latter is widely accepted by cognitive psychologists (citation?).
Some commonly agreed findings of legibility research include: text set in lower case is more
legible than text set all in upper case (capitals), presumably because lower case letter structures
and word shapes are more distinctive, having greater saliency with the presence of extenders
(ascenders, descenders and other projecting parts); regular upright type (roman) is found to be
31 | P a g e
more legible that italics, contrast, without dazzling brightness, has also been found to be important,
with black on yellow/cream being most effective; positive images (eg, black on white) are easier
to read than negative or reversed (eg, white on black); the upper portions of letters play a stonger
part than the lower portions in the recognition process; legibility is compromised by letterspacing,
word spacing and leading that are too tight or too loose. Generous vertical space separates lines of
text, making it easier for the eye to distinguish one line from the next, or previous line. Poorly
designed fonts and those that are too tightly or loosely fitted can also result in poor legibility.
Periodicals
Different periodical publications design their publications, including their typography, to achieve
a particular tone or style. For example, USAToday uses a bold, colourful, and comparatively
modern style through their use of a variety of typefaces and colours; type sizes vary widely, and
the newspaper’s name is placed on a coloured background. In contrast, the New York Times use
a more traditional approach, with fewer colours, less typeface variation, and more columns.
Especially on the front page of newspapers and on magazine covers, headlines are often set in
larger display typefaces to attract attention, and are placed near the masthead.
Display typography
Display typography is a potent element in graphic design, where there is less concern for
readability and more potential for using type in an artistic manner. Type is combined with negative
space, graphic elements and pictures, forming relationships and dialog between words and images.
Color and size of type elements are much more prevalent than in text typography. Most display
typography exploits type at larger sizes, where the details of letter design are magnified. Color is
used for its emotional effect in conveying the tone and nature of subject matter.
Display typography encompasses: posters; book covers; typographic logos and wordmarks;
billboards; packaging; on-product typography; calligraphy; graffiti; inscriptional and architectural
lettering; poster design and other large scale lettering signage; business communications and
promotional collateral; advertising; wordmarks and typographic logos
32 | P a g e
(logotypes), and kinetic typography in motion pictures and television; vending machine displays;
online and computer screen displays.
The wanted poster for the assassins of Abraham Lincoln was printed with lead and woodcut type,
and incorporates photography.
Advertising
Typography has long been a vital part of promotional material and advertising. Designers often
use typography to set a theme and mood in an advertisement; for example using bold, large text to
convey a particular message to the reader. Type is often used to draw attention to a particular
advertisement, combined with efficient use of color, shapes and images. Today, typography in
advertising often reflects a company’s brand. Fonts used in advertisements convey different
messages to the reader, classical fonts are for a strong personality, while more modern fonts are
for a cleaner, neutral look. Bold fonts are used for making statements and attracting attention.
Classification of Typefaces
Blackletter
33 | P a g e
Italic
Definition: While
roman typefaces are
upright, italic
typefaces slant to the
right. But rather than being just a slanted or
tilted version of the roman face, a true or pure italic
font is drawn from scratch and has unique features
not found in the roman face.
Venetian printer Aldus Manutius and his type designer, Francesco Griffo are credited with creating
the first italic typeface — the term italic paying homage to Italy where the style originated.
Modern
34 | P a g e
Also Known As: Didone, New Antiqua
Old Style
Roman
Definition: Of the three major type classifications of Western
typography, Roman is the style in widest use. The others are
Blackletter and Italic. Traditionally, Roman is a serif face based on a
style of ancient Rome and is the typical classic serif of today.
However, Roman also refers to any upright typeface (as opposed to
italic, slanted, or script), even sans serif faces.
Sans Serif
Definition: Type which does not have
serifs — the little extra strokes found at
the end of main vertical and horizontal
strokes of some letterforms — are called
sans serif (without serif). Within sans serif
there are five main classifications: Grotesque,
Neo-Grotesque, Geometric, Humanist, and
Informal. Typefaces within each classification
usually share similarities in stroke thickness,
weight, and the shapes of certain letterforms.
35 | P a g e
Although there were some sans serif typefaces in the 1800s, the 1920’s Bauhaus design
movement popularized the sans serif style.
Also Known As: Lineal(e) | Grotesque | Neo-Grotesque | Geometric | Humanist | Gothic (not
Blackletter Gothic)
Examples: “Arial, Helvetica, Verdana, Futura, Univers, and Franklin Gothic are some popular
sans serif fonts.”
Serif
Definition: A serif is the little extra stroke found at the end of main vertical and horizontal
strokes of some letterforms. Some are subtle and others may be
quite pronounced and obvious. In some cases serifs may aid in
the readability of a typeface. Serif refers, in general, to any
style of type that has serifs. Fonts without serifs are called sans
serif.
Slab Serif
36 | P a g e
Definition: A Slab Serif is a type of serif font that evolved from the Modern style. The serifs are
square and larger, bolder than serifs of previous typestyles. Considered a sub-classification of
Modern, Slab Serif is further divided into Clarendon, Typewriter, and Slab Serif (a separate sub-
category of Slab Serif) styles.
Transitional
Definition: The Antiqua or Old Style of type of the 16th and 17th centuries evolved into a style
known as Transitional. The primary characteristics of Transitional type is medium contrast
between thick and thin strokes, less leftinclined stress than earlier Old Style faces, and a triangular
or flat tip where diagonal strokes meet (such the base of a W).
Learning about serifs, strokes, counters, and other bits and pieces that make up the letters in a
typeface is not something of interest only to font fanatics and type designers. The shape and size
of certain elements are generally consistent throughout any given typeface and can help you
identify and categorize typefaces.
It’s not absolutely necessary for most font users to know the precise difference between a spur and
a beak or a tail and a leg, but it is fun and can make you feel and sound smart. Instead of resorting
to terms such as “that little round thingamajig at the top of the f” or “the curvy connector bit in the
middle of the funny-looking g” you can use real terms like ball terminal or the link in a double-
storey g. Take a look at three broad terms with which most designers should have at least a nodding
acquaintance and several related elements that help define a typeface.
1. Strokes
Think about the strokes you make with a pen when printing letters
and you’ll have an idea what the broad meaning of stroke is for a
font.
37 | P a g e
Examples: Not all letters have a stem, such as C or S. The vertical, non-curved portions of L, l, d,
B, and p are examples of stems. H, N, and M have two stems each. Some letterforms such as y and
A may have a sloped or diagonal stem.
The ascenders of some letters may touch or almost touch letters in the line above causing awkward
or distracting patterns. This is most likely to happen or be obvious when a line of text with tall
ascenders is below a line of text with long descenders. To resolve the problem of touching
ascenders and descenders you can: Increase the leading (line spacing) between lines of type;
Choose a different typeface; For headlines and subheads, some careful editing/re-wording can
eliminate the problem; Changing the alignment of the text may also help.
Descender:
Definition: The portion of some lowercase letters, such as g and y, that extends or descends below
the baseline is the descender. The length and shape of the descender can affect readabilityof lines
of type and is an identifying factor for some typefaces.
38 | P a g e
Definition: The arm of a letter is the horizontal stroke on some characters that does not connect
to a stroke or stem at one or both ends. The top of the capital T and the horizontal strokes of the
F and E are examples of arms. Additionally, the diagonal upward stroke on a K is its arm.
Sometimes arm is used interchangeably with bar or crossbar or cross stroke.
Arm is often also used to describe the mostly horizontal top stroke of C, double-storey a, G, and
other glyphs, to include the finial, terminal, spur, or other elements of the stroke.
Examples: The arms of an uppercase F connect to the stem only at one end and the arm of an
uppercase T sits at the top of the stem and doesn’t connect at either end. In contrast a cross stroke
intersects the stem of a lowercase t or f and the cross bar connects the diagonal strokes of an
uppercase A or the vertical stems of an H.
Examples: The cross bar connects the diagonal strokes of an uppercase A or the vertical stems of
an H. In contrast, the cross stroke intersects the stem of a lowercase t or f while the arms of an
uppercase F connect to the stem only at one end.
39 | P a g e
Examples: The cross stroke intersects the stem of a lowercase t or f. In contrast, the cross bar
connects the diagonal strokes of an uppercase A or the vertical stems of an H while the arms of an
uppercase F connect to the stem only at one end and the arm of an
uppercase T sits at the top of the stem and doesn’t connect at either
end.
Tail - A few letters love to wag their tails. Definition: In typography,
the descending, often decorative stroke on the letter Q or the
descending, often curved diagonal stroke on K or R is the tail. The
descender on g, j, p, q, and y are also called tails.
Leg - Most letters don’t have one to stand on. Definition: The
lower, down sloping stroke of the K and k is called a leg. The same
stroke on R as well as the tail of a Q is sometimes also called a leg.
2. Counters
40 | P a g e
This part of a letter is what’s inside the bowl. It’s white space or negative
space, not a stroke at all. Definition: In typography, the enclosed or partially
enclosed circular or curved negative space (white space) of some letters
such as d, o, and s is the counter. The term counter may sometimes be used
to refer only to closed space, while partially enclosed spaces in m, n, or h
are the aperture. The shape and size of the counter and bowl (curved stroke
enclosing the counter) can affect readability and is also an identifying factor
for some typefaces.
Examples: Fonts with very small or thin counters may not reproduce well at very small font
sizes. Depending on the size and the printing method the counters may close up (fill with ink).
There are other more specific terms for some of the negative space that defines a letterform:
Examples: At very small sizes the eye of some fonts could fill
with ink making the letter e appear as a c or blob of ink.
41 | P a g e
3. Serifs
Probably the most familiar characteristic of type, serifs come in
three basic shapes and fall into one of two groups.
Unbracketed serifs attach directly to the strokes of the letterform, sometimes abrubtly or at right
angles. Bracketed serifs provide a curved transition between the serif and the main strokes. Within
these divisions serifs can be blunt, rounded, tapered, pointed, or some hyrid shape.
Similar to serifs, each of these letterparts may be understated or may form a distinctive, readily
identifiable element of a typeface:
Ears - Gee, why can’t I hear you? Definition: Typically found on the
lower case g, an ear is a decorative flourish usually on the upper right
side of the bowl. Similar to a serif, the ear can be a distinctive,
identifying element of some typefaces.
Spurs - Not just for cowboys. Definition: Similar to but generally smaller
than a serif or beak, a spur is a small bit at the end of certain curved portions
of a letterform such as the end(s) of a C or S or the middle of G.
42 | P a g e
Chins - Some letters have a strong one. Definition: The right
angled stroke on the capital letter G is its chin.
Examples: The horizontal arm and the vertical spur of the G meet
to form the chin.
43 | P a g e
Baseline
Although it refers to the space between lines of text, leading measurements are generally specified
as the amount of space from baseline to baseline. Leading is normally measured in points, just like
type.
44 | P a g e
Changing the leading of text affects its appearance and readability. When starting a new project,
experiment with the amount of leading to find what works best. Increased line spacing is also
another way to combat gray pages and introduce more white space into a page layout.
In some programs, to get 10 point type with 12 point leading don’t put 12 points for line
spacing — tell the program to add 2 pts to the point size of the type (10+2=12).
CorelDRAW allows the user to specify an exact point amount or to use a percentage of
the type size.
Normally the leading is measured from the baseline of one line of text to the baseline of the next.
Or, the user could measure it from the top of the caps (Capitals) of one line to the top of the caps
of the next. The amount of space is the same, but it affects the space between the first line of text
and the text frame.
If text frames that have the same leading throughout don’t seem to line up line for line with each
other — check the leading method. A change from one paragraph to the next can also account for
unexplained gaps or tight spaces between paragraphs.
45 | P a g e
Kerning & Tracking
Kerning and tracking are two related and frequently confused typographical terms. Both refer to
the adjustment of space between characters of type.
Kerning is the adjustment of space between pairs of letters. Some pairs of letters create awkward
spaces. Kerning adds or subtracts space between letters to create more visually appealing and
readable text.
Tracking is Overall Letterspacing, Tracking differs from kerning in that tracking is the
adjustment of space for groups of letters and entire blocks of text. Use tracking to change the
overall appearance and readability of the text, making it more open and airy or more dense.
(Leading is the space between lines of type. Tracking refers to the distance between letters in
general, while kerning refers to the spatial relationship between a set of two letters. )
X-Height
46 | P a g e
Typefaces with large x-heights may appear darker, heavier, crowded, and more difficult to read
at body copy sizes.
If changing to a typeface with a smaller x-height is not an option, open up the lines of type by
adding more leading (line spacing), and not using fully justified alignment.
Alignment
In typesetting and page layout, alignment or range is the setting of text flow or image placement
relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes
referred to as text alignment, text justification or type justification.
Basic variations
flush left— the text is aligned along the left margin or gutter, also known as ragged right;
flush right—the text is aligned along the right margin or gutter, also known as ragged left;
justified— text is aligned along the left margin, and letter- and word-spacing is adjusted so
that the text falls flush with the right margin, also known as full justification;
centered—text is aligned to neither the left nor right margin; there is an even gap at the end of
each line.
Force justified - Stretches a single line of text to fill a page or column width.
Note that alignment does not change the direction in which text is read; however text direction
may determine the most commonly used alignment for that script.
Flush left
In English and most European languages where words are read left-to-right, text is often aligned
‘flush left’, meaning that the text of a paragraph is aligned on the left-hand side with the right-
hand side ragged. This is the default style of text alignment on the World Wide Web.
47 | P a g e
Flush right
In other languages that read text right-to-left, such as Arabic and Hebrew, text is
commonly aligned ‘flush right’. Additionally, flush-right alignment is used to set off
special text in English, such as attributions to authors of quotes printed in books and
magazines, and is often used when formatting tables of data.
Justified
A common type of text alignment in print media is ‘justification’, where the spaces
between words, and, to a lesser extent, between glyphs or letters, are stretched or
compressed to make the align both the left and right ends of each line of text. When
using justification it is customary to treat the last line of a paragraph separately by
simply left or right aligning it, depending on the language direction. Lines in which
the spaces have been stretched beyond their normal width are called loose lines,
while those whose spaces have been compressed are called tight lines.
Some modern typesetting programs offer four justification options: left justify, right
justify, center justify and full justify. These variants specify whether the last line is
flushed left, flushed right, centered or fully justified (spread over the whole column
width). In programs that do not offer this extra functionality, justify is equal to left
justify.
Centered
Text can also be ‘centered’, or symmetrically aligned along an axis in the middle of
a column. This is often used for the title of a work, and for poems and songs. As with
flush-right alignment, centered text is often used to present data in tables. Centered
text is considered less readable for a body of text made up of multiple lines because
the ragged starting edges make it difficult for the reader to track from one line to the
next.
Force-Justified
For a special effect, use the “Force justify” alignment option to stretch a single line
of text—a headline, for instance—to fill a page or column width. If you want the
spacing to be more evenlydistributed, create non breaking spaces so that the line of
text would be treated as one long word.
48 | P a g e
49 | P a g e