Responsive Typography: Using Type Well on the Web
Jason Pamental
Language: English
Pages: 110
ISBN: 1491907096
Format: PDF / Kindle (mobi) / ePub
After examining typography fundamentals and the evolution of type on the Web, author Jason Pamental provides useful approaches, real examples, code, and advice for making your type performant, progressive, proportional, and polished—the primary ingredients of responsive typography.
- Understand how type plays a vital role in content-first web design
- Weigh the tradeoffs between self-hosting and using a font service to get the best performance for your site
- Get your type on the screen fast by designing for Progressive Enhancement
- Use a responsive relative scale to adjust proportions between typographic elements for any device or resolution
- Polish your type with ligatures, kerning, and other techniques to create rich, textured reading experiences
The Art of SEO: Mastering Search Engine Optimization (2nd Edition)
Guide to Web Development with Java: Understanding Website Creation
and double), encoding of special characters and even replacement of things like a -- (double hyphen) with a true “en” dash. Figure 8-1. Caution: editors may spontaneously kiss you when you show them how you can automatically prevent orphans in their CMS If you’re using Drupal, there’s even a module for that. There’s a plugin for WordPress, but as of this writing it has not been updated in quite some time. Aaron Gustafson has also created a port for Expression Engine. Recently, though, I came
Up Your Fallback CSSfile formats, Font Format Finagling: Who Shows What and Where–Font Format Finagling: Who Shows What and Wherefile size, There Is No “Content First” Without Typography, File SizeFirefox, Type 101: A Font Is Not a Typeface, Gotchas tag, 1990s–2007: The Angry Designer Years@font-face, The Evolution of Type on the Web, Finally: @font-face–Font Format Finagling: Who Shows What and Where, Buy or Borrow: The Designer’s Dilemma–First Things First: Weigh the Dollars and
with typography when coupled with Responsive Web Design. It’s not until the design starts to scale that you realize how important proportions are between headings and body type as screen sizes change: Basic default size should be left to the OS and device, but screen size should influence the proportions of headings and navigation. One scale does not serve all screens! Polished Design is the details, and great typography is no different. Don’t stop with just getting the fonts on the page.
somewhat chunkier feel to the typeface. Slab serif faces are often used for headings and display titles. Terminals A term that refers to the ends of the strokes of letterforms. Some typefaces, such as Helvetica, have perfectly horizontal terminals in letterforms such as a lowercase “a” or “c” which tend to make them look more closed. Others have a slightly angled terminal, which can impart a more open feel and can aid legibility, especially at small sizes. Words Have Meaning, but Letters Have
with mathematical accuracy. The trouble is, those curves must translate to dots in order to be drawn. And when type sizes change, resolutions change, and pixel densities change, then the map of dots that corresponds to the curves defined in the font are different every single time (see Figure 2-1). Here is where the philosophical differences come in. In order to comprehend the full extent of our dilemma, it’s necessary to understand the different approaches taken by Apple and Microsoft when it