Your SlideShare is downloading. ×
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Cascading Style Sheets (Part 2): Fonts and Beyond
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cascading Style Sheets (Part 2): Fonts and Beyond

1,191

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,191
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Font sets allow you to define a list of alternate fonts for those used in the style sheets referenced by your topics. The browser or display device will attempt to use the primary font in the font set. If it can’t find the primary font on the users system, then it will try to use the other fonts in the font set in the order they are listed. All operating systems have a unique set of system fonts and font names. Many of the fonts on your authoring workstation may not be available on the users systems. Depending on your knowledge of your users and their system configurations, you will determine which font to define as the primary font, and how many alternatives you need to provide. In this example, we will create a font set that uses a Windows system font as the primary, but also calls a Macintosh system font and a generic font type for other operating systems.
  •  
  • These are lists of standard fonts that should be available on all Windows and Mac operating systems
  • While the Times New Roman content looks and feels larger, the two samples are both exactly 32pt. The perceived difference is due to the different x-height between the two fonts.
  • Times New Roman has a much larger x-height than Garamond but the overall ascender/descender lines are identical making them both exactly 32pt. The larger x-height of TNR is why it “feels” larger.
  • Tips: Various operating systems display fixed text sizes very differently. The 10 pt text that looks good on your desktop machine will require a magnifying glass to read on a Macintosh. This is due to differences in how operating systems render fixed size fonts. Fixed size fonts will always render differently on different platforms. This is due to different operating systems having different standards for the default points per inch (ppi).
  • Defining the size info for the normal style as 100% will force the browser or display device to render normal text in the browsers default text size. You can then define various heading sizes as a percentage of the normal text – e.g. 115%.   Since individual browsers are written to a particular operating systems, they already take the differing ppi standards into consideration. Using the default browser text size (or a percentage of the default) should provide consistent looking, legible text on any platform.
  • Creating the lines
  • Adding margin and padding values to control space, however the text lines have a large gap between them…
  • Adjusting the line-height for better looking text
  • Other text adjustments, justification and first line indentation
  • Transcript

    • 1. Mike Hamilton V.P. Product Management MadCap Software [email_address] Cascading Style Sheets (Part 2): Fonts and Beyond
    • 2. Agenda
      • Short CSS review
      • Fonts and Font Families
      • Font Sizing
      • The “Box” model
      • Box model adjustments and controls
    • 3. Presenter Information
      • Mike Hamilton
        • MadCap V.P. of Product Management
      Mike Hamilton is the Vice President of Product Management at MadCap Software where he is working on the next generation authoring tool, Flare. Before joining MadCap Software, he was the Product Manager for the RoboHelp product line since the days of Blue Sky Software, eHelp, and Macromedia. Mr. Hamilton joined the RoboHelp team in the mid ’90s as a founding member of the Training Solutions Program team, where he co-authored the certified training materials supporting the RoboHelp family. Mike has over 20 years of experience in training, technical communication, multimedia development, and software development at several organizations including Macromedia, eHelp/Blue Sky Software, Cymer, a leading supplier of laser illumination sources in the semiconductor industry, National Steel and Shipbuilding, and the US Navy.
    • 4. We also have with us…
      • Sharon Burton/Neal Pozner
        • MadCap Product manager/Tech Support
      • Answering your questions during the webinar
        • They’ll do their best to answer them
      • Type questions in the Question and Answer area of the GoToWebinar bar
    • 5. Short CSS Review
    • 6. What Are Cascading Style Sheets?
      • A Cascading style sheet (CSS) document is a simple text file.
      • A CSS file contains a collection of style rules used to control the look and feel of documents.
      • A CSS style rule has two parts, a Selector and a Declaration
    • 7. Cascading Style Sheets (CSS)
      • Style Rules
      Selector Declaration Value Property H1 {font-weight: bold} H1 {font-weight: bold; color: black; }
    • 8. CLASS attribute
      • Class Syntax:
        • In a style sheet:
          • P.myclass { color:blue; margin-left:3px; }
        • In a page:
          • <P CLASS=“myclass”>Text</P>
    • 9. Cascading
      • Three CSS implementations
        • External
          • Linked to an unlimited number of files
        • Embedded
          • Affects only the elements in a specific file
        • Inline
          • Affects only the element applied to
    • 10. Fonts and Font Families
    • 11. Font Family
      • What is a Font Family?
      • A list of primary and alternate fonts for styles used in your document
      • Why are Font Families important?
      • Many fonts on your authoring workstation may not be available on the end users ’
      • If you use a font in your document that does not exist on the users ’ workstation, then the browsers pick what font to use!
    • 12. Font Family
      • Font Family Guidelines
      • Define primary font
      • Define secondary fonts for other operating systems (UNIX, Macintosh, etc.)
      • Define generic font family
      • Order is critical – list is hierarchical
    • 13. Font Family
      • Fonts Common to an OS
      Arial Comic Sans MS Courier New Marlette Symbol Times New Roman Wingdings Microsoft Windows Times Courier Helvetica Symbol Chicago New York Geneva Monaco Palatino Macintosh
    • 14. Font Family
      • Recommended Font Families
      • Arial, Helvetica, Sans-serif
      • Verdana, Arial, Helvetica, Sans-serif
      • Times New Roman, Times, Serif
      • Courier New, Courier, Mono
    • 15. Font Family
      • Example Font Families
      • body { font-family: arial, helvetica, sans-serif }
      • p.code { font-family: “courier new”, courier, mono}
      • Summary: Take control of the fonts used on your content and don’t let browsers make uncontrolled substitutions
    • 16. Font Metrics
    • 17.
      • A h F g x
      Font Metrics The values determining font size: Descender Ascender X-height Baseline Font Size
    • 18. One Size Does Not Fit All
      • “ It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known.“
      “ It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to than I have ever known.“ Times New Roman 32pt Garamond 32pt
    • 19. It’s All in the X-height
      • AhFgx
      AhFgx Times New Roman Garamond
    • 20. Font Sizing
      • Result:
      • Font size determines the physical space that text will require and does not directly correlate to readability or usability
      • No one font size is “ideal” for body text or headings, but is completely dependant on the font in use
    • 21. Font Sizing
    • 22. Font Sizing
      • There are two (and a half*) ways to define font sizes in CSS
        • Fixed Font Sizing
        • Physical Font Sizing (the half*)
        • Relative Font Sizing
        • *Half because Mike made it up
    • 23. Font Sizing
      • Fixed Font Sizing
      • Fixed Font Sizing defines the size of fonts using absolute units such as points (pt), picas (pc), inches (in), centimeters (cm), etc.
      • Because of the differences in how various types of computers display content, Fixed Font Sizing will ALWAYS cause fonts to display smaller on some systems (like the Macintosh)
    • 24. Font Sizing
      • Physical Font Sizing
      • Physical Font Sizing defines the size of fonts using pixels (px)
      • The size of pixels (or “picture elements”) is hardware dependent on your monitor, its size, and its resolution
      • The size of pixels on a 17” laptop at 1920x1200 resolution is very small while the pixels on a 14” monitor at 1024x768 would be quite large
    • 25. Font Sizing
      • Relative Font Sizing
      • Relative Font Sizing defines the size of fonts using relative units such as percentages (%), the em unit (em), numerical values (1-7), and descriptive values (xx-small - xx-large), etc.
      • Relative sizes refer to the font size of the parent element. This allows fonts to scale appropriately to different resolutions, browsers or platforms
    • 26. Font Sizing
      • Relative Font Size Guidelines
      • Define the size for the normal style as 100% to provide consistent looking, legible text on any platform
      • Define heading styles as a percentage of the normal text – e.g. Heading 1=120%, Heading 2=115%, etc.
    • 27. Font Sizing
      • Relative Font Sizing - CAUTION
      • Watch out for the “fun-house mirror” factor that can occur when relative font sizes inherit from other relative font sizes
      • This can cause text to shrink or expand very quickly
    • 28. Fixed Font Sizing
      • body {font-size: 8pt;
      • font-family: Verdana, Arial,Helvetica, Sans-Serif;}
      • h1 {font-size: 12pt;}
      • div {margin-left: 10pt;
      • font-size: 10pt;}
      • li {font-size: 10pt;}
      • p {font-size: 10pt;}
      <html > <head> <link href=&quot;test.css&quot; rel=&quot;stylesheet&quot; /> </head> <body> <h1>Heading 1 Text</h1> <p>A normal paragraph</p> <div> <ul> <li>List item 1</li> <li> <p>List item 2</p> <p>Supporting paragraph</p> </li> <li>List item 3</li> </ul> <p>Closing paragraph</p> </div> </body></html>
    • 29. Relative Font Sizing
      • body {font-size: .8em;
      • font-family: Verdana, Arial,Helvetica, Sans-Serif;}
      • h1 {font-size: 1.2em;}
      • div {margin-left: 10pt;
      • font-size: .8em;}
      • li {font-size: .8em;}
      • p {font-size: .8em;}
      <html > <head> <link href=&quot;test.css&quot; rel=&quot;stylesheet&quot; /> </head> <body> <h1>Heading 1 Text</h1> <p>A normal paragraph</p> <div> <ul> <li>List item 1</li> <li> <p>List item 2</p> <p>Supporting paragraph</p> </li> <li>List item 3</li> </ul> <p>Closing paragraph</p> </div> </body></html>
    • 30. The Box Model
    • 31. The Box Model
      • This page contains three elements
      • Each element has in invisible box around it
      Heading 1 Text This is paragraph 1 This is paragraph 2
    • 32. The Box Model
      • There are three primary attributes to the box model
        • Border
        • Margin
        • Padding
      • Each can be set in total, or by top, bottom, right, or left
      Heading 1 Text This is paragraph 1 This is paragraph 2
    • 33. Common Box Model Adjustments
    • 34. Common Box Model Adjustments
      • To add an indent add or increase margin-left
      • To increase the space above paragraphs or elements add or increase margin-top
      • To increase the space below paragraphs or elements add or increase margin-bottom
    • 35. Common Box Model Adjustments
      • Example:
      • To create a paragraph with lines applied above and below.
      • p.lines
      • {
      • border-bottom-color: #000000;
      • border-bottom-style: Solid;
      • border-bottom-width: 1px;
      • border-top-color: #000000;
      • border-top-style: Solid;
      • border-top-width: 1px;
      • }
    • 36. Common Box Model Adjustments
      • p.lines
      • {
      • margin-bottom: 0.8em;
      • margin-left: .1em;
      • margin-top: 1.7em;
      • padding-left: 0.8em;
      • padding-right: 0.8em;
      • padding-bottom: 0.5em;
      • padding-top: 0.5em;
      • border-bottom-color: #000000;
      • border-bottom-style: Solid;
      • border-bottom-width: 1px;
      • border-top-color: #000000;
      • border-top-style: Solid;
      • border-top-width: 1px;
      • }
    • 37. Common Box Model Adjustments
    • 38. Common Box Model Adjustments
      • p.lines
      • {
      • margin-bottom: 0.8em;
      • margin-left: .1em;
      • margin-top: 1.7em;
      • padding-left: 0.8em;
      • padding-right: 0.8em;
      • padding-bottom: 0.5em;
      • padding-top: 0.5em;
      • border-bottom-color: #000000;
      • border-bottom-style: Solid;
      • border-bottom-width: 1px;
      • border-top-color: #000000;
      • border-top-style: Solid;
      • border-top-width: 1px;
      • line-height: 1.2em;
      • }
    • 39. Common Box Model Adjustments
    • 40. Additional Adjustments
      • To justify text right, left, or center use the text-align attribute
      • If you want to indent just the first line of a paragraph then use text-indent
    • 41. Fonts and Beyond
      • Summary
      • Use Font Families to control any font substitutions the browser may perform
      • There is no magic font size that should be used in all cases
      • Relative font sizing is preferable but takes practice
      • Remember the Box Model when you need to adjust text/element spacing
      • Margin and Padding will be used a lot!
    • 42. Suggested Reading List
      • HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)
      • by Elizabeth Castro
      • ISBN-13: 978-0-321-43084-7
      •  
      • CSS To The Point by Scott DeLoach ISBN-13: 978-0-615-21213-5
      • Cascading Style Sheets: Designing for the Web (3rd Edition) (Paperback) by Hakon Wium Lie and Bert Bos
      • ISBN-13: 978-0321193124
      •  
      • CSS: The Definitive Guide, Third Edition
      • by Eric Meyer
      • ISBN-13: 978-0596527334
      •  
    • 43.
      • Questions?
      Mike Hamilton V.P. Product Management MadCap Software [email_address]
    • 44.
      • Thank You!
      Mike Hamilton V.P. Product Management MadCap Software [email_address]

    ×