Expressive Typography in Web Design
-
Upload
zabisco-digital -
Category
Design
-
view
114 -
download
4
description
Transcript of Expressive Typography in Web Design
![Page 1: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/1.jpg)
user experience agency
![Page 2: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/2.jpg)
Design
Expressive typography in web design
![Page 3: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/3.jpg)
Typography
![Page 4: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/4.jpg)
Typography
• TYPOGRAPHY, is derived from the Greek words for
form + wri)ng
![Page 5: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/5.jpg)
Typography
![Page 6: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/6.jpg)
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.
![Page 7: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/7.jpg)
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.
![Page 8: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/8.jpg)
Typography
![Page 9: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/9.jpg)
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.
![Page 10: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/10.jpg)
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.
![Page 11: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/11.jpg)
Typography
![Page 12: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/12.jpg)
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.
![Page 13: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/13.jpg)
Typography
![Page 14: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/14.jpg)
Design
Useful type resources for web
![Page 15: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/15.jpg)
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.
![Page 16: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/16.jpg)
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.
![Page 17: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/17.jpg)
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.
![Page 18: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/18.jpg)
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.
![Page 19: Expressive Typography in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051400/54c813114a7959994b8b465e/html5/thumbnails/19.jpg)
@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.