-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathType.html
253 lines (252 loc) · 21.1 KB
/
Type.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Art and Science of Typography</title>
<meta charset="UTF-8" />
<link href="typ.css" rel="stylesheet" />
<link href="typ-print.css" rel="stylesheet" media="screen" />
</head>
<body>
<article>
<header>
<div title="The Art and Science of Typography"><h1>The Art and Science of
Typography</h1></div>
<div class="byline">By: Samantha Fritz</div>
<br /><div class="date"> October 23, 2013</div>
<br /><div class="open-quote">
<br /><p><i>“If you could say it in words, there would be no reason to
paint"</i><br />― Edward Hopper (Hopper,n.d.)</p></div>
<figure class="right">
<a href="https://cloud.githubusercontent.com/assets/7362321/4344080/e311f8e0-4074-11e4-9435-ec81679cd756.jpg">
<img src="https://cloud.githubusercontent.com/assets/7362321/4344080/e311f8e0-4074-11e4-9435-ec81679cd756.jpg" alt="Typography" width="300" height="300" /></a>
<figcaption>Keith, J. <br/><i>Typography</i></figcaption>
</figure>
<br /><p>Edward Hopper, a distinguished 20th century American realist painter
(Hopper, 2013), presents the idea of an emotional experience found through the
visual representations of art. Appealing to both the senses and the psyche art
shares a message which can have a profound personal impact.</p>
<p>We can apply Hopper’s message to extend beyond paintings and traditional art
forms into the realm of typography. After all, the visual impact of words can be
just as powerful, if not more, than the content words represent. </p>
<h3><b>What is Typography?</b></h3>
<p>In our daily lives we encounter information in a variety of ways. Appealing to
auditory and visual senses, we hear, see and read information which links
together words to form syntax resulting in the conveyance of messages and ideas. </p>
<p>Just as information is all around us, so too is typography, but what is it? While
there are several working definition, I would like to provide two which
encompass the wide ranging essence and functions of typography.</p>
<p>First, the Merriam-Webster online dictionary states that typography is,<i>“the
style, arrangement, or appearance of printed letters on a page"</i>
(typography, n.d.). </p>
<p>As this definition is specific to bodies of works in a printed format, I would
like to introduce a second definition which describes typography as the,
<i>“design or selection of letter forms to be organized into words and
sentences and printed or displayed electronically" </i>(Typography, 2012). </p>
<p>Taken together we can recognize that typography is the overall aesthetic
representation of a body of text and is created through the process of design,
format, and arrangement of a document’s words and sentences. </p>
</header>
<h3>Brief Historical Overview</h3>
<p>Typography originated with the establishment of printing in the 15th century and was
composed of three typefaces: roman, italic, and black letter, which is also known as
Gothic (Typography, 2012). </p>
<p>Though there is a small body of empirical investigation which looks at typeface and
visual-emotional and visual-psychological impact; previous studies of typography
were largely conducted between the 1920s and 1980s (Brumberger, 208). Regardless of
the extent of literature, these investigations provide substantially similar
conclusions.</p>
<p>The notion of understanding typefaces as a visual message has been present throughout
history. Eva Brumberger provides a concise overview which drawn on examples from
Ancient Greece and Rome wherein, <span class="quote">"serif letterforms were
considered 'symbols of the empire' whereas sans serif forms were considered
symbols of the Republic"</span>
<span class="citation">(Brumberger, 207)</span>. She further discusses how this
notion carried through the Renaissance,<span class="quote">"modem typographers to be
imbued with cultural and national characteristics"</span><span class="citation"
>(Brumberger, 207)</span>. Finally, she offers that typographers by the turn of
the 20th century incurred a movement whereby "most designers wished to eradicate
nationalistic characteristics... [to have] typefaces that were free of historical
and cultural association" (Brumberger, 207). </p>
<p>Traditionally, typography has encompassed elements of design and layout for printed
materials, however, this practice now extends into the electronic world. Blogger and
professional typographer, Kilian Muster proposes the grouping of several typography
features into two major categories: micro-typography and macro-typography (Muster,
2010). Using this framework I will briefly describe the elements of typography, and
explain the emotional and psychological impact of typography. I will then conclude
with reflection on why considerations of typography are essential to accessibility
and usability of print and electronic resources. </p>
<h3>Macro and Micro Typography</h3>
<p>Oliver Reichenstein states "macro-typology [is the] overall text-structure in
contrast to micro typology [which is the] detailed aspects of type and spacing"
(Reichenstein, 2006). Kilian Muster also envisions macro-typography as</p>
<div class="blockquote">“look[ing] at the big picture of communication such as line
length, margins, line height (leading), balance of text and images, how to use white
space, font sizing/weighting, and the layout as such" (Muster, 2010).</div>
<p>For instance, line height, which is referred to as leading is an element which
determines the amount of space between each line of text. By decreasing leading,
lines are closer together, which create a compact text-block, however this may also
"increase the pace of the reader and invoke the feeling of cramped conditions and
claustrophobia, which can be desired when you are using type in this expressive
manner" (Bailey, 2011). </p>
<figure class="right">
<a href="https://cloud.githubusercontent.com/assets/7362321/4344088/e8d293f6-4075-11e4-94ce-e8bb7a6b8f44.png">
<img src="https://cloud.githubusercontent.com/assets/7362321/4344088/e8d293f6-4075-11e4-94ce-e8bb7a6b8f44.png" alt="Typography" width="300" height="100" />
</a>
<figcaption>Naylor, M.<br/><i>Typography Line Terms</i></figcaption>
</figure>
<p>Oliver Reichenstein argues along similar lines of Muster and Bailey, that elements
such as attention to balance of margins, text and images, use of white space, as
well as font size and weight are critical to readability. However, he also suggests
"a great web designer knows how to work with text not just content, he treats 'text
as a user interface'" (Reichenstein, 2006). </p>
<p>In contrast, micro-typology deals with a number of characteristics, as Kilian Muster
suggests in his article <i>What is typography today,</i> which deal(ing) with minutiae of
type and layout, such as selecting the fonts themselves, the kerning (spacing
between letters), spacing (between words) and correct orthography" (K. Muster,
2010).</p>
<p>For instance, kerning distinguishes the space in between letters. In an article
entitled <i>The Basics of Typography,</i> author Christian Bailey suggests that "kerning
is the art of adjusting spacing between characters so that the eye can flow easily
across the copy without being distracted by discrepancies" (Bailey, 2011). </p>
<p>In addition, spacing, also known as tracking, refers to the space between words and
can range from loose to tight, and it is suggested that the best practice in
selecting tracking should be determined by readability (Bailey, 2011). </p>
<p>Taken together, all characteristics of typography is the total structure and design
of a text which, when optimized will also increase the optimization of readability,
accessibility and usability (Reichenstein, 2006). Typography is not simply the type
of font (typeface) one uses (Reichenstein, 2006), just as colour is not the only
element in a painting. </p>
<h3>Impact of Typography</h3>
<p>Internationally renowned for her scholarship on typography, as well as the history of
graphic design, experimental poetry, fine art, and digital humanities <span
class="citation">(Drucker, n.d.)</span>, Johanna Drucker suggests there is a
<span class="quote">"visual dimension of written language" and that those
"visual structures actually produce meaning"</span> (Drucker, 8). </p>
<p>Drucker also views a strong link between language and experience (8). She describes
the selection of different typefaces, in addition to altering both size and weight,
as a method of visually describing characters in her work 26 '76. The typeface
chosen visually expressed the content of language and characters, for instance, "the
bolder face was used for the dark-haired characters, while the lighter face was
reserved for the fair" (10). The techniques used in Drucker's innovative works
illustrate the power of language from a visual perspective. How we view, interpret,
and react to language directly correlates to the typography of the document, not
just the font or weight of letters, but rather the way the text is conceptualized
and executed. </p>
<figure class="right">
<a href="https://cloud.githubusercontent.com/assets/7362321/4344081/e35b342e-4074-11e4-9132-f29ac4d838f1.jpg">
<img src="https://cloud.githubusercontent.com/assets/7362321/4344081/e35b342e-4074-11e4-9132-f29ac4d838f1.jpg" alt="Typography" width="300" height="200" /></a>
<figcaption>PhilosDesign <br/><i>TypoGraphy</i></figcaption>
</figure>
<p>As Eva Brumberger maintains the advent of word processing and desktop software has
increasingly placed design decisions in the hands of technical writers, for "in the
past 'writers have not needed to think carefully about how the look of the page will
affect the meaning of the text'" (Brumberger, 206). Increasingly, a number of
studies and literature report a strong association between a reader's first
impressions of a work and the typography selected to convoy an author's message.</p>
<p>Authors, whether they print their work or display it electronically have the ability
to create a message not only through content, but also through the craft of
designing, selecting, and displaying their text. </p>
<h4><i>Emotional and Psychological Impact</i></h4>
<p>From the observer to the academic there is a consensus of emotional and psychological
impact typography has on a reader. Kilian Muster argues that typography
“accomodat[es] the human mind, making the reader read, the viewer watch (not only
look), drawing and keeping the attention (Muster, 2010). Arguably, readers see the
text before the read it, thus the first impression is created by the typography or
"the arrangement of type" (Bailey, 2011). </p>
<p>Further, Eva Brumberger presents a comprehensive empirical study which investigates
and supports the theory that readers attribute a personality type to typography
(Brumberger, 2003). The results from Brumberger's study conclude that participants
"consistently ascribe particular personality attributes to a given typeface"
(Brumberger, 213). There were eighteen typefaces which "sorted very cleanly into
three categories"; elegance, directness and friendliness (Brumberger, 214).</p>
<h3><b>Future Considerations</b></h3>
<p>So where do we go from here? We have a basic idea of what typography is and how it
affects reader perception; the question now is how do we harness the power of
typography and for what purpose?</p>
<p>The visual structures of macro and micro typology immediately impact viewers
emotionally and psychologically. As such, there are a number of considerations to
reflect upon when we create documents, either in print or on the web. </p>
<p>First, we need to remember that typography, good or bad, provides an access point to
a body of work. As has been suggested, typography presents a message of its own, one
which should be harnessed by authors to accurately and effectively represent the
content of their work. They say a picture is worth a thousand words, and in this
case, a thousand or more words can create a memorable picture, or first impression
of the mood, connotation, tone, and style held within the document's content.</p>
<p>Second, based on the proceeding body of research, evidence shows a strong link
between emotion, perception and interpretation with the selection of typeface. To
this end, further studies should be undertaken to ensure these conclusions remain
valid, as well as provide current empirical data to support the proceeding body of
literature. While many studies reviewed for the purpose of this paper have been
concerned with the characteristic of typeface and the impact on readers, similarly
it would be valuable to investigate the effect of colour on reader emotions and
impressions. Perhaps in creating a base knowledge of the emotional and psychological
effects of various characteristics on readers a concise set of best practices could
be assumed.</p>
<p>That said, it is also important to understand that generalizing the impact of
individual typographic characteristics cannot accurately represent how culture, age,
gender, educational background, and a number of other demographic qualifiers can
also contribute to the overall impact of specific typographic features.</p>
<p>Finally, authors, technical writers, and web designers need to reflect on technical
considerations, such as web browser requirements which can hinder the overall
typography of a work. In addition, we should also consider how the effect of
typography may be conveyed in a way which is accessible to all individuals. For
instance, for individuals with visual impairments, how can we convey the message
both the content and appearance of words create through typography. </p>
<p>When authors create content they aim to convey messages and ideas they have deemed
important enough to be read. Thus, typography chosen to deliver that message is
equally important. The conscious decision to design, select and arrange the
appearance of letter is similar to the way an artist gathers the tools for his
artwork. </p>
<div class="references">
<header>
<h2>References</h2>
</header>
<ol>
<li>Bailey, C. (2011, Jun. 22). "The basics of typography". Design Instruct.
Retrieved October 15, 2013, from <a style="color:#000"
href="http://designinstruct.com/tools-basics/the-basics-of-typography/">
http://designinstruct.com/tools-basics/the-basics-of-typography/</a>
</li>
<li>Brumberger, E. (2003). The rhetoric of typography: the persona of typeface
and text. Technical Communication, 50(2), 206-223. <a style="color:#000"
href="http://eng249.pbworks.com/f/Rhetoric+of+Typography.pdf"
>http://eng249.pbworks.com/f/Rhetoric+of+Typography.pdf</a></li>
<li>Drucker, J. (1984). Letterpress language: typography as a medium for the
visual representation of language. Leonardo, 17(1), 8-16. Retrieved from JSTOR. <a style="color:#000"
href="http://www.jstor.org/stable/1574850"
>http://www.jstor.org/stable/1574850</a></li>
<li>Drucker, J. (n.d.). “Bio". Retrieved October 13, 2013, from <a style="color:#000" href="http://www.johannadrucker.com"
>http://www.johannadrucker.com</a></li>
<li>Hopper, E. (n.d.). “Quotes About Power Of Words". Retrieved October 13, 2013
from, <a style="color:#000" href="http://www.goodreads.com/quotes/tag/power-of-words"
>http://www.goodreads.com/quotes/tag/power-of-words</a></li>
<li>Hopper, Edward. (2013). Goodreads. Retrieved October 15, 2013, from <a style="color:#000"
href="http://www.goodreads.com/author/show/31665.Edward_Hopper"
>http://www.goodreads.com/author/show/31665.Edward_Hopper</a></li>
<li> Keith, J. (Photography). (2005). Typography , Retrieved October 16, 2013,
from: <a style="color:#000" href="http://www.flickr.com/photos/adactio/5817844675/"
>http://www.flickr.com/photos/adactio/5817844675/</a></li>
<li>Muster, K. (2010, Mar. 30). The wonderful world of microtypography I. [Web
Blog] Retrieved October 18, 2013, from <a style="color:#000"
href="http://kilianmuster.com/blog/what-is-typography-today"
>http://kilianmuster.com/blog/what-is-typography-today</a></li>
<li>Naylor, M. (Diagram). (2007). Typography Line Terms, Retrieved October 17,
2013, from: <a style="color:#000" href="http://commons.wikimedia.org/wiki/File:Typography_Line_Terms.svg"> http://commons.wikimedia.org/wiki/File:Typography_Line_Terms.svg</a></li>
<li>PhilosDesign. (n.d.). TypoGraphy[Digital Art], Retrieved October 16, 2013, from
<a style="color:#000" href=" http://teakster.deviantart.com/art/TypoGraphy-101654436"
>http://teakster.deviantart.com/art/TypoGraphy-101654436</a></li>
<li>Reichenstein, O. (2006, Oct. 19). Web design is 95% typography. Retrieved October 21, 2013, from <a style="color:#000"
href="http://ia.net/blog/the-web-is-all-about-typography-period/"
>http://ia.net/blog/the-web-is-all-about-typography-period/</a></li>
<li>“Typograph". (n.d.). Dictionary and Thesaurus - Merriam-Webster Online. Retrieved October 16, 2013, from <a style="color:#000"
href="http://www.merriam-webster.com/dictionary/typography"
>http://www.merriam-webster.com/dictionary/typography</a></li>
<li>Typography. (2012). In Britannica Concise Encyclopedia. Retrieved October 16, 2013, from <a style="color:#000"
href="http://ezproxy.library.dal.ca/login?qurl=http%3A%2F%2Fwww.credoreference.com/entry/ebconcise/typography"
>http://ezproxy.library.dal.ca/login?qurl=http%3A%2F%2Fwww.credoreference.com/entry/ebconcise/typography</a></li>
</ol>
</div>
</article>
</body>
</html>