Presentation is loading. Please wait.

Presentation is loading. Please wait.

TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE BASELINE TYPEFACE TERMINOLOGY.

Similar presentations


Presentation on theme: "TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE BASELINE TYPEFACE TERMINOLOGY."— Presentation transcript:

1

2

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

75

76


Download ppt "TYPEFACE TERMINOLOGY SERIFSANS-SERIFMONOSPACE BASELINE TYPEFACE TERMINOLOGY."

Similar presentations


Ads by Google