expressive typography in web design
DESCRIPTION
TRANSCRIPT
user experience agency
Design
Expressive typography in web design
Typography
Typography
• TYPOGRAPHY, is derived from the Greek words for
form + wri)ng
Typography
Typography in web design
ExecuCng typography well in web design can be a great challenge. You need; • a certain level of sensibility • a lightness of touch in execuCon • a understanding to avoid any overtly
'heavyness' in your use of type.
Font selecCon
Your font selecCon must have relevance to your messaging, to some degree, and be executed in layout so users don’t feel any detachment between; • type • overall design • user experience.
Typography
Typography in modern web
Typography as a design element has great emphasis and momentum within the web. As the web itself evolves, coders conCnue to break new boundaries, allowing type to be used in; • new • interesCng • interacCve ways.
Now be expressive
Web designers have the ability to use type how they want within the overall site design. Whether the design dictates that type is very much the lead element, or a subtle device, the ability to be as expressive as you wish is there.
Typography
Type emoCon and tone
Whoever is performing typography; • graphic designers • graffiC arCsts • copywriters • art directors • comic book arCsts • compositors or typeseMers
Whatever medium used (film, television and online), type can be used in a great way to add emoCon and tone to communicaCon.
Typography
Design
Useful type resources for web
The Expressive Web
beta.theexpressiveweb.com • a resource and showcase for some of
the newest, and most expressive features across the web today -‐ of which, type, is just one of the areas explored
• currently at a beta release, keep checking back here as I see this already being a great insight tool.
Fuzzco
fuzzco.com • a great sense of the culture across
the agency, what they stand for, working as a showcase for their own design talents
• a example of type use that creates a strong overall site tone, without being overtly dominant and masking the messaging, the selecCon of type carries the messaging through in a stronger way.
Warchild
warchild.org.uk • overall tone of the design (type incl.)
carries the site in a non-‐patronising way, at the same Cme not dumbing down the message
• colour works well with type, together give a real sense of the danger and seriousness of whats happening, while designed in a engaging way
• just because you have a very real humanitarian situaCon doesnt mean you have to present the messaging in a straight way.
Google web fonts
google.com/webfonts • a free resource from Google,
containing 100s of open source fonts that happen to be web opCmised and ready to use.
@font-‐face
font-‐face.com • keep your eyes peeled for what new
twist to the service @font-‐face come up with in response to Google web fonts.
Marcus Marritt [email protected] 0203 1511 330
Thanks