1 / 30

Text

Text. Size and typeface of text Bold, italics, capitals, underlines Spacing between lines, words, and letters. Text. The properties that allow you to control the appearance of text can be split into two groups :

satya
Download Presentation

Text

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Text Size and typeface of text Bold, italics, capitals, underlines Spacing between lines, words, and letters

  2. Text • The properties that allow you to control the appearance of text can be split into two groups: • Those that directly affect t ●● he font and its appearance (including the typeface, whether it is regular, bold or italic, and the size of the text) • Those that would have the same effect on text no matter what font you were using (including the color of text and the spacing between words and letters)

  3. Typeface Terminology

  4. Typeface Terminology

  5. Typeface Terminology

  6. Typeface Terminology

  7. Choosing a Typefacefor your Website • Serif fonts have extra details on the end of the main strokes of the letters. • Sans-serif fonts have straight ends to letters and therefore have a much cleaner design.

  8. Typeface Terminolgy • Every letter in a monospacetypeface is the same width. (Non-monospace fonts have different widths.) • Cursive fonts either have joining strokes or other cursive characteristics, such as handwriting styles. • Fantasy fonts are usually decorative fonts and are often used for titles. They're not designed for long bodies of text.

  9. Techniques That Offera Wider Choice of Typefaces • font-family • font-face • Service-based Font-Face

  10. Design • Images • SIFR • CUFON

  11. Specifying Typefaces • font-family • chapter-12/font-family.html

  12. Size of TYPE • font-size • chapter-12/font-size.html

  13. TypeScales • The default size of text in a browser is 16 pixels. So if youusepercentages or ems, you calculate the size of text you want based on the default size of the text used in browsers. • For example, you could scale down to 12 pixels for body copy and scale up to 24 pixels for headings

  14. Units of Type Size

  15. More Font Choice • chapter-12/font-face.html • @font-face • font-family • Src • format

  16. UnderstandingFont Formats • chapter-12/understanding-font-formats.html

  17. Bold • font-weight • Normal • Bold • chapter-12/font-weight.html

  18. ITALIC • chapter-12/font-style.html • Normal • Italic • oblique

  19. UpperCase &LowerCase • text-transform • Uppercase • Lowercase • capitalize • chapter-12/text-transform.html • Underline & Strike • text-decoration • chapter-12/text-decoration.html • Underline • Overline • line-through • blink

  20. Leading • line-height • chapter-12/line-height.html

  21. Letter & Word Spacing • chapter-12/letter-and-word-spacing.html • Kerning

  22. Alignment • Left • Right • Center • Justify • chapter-12/text-align.html

  23. Vertical Alignment • chapter-12/vertical-align.html • Indenting Text • chapter-12/text-indent.html

  24. CSS3: Drop Shadow • text-shadow • chapter-12/text-shadow.html • First Letter or Line • :first-letter, :first-line • chapter-12/first-letter-and-line.html

  25. Styling LINKS • :link, :visited • chapter-12/link-visited.html

  26. Responding to Users • :hover, :active, :focus • chapter-12/hover-active-focus.html

  27. Attribute Selectors • Existence • Equality • Space • Prefix • SubString • Suffix

  28. Summary • There are properties to control t XX he choice of font, size,weight, style, and spacing. • There is a limited choice of fonts that you can assume most people will have installed. • 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 • You can control the space between lines of text, individual letters, and words. Text can also be aligned to the left, right, center, or justified. It can also be indented. • You can use pseudo-classes to change the style of an element when a user hovers over or clicks on text, or when they have visited a link.

More Related