After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied CSS hyphenation to all paragraphs: p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my... Read more
After my last post on mask-image, I needed to create a few more examples for an upcoming tutorial. I had to abandon this one because it wasn’t straightforward enough—though I quite like how it turned out, so I thought I’d share. Remember this property is sadly webkit-only at the moment. Ground Control Note: If you’re on any responsive width other than 100% (full), the masked shadows won’t line up.... Read more
I recently wrote about Controlling Web Typography and focused on CSS pseudo selectors & down-to-the-letter control. As a web designer, I want the same level of control over type that print designers have, including texture. There are currently 2 webkit properties that I’ve grown to love and hope gain more traction & browser support. My favorite would have to be background-clip:text, but it currently degrades poorly. A close... Read more
I’ll be doing double duty this June at Converge SE, teaming up with my Paravel cohorts, Dave & Reagan, for a workshop called Designing with Type on Friday, and speaking about Controlling Web Typography on Saturday. The plan will be to cover a lot of ground from the practical to the progressive on each day, with a focus on how you can make the most out of designing... Read more
Lettering.js was built to solve a problem. As web typography improves, web designers want the same level of control print designers have. Just as we’ve moved beyond Helvetica and Times New Roman, we’ve begun to think about web type in finer detail than <h1> or <span> tags currently (semantically) allow. For example, when Dave Rupert and I prepared to markup the 3 sites for the Lost World’s Fairs... Read more
In certain situations, RGBa (red, green, blue, alpha) and HSLa (hue, saturation, lightness, alpha) color values can save the day. It’s widely supported in Chrome, Safari, Firefox, Opera, and IE 9, and when working with box-shadow, text-shadow, or when needing to apply a reduced opacity to a color without affecting the rest of an element, RGBa and HSLa can’t be beat. Dave Rupert and I recently put each... Read more
