Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Typography in UI Design
1. Typography
•History
•The word, typography, is derived from the Greek words
τύπος typos "form" or "impression" and γράφειν graphein "to
write", traces its origins to the first punches and dies used to
make seals and currency in ancient times, which ties the concept
to printing.
Typography is the art and technique of arranging type to
make written language legible, readable, and appealing when
displayed. The arrangement of type involves
selecting typefaces, point sizes, line lengths, line-spacing (leading),
and letter-spacing (tracking), and adjusting the space between
pairs of letters.
• The style and appearance of printed matter.
• The art or procedure of arranging type or processing data and
printing from it.
2. Scope
In contemporary use, the practice and study of typography is very
broad, covering all aspects of letter design and application, both
mechanical (typesetting, type design, and typefaces) and manual
(handwriting and calligraphy). Typographical elements may appear in
a wide variety of situations, including:
1. Documents
2.Presentations
3.Display typography (described below)
4.Clothing
5.Maps and labels
6.Vehicle instrument panels
7.As a component of industrial design—type on household
appliances, pens, and wristwatches, for example
8.As a component in modern poetry (see, for example, the poetry
of e. e. cummings)
Since digitization, typographical uses have spread to a wider range of
applications, appearing on web pages, LCD mobile phone screens,
and hand-held video games.
3. The Importance of Typography, Part 1:
Fonts Speak Louder Than Words
1. Fonts vs. Typefaces
Fonts, typefaces… what’s the difference? Here’s the easiest explanation to
remember: A font is a grouping of typefaces that have similar
characteristics. A typeface is referring to an individual family member of
that font.
2. Know the Big Players
There are an overwhelming amount of fonts at our fingertips, but first let’s
talk about the main categories of fonts out there.
Serif: Serif is the slight projection at the end of a stroke that’s most commonly
seen at the bottom of letters. If you look closely, some fonts will have
“little feet” on them. This is what characterizes it as being a Serif font. This
allows the eye to flow through sentences with ease.
Sans Serif: Fonts that are Sans have no “feet,” or serif. Take a look at the
diagram:
4. Script: This font type is known for its elegant, light and professional
appeal. You often see this kind of font written on wedding invitations,
diplomas or certificates. Use this kind of font sparingly. It’s not designed
to be used as body copy or used in small spaces.
Display: You often see this kind of font on movie posters, newspapers,
banners, etc. It’s intentionally designed to grab your attention or to give
emphasis to a certain area. This is another font that’s not meant to be
used in large quantities—a little goes a long way.
Hand Lettering: These kinds of fonts have hand rendered characteristics.
Maybe they look as if a child has written it, or as if someone used a
Sharpie or whiteboard marker to jot something down. Designers like to
use fonts like this because they add a human element to the design—
something that people can relate to.
5. Typography rules and terms every
designer must know
Choosing a font
01. Size
All typefaces are not created equally. Some are fat and wide; some are
thin and narrow. So words set in different typefaces can take up a very
different amount of space on the page.
02. Leading
Leading describes the vertical space between each line of type. It's called
this because strips of lead were originally used to separate lines of type
in the days of metal typesetting.
03. Tracking and kerning
Kerning describes the act of adjusting the space between characters to
create a harmonious pairing. For example, where an uppercase 'A' meets
an uppercase 'V', their diagonal strokes are usually kerned so that the
top left of the 'V' sits above the bottom right of the 'A'.
6. 04. Measure
The term 'measure' describes the width of a text block. If you're
seeking to achieve the optimum reading experience, it's clearly an
important consideration.
05. Hierarchy and scale
If all type was the same size, it would be difficult to know which was
the most important information on the page. In order to guide the
reader, then, headings are usually large, sub-headings are smaller, and
body type is smaller still.
Size is not the only way to define hierarchy – it can also be achieved
with colour, spacing and weight.