Join Laura Franz for an in-depth discussion in this video Understanding ems, part of Typography for Web Designers.
Up until now all of our text has been set using pixels.…Pixels are great, because they give us control over the design and because…anyone with previous experience with pixel-based software like Photoshop already…knows how to think in pixels.…For example, here is a low- quality pixel-based image.…We can see the pixels creating a jagged edge, but pixels pose a problem.…They're not flexible.…A pixel is a pixel and they cannot be re- sized or scaled in all browsers or on all devices.…
For example, in Internet Explorer text set in pixels cannot be scaled.…This can pose a problem…if a reader needs their text bigger or smaller but doesn't want to change the…overall layout of the page. Thus we have ems.…What is an em?…Think of an em as a square.…It can be used to set height or width just like a pixel. But what does 1 em mean?…The basic em equals 100% of the browser's default font-size which is 16 pixels.…
So 1 em is often 16 pixels, but an em is more than that.…An em is a relative unit of measurement.…That means it allows us as designers to set a measurement relative to…
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes
Skill Level Appropriate for all
Q: Where can I learn more about graphic design?
A: Discover more about this topic by visiting <a href="../../../discover/graphic-design">graphic design on lynda.com</a>.
1. Using Fonts to Communicate the Meaning of a Word or Headline
2. Using Fonts for Text
3. Maximizing Readability
4. Visually Chunking Text
5. Shaping a Page Using Typography
6. Shaping a Traditional Typographic Page
7. Shaping a Modernist Typographic Page
8. Attending to the Typographic Details
Additional resources3m 9s
- 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.