Join Joseph Lowery for an in-depth discussion in this video Defining a percentage-based page with ems, part of Typography with CSS in Dreamweaver.
- View Offline
- Exercise Files
As noted in the introductory video for this chapter, the percentage-based…ems have a lot to recommend them, including easy scalability and better accessibility.…However, defining your em sizes to match your pixel-based comps can be a hassle.…Let me explain why and show you a way around that issue.…If no percentage font size is declared, the default is assumed to be 100%.…While this is fine, it makes it difficult to relate ems to pixel sizes.…Let me walk you through the math.…
The default font size for text in browsers is equivalent to 16 pixels.…If a comp calls for text that's 14 pixels tall as with the paragraph text that…we see here, you'll have to figure out the percentage of 16 that is equal to 14.…While the math isn't really that difficult, it's 14 divided by 16, it's a pain…to have to figure out for every heading, paragraph, table cell, and list item in a design.…A far easier approach is to set the initial overall font size to 62.5%.…
This has the effect of establishing a Base 10 System because 62.5% of 16 is 10.…
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Skill Level Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Modifying Type in Dreamweaver
2. Establishing the Proper Type Unit
Working with pixels2m 34s
3. Choosing Site Typefaces
4. Integrating Color
Applying color to type4m 52s
5. Selecting Type Styles
6. Using Advanced CSS Text Effects
7. Structuring CSS Text
8. Defining Lists with HTML and CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.