[ SXSW Bios ] #sxsw #sexytype (Archive)
Brief
A rounded sans-serif with a letterpress look? A chunky slab serif in three-dimensional perspective? Grungy, patterned, or even blurred text? These effects (and more) used to be the domain of print designers or gigantic, inflexible PNG images. But no more! Using CSS3 and @font-face, I’ll show you how to get these looks with live demonstrations and discussion.With growing support for @font-face and CSS3 in all of the mainstream browsers, advanced typographic and visual effects are now possible on the web. Even better, the text remains SEO friendly and easily editable and translatable as well.In this session, we’ll take a look at some well-known (and little-known) examples of great typographic and visual style from print and online. We’ll delve into the typographic origins of these looks to help us understand why they work, and we’ll explore exactly how you can use web standards to get the same look on your site.
Notes
@smcbride (typekit)
Code Examples: Github
Ideas v. Forms
A design system is anything that turns an idea into a form (a specific embodiment). Design systems can be channel-based (print design system, web design system, mobile design system, etc.)—different in the details but still sourced from the same idea.
Unfortunately, we tend to go from an original form to a new form without a new design system tied back to a core idea. Don’t imitate forms: translate ideas. Specifically,
We’d rather abstract from the original form back to the design system (e.g., print) that created form, try to determine the original idea, then map that through a new design system (e.g., web) to generate a new form.
Article: Shading with CSS
@font-face:
Web-safe fonts can’t provide the elements we need in our new design system, so we have to use the CSS3 @font-face specification (download fonts from the web). FontSpring’s bullet-proof @font-face syntax. Licensing issues — you need a different kind of license to use fonts on your websites. Typekit provides a JS wrapper to use fonts with a yearly subscription.
Watch out for file size (many fonts = large download). 6 fonts take up about 144 Kb (a lot smaller than the equivalent number of images).
Browser support for HTML5/CSS3 features: caniuse.com
- Setup the HTML doc with a near-to-style web-safe fallbacks (progressive enhancement)
- Load the typekit font script
- Modify CSS
- Profit.
text-shadow:
horizontal offset, vertical offset, blur, color
Can add multiple shadows to the same text-shadow rule to begin developing a relief shade.
mask:, -webkit-mask:
Non-standard (webkit). Similar to the background: property, but uses the image as a mask based on opacity.
rgba() (color)
red, green, blue, opacity (alpha). fallback to a traditional color: property.
:before + content
Pseudo-element :before with the content: property = generated content. If you use jQuery to capture the original content, you can duplicate the content to use in new ways that changes when original content changes.
Responsive Design
Fluid layout: horizontal measurements in %, FitText.js, viewport meta tag for mobile devices.
Flexible images: background-size element “cover”
Media queries: w3c spec, choose breakpoints (resolutions/widths that trigger a switch in a media query) based on the actual places your layout breaks.