Download presentation
Presentation is loading. Please wait.
Published byMarcus McDaniel Modified over 8 years ago
3
TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE
4
BASELINE TYPEFACE TERMINOLOGY
5
BASELINE DESCENDER TYPEFACE TERMINOLOGY
6
BASELINE DESCENDER CAP HEIGHT TYPEFACE TERMINOLOGY
7
BASELINE DESCENDER CAP HEIGHT ASCENDER TYPEFACE TERMINOLOGY
8
BASELINE DESCENDER X-HEIGHT CAP HEIGHT ASCENDER TYPEFACE TERMINOLOGY
9
WEIGHTSTYLESTRETCH TYPEFACE TERMINOLOGY
10
CHOOSING A TYPEFACE FOR YOUR WEBSITE SERIFSANS-SERIF
11
CHOOSING A TYPEFACE FOR YOUR WEBSITE MONOSPACECURSIVEFANTASY
12
CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family
13
CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family
14
CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family
15
CSS body { font-family: Georgia, Times, serif;} h1, h2 { font-family: Arial, Verdana, sans-serif;}.credits { font-family: "Courier New", Courier, monospace;} SPECIFYING TYPEFACES font-family
16
RESULT
17
CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size
18
CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size
19
CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size
20
CSS body { font-family: Georgia, Times, serif; font-size: 12px;} h1 { font-size: 200%;}.credits { font-size: 1.3em;} SIZE OF TYPE font-size
21
RESULT
22
TYPE SCALES Now used in programs such as Word, Photoshop and InDesign Pleasing to the eye Developed in 16th century
23
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face
24
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face
25
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face
26
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face
27
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot');} h1, h2 { font-family: ChunkFiveRegular, Georgia, serif;} MORE FONT CHOICE @font-face
28
RESULT
29
CSS @font-face { font-family: 'ChunkFiveRegular'; src: url('fonts/chunkfive.eot'); src: url('fonts/chunkfive.eot?#iefix') format('embedded-opentype'), url('fonts/chunkfive.woff') format('woff'), url('fonts/chunkfive.ttf') format('truetype'), url('fonts/ chunkfive.svg#ChunkFiveRegular') format('svg');} BULLETPROOF FONT FACE @font-face
30
RESULT
31
FONT FACE FORMATS FORMATS Must be supplied in several formats SERVICES fontsquirrel.com provides css rules and conversion LICENSING Fonts subject to copyright and need appropriate license
32
OTHER WAYS TO SPECIFY A FONT HOSTED FONTS Google web fonts Typekit SIFR Relies on Flash Easier licensing CUFON Uses JavaScript Requires appropriate license
33
CSS.credits { font-weight: bold;} BOLD font-weight
34
RESULT
35
CSS.credits { font-style: italic;} ITALIC font-style
36
RESULT
37
CSS h1 { text-transform: uppercase;} h2 { text-transform: lowercase;}.credits { text-transform: capitalize;} UPPERCASE & LOWERCASE text-transform
38
RESULT
39
CSS.credits { text-decoration: underline;} a { text-decoration: none;} UNDERLINE & STRIKE text-decoration
40
RESULT
41
CSS p { line-height: 1.4em;} LEADING line-height
42
RESULT
43
CSS h1, h2 { text-transform: uppercase; letter-spacing: 0.2em;}.credits { font-weight: bold; word-spacing: 1em;} LETTER & WORD SPACING letter-spacing, word-spacing
44
RESULT
45
CSS h1 { text-align: left;} p { text-align: justify;}.credits { text-align: right;} ALIGNMENT text-align
46
RESULT
47
CSS #six-months { vertical-align: text-top;} #one-year { vertical-align: baseline;} #two-years { vertical-align: text-bottom;} VERTICAL ALIGNMENT vertical-align
48
RESULT
49
CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent
50
CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent
51
CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent
52
CSS h1 { background-image: url("images /logo.gif"); background-repeat: no-repeat; text-indent: -9999px;}.credits { text-indent: 20px;} INDENTING TEXT text-indent
53
RESULT
54
CSS p.one { background-color: #eeeeee; color: #666666; text-shadow: 1px 1px 0px #000000;} p.two { background-color: #dddddd; color: #666666; text-shadow: 1px 1px 3px #666666;} p.three { background-color: #cccccc; color: #ffffff; text-shadow: 2px 2px 7px #111111;} CSS3: DROP SHADOW text-shadow
55
RESULT
56
CSS p.intro:first-letter { font-size: 200%;} p.intro:first-line { font-weight: bold;} FIRST LETTER OR LINE :first-letter, :first-line
57
RESULT
58
CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited
59
CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited
60
CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited
61
CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited
62
CSS a:link { color: deeppink; text-decoration: none;} a:visited { color: black;} a:hover { color: deeppink; text-decoration: underline;} a:active { color: darkcyan;} STYLING LINKS :link, :visited
63
RESULT
64
CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus
65
CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus
66
CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus
67
CSS input { padding: 6px 12px 6px 12px; border: 1px solid #665544; color: #ffffff;} input.submit:hover { background-color: #665544;} input.submit:active { background-color: chocolate;} input.text { color: #cccccc;} input.text:focus { color: #665544;} RESPONDING TO USERS :hover, :active, :focus
68
RESULT
69
ATTRIBUTE SELECTORS Existencep[class] Equalityp[class="dog"] Space p[class~="dog"] Prefix p[attr^="d"] Substring p[attr*="do"] Suffix p[attr$="g"]
70
There are properties to control the choice of font, size, weight, style, and spacing. SUMMARY
71
There is a limited choice of fonts that you can assume most people will have installed. SUMMARY
72
If you want to use a wider range of typefaces there are several options, but you need to have the right license to use them. SUMMARY
73
You can control the space between lines of text, individual letters, and words. SUMMARY
74
Pseudo-classes can change the style of an element when a user hovers over or clicks on text, or have visited a link. SUMMARY
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.