In this section, we're going to look at some ideas around
the use of typography in the user interface.
Type can work in many different ways,
as text that can be the content for your app or your website,
it can act as part of the interface in terms of labels and
buttons or it could be part of a branding system to give your app or website an identity.
Let's start out by looking at Type as content.
Why do we even read on screens anymore,
when we have video and audio to get our information through?
Well, the answer is that text does quite a few things that it's quite good at.
It's language made physical.
Text's very fast so it's very accessible,
it's quite accurate in terms of trying to describe something,
it's very economical in terms of how it works on a screen,
but most importantly, it can represent what can't be depicted.
If we think about how text translates to texting,
we can see that the things that text is good at get amplified even more.
Texting becomes faster, becomes more economical,
it starts to use images,
emojis in with the text itself.
On screen, we start to change the very structure of language,
as well as changing what we consider to be a typographic character.
Far from being eclipsed by video,
and audio, and images,
text is becoming more of a prevalent means of communication on the screen,
and if anything, it's absorbing imagery into its language.
It's also starting to reconfigure itself,
to alter itself to work in a new digital realm.
Websites, blogs, texts, tweets,
they're all fundamentally text-based still.
That text has to have a visual form,
it has to have a typographic representation.
So, it becomes a design problem,
it becomes part of an interface design.
We don't really think about it so much,
but text is still one of the main vehicles that we use for carrying knowledge,
and for imparting and sharing that knowledge through digital media.
So, Type has an integral role in terms of how it works as content,
but it also has an integral role in terms of how it works as part of the interface,
and this is because Type can do things that images and icons can't.
So, we can ask ourselves the same question.
Why do we need Type as part of an interface?
Why don't we just have icons for everything?
A lot of the answers to why we have Type as part of
our interface are the same as why we use text for content.
It's language made physical,
and it has all the advantages of language, Type's very fast,
it's accurate and clear meaning, and economical,
and also, again, it can represent what can't be depicted.
So, let's look at some examples.
Type is fast to read.
When we see a Stop sign, for instance,
we know exactly what it means straight away.
We barely even have to read the Type,
we recognize the form of the Type,
and it has a very accurate and clear meaning.
There's no confusion there.
There's no ambiguity at all.
Stop only means one thing,
"Stop." And Go only means one thing, "Go."
There's absolutely no gray area there.
There's no interpretation, and this can be
very useful in terms of designing an interface.
Language is very economical in terms of its meaning,
not just a single word either.
We can take a letter and we can use that to represent something.
So, we know that this I stands in for information, for instance.
But we also know that a P,
part of the same alphabetic system,
has a totally different meaning,
and mean something else.
There's a level of modularity and flexibility to language,
we can add another letter to that P and have the meaning totally change,
even though the form itself hasn't changed.
In fact, the form of all three of these images is the same,
but the meaning is very, very different.
So, language has a great deal of flexibility in terms of how it works.
It can also be useful in terms of interface design
because it can work at greatly different scales.
Sometimes, images don't have that same flexibility,
and we end up making icons or symbols,
often out of Type,
but most importantly, Type can represent what can't be depicted.
It takes a little moment to unpack what this statement really means,
but think about, as an example,
a word like "democracy."
How would you represent this word visually?
It would actually be quite difficult.
There's not really a single iconic image to represent democracy,
it's always going to be a little bit more ambiguous as an image,
than it is when it's represented with language.
Even the words surrounding democracy that might describe it,
government, voting, elections, politics,
when you turn those into the form of imagery,
they still have a lot of overlap between how they might be read.
So, words are great for the accurate representation of
complex non-visual concepts like democracy, for instance,
and this is great for an interface designer because quite often,
we'll be trying to show things that are complex non-visual concepts,
and these appear in a lot of different places,
in menus, naming, buttons, instructions.
In fact, Type is everywhere in our interface because it's still
the fastest and most accurate way we have to communicate complex and specific ideas.
Finally, let's look at Type as branding.
Here, Type has a slightly different job to play.
It's much less about it being content,
and about it conveying what it actually says,
and it's much more about connotation.
In other words, what does the form of the Type look like?
What kind of things does it suggest?
This can be a way to create a sense of identity or individuality,
and this can lead to a visual typographic brand, that can be really,
really helpful, in terms of making your app or
your website stand out and look different for
everybody else or it can be a way of making
it build sympathy to a certain kind of content.
The combination of idiosyncratic or individual form,
and the right kind of formal connotations,
can lead to branding typographically,
most often expressed as a logotype.
So, if we look at some examples here,
we could take some large companies and see what they look like without any form.
Typographic form is a lot like clothes for words,
the meaning is still there,
but it's dressed up with a different surface, a different form.
I'm willing to guess that it's hard for you to look at these words and not think
about the intrinsic form that these logotypes are normally seen in.
We're used to seeing Adidas look a certain way with it's round repetitive forms.
We're use to seeing Nike as both a logotype,
the typographic form, and as a mark or a logo.
In other words, in this case, the swoosh,
and we see those things separately,
and recognize them, but we also see them together.
The logotype and logo work together in harmony to form a single lockup.
There are other systems that you can use to think about,
to create an identity typographically.
Some of them could be color dependent, for instance, Netflix,
we see as being red and black,
and when we look at the logotype,
and then we look at a smaller version of it,
a bug or a button,
we can see that it's not the same letter form that's there,
it's actually the color that is creating
the continuity between the two different versions.
You can take this idea of flexibility,
or an extended system to an even greater extent,
and think about a much more modular system
that can be applied to a lot of different artifacts,
or might even be a system where things change depending on the time of day,
or the time of year.
I think Google is a good example of a wider system,
in terms of other new identities applied to a lot of different components,
but also how they create a set of sympathetic imagery that's forever changing.
The big takeaway here is that Type matters.
If we turn these logotypes back to a more generic black and white form,
we can see how much they lose,
in terms of being recognizable,
and in terms of their individual identity.
Michael WorthingtonFaculty, Program in Graphic Design
