Web Typography 2009
by Jason CranfordTeague on Jan 16, 2010
- 6,263 views
Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limi...
Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.
Accessibility
Categories
Tags
More...Upload Details
Uploaded via SlideShare as Adobe PDF
Usage Rights
Statistics
- Favorites
- 20
- Downloads
- 278
- Comments
- 0
- Embed Views
- Views on SlideShare
- 4,800
- Total Views
- 6,263
opalstudio
Limited styles, limited controls, and most importantly limited font-family choices.
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
That's what design is about
Design is about overcoming the limits of the medium.
I am here today with no less of a task than to change the way you view the limitation of Typography using CSS in regards to the limited font-family choices we seem to have.
When you choose your font, you do not change the meaning of the letter.. a T is still a T, but by changing it's skin, you change what it is saying, adding another level of communication.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
If the browser does not have helvetica, it will use arial, if no arial it will use the default sans-serif font.
and hinted by Tom Rickner for the Microsoft Corporation, as the serif companion to the first Microsoft sans serif screen font, Verdana. The initial version of the font was released on November 1, 1996 as part of the Core fonts for the Web collection. Later, it was bundled with Internet Explorer 4.0 supplemental font pack.
http://en.wikipedia.org/wiki/Georgia_%28typeface%29
http://en.wikipedia.org/wiki/Verdana
http://en.wikipedia.org/wiki/Verdana
BUT there are other fonts that we can rely on to be installed depending on the operating system.
Similar to Frutigar
Similar to Frutigar
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
So... How do you know what fonts you can use?
Font foundries like Emigre
We can (sort of)
I can place this file on my server, and use @font-face in my CSS to downlaod it
I can place this file on my server, and use @font-face in my CSS to downlaod it
I can place this file on my server, and use @font-face in my CSS to downlaod it
I can place this file on my server, and use @font-face in my CSS to downlaod it
I can place this file on my server, and use @font-face in my CSS to downlaod it
I can place this file on my server, and use @font-face in my CSS to downlaod it
Think of images. We download images because they all support the same basic image format types, GIF, JPEG, PNG
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
-->
OpenType is a scalable format for computer fonts (also sometimes known interchangeably as "typefaces"), initially developed by Microsoft, later joined by Adobe Systems.
BUT THEY LACK Digital Rights Management. so anyone can use and take them even if they didn't purchase them.
-->
-->
Intellectual property rights are a bundle of exclusive rights over creations of the mind, both artistic and commercial. The former is covered by copyright laws, which protect creative works such as books, movies, music, paintings, photographs, and software and gives the copyright holder exclusive right to control reproduction or adaptation of such works for a certain period of time.[1]
-->
Some end-user license agreements (EULAs) accompany shrink wrapped software that is presented to a user sometimes on paper or more usually electronically, during the installation procedure. The user has the choice of accepting or rejecting the agreement, without reading it first. The installation of the software is conditional to the user accepting the agreement and thereby agreeing to abide by its terms. Once the user has installed the software, then he/she has the opportunity to read the license agreement in detail.
recently tried to make it an open standard.
resistance from the rest of the browsers.
Barrier to entry
Embedded OpenType (EOT) fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot".
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
SO WHY DON'T WE SEE DOWNLOADED FONTS USED EVERYWHERE?
Now e need a way to use these different sources together using...
Now e need a way to use these different sources together using...
Now e need a way to use these different sources together using...
Now e need a way to use these different sources together using...
640x480 - 800x 600 Screen sizes