I recently wrote a tutorial on texturizing web type for .Net magazine (Issue 221). One of my favorite CSS properties for text, mask-image, is covered in-depth from creating a semi-transparent texture in Photoshop to implementing it with HTML & CSS. To take things further, I added in a CSS transform to get that skew, then dropped in FitText to make it all scalable for use in your fluid/responsive layout.... Read more
Gene Crawford from UnmatchedStyle asked Paravel to design a page for this year’s CSS Off competition. Over 5,000 front-end developers have entered to show off their skills by taking a PSD we designed and coding it out. Entries will be judged and prizes will be awarded. Awesome! After a morning of team planning and intensive YouTube research, we settled on building a page for a fictitious gameshow on the... Read more
Since upgrading to Lion I’ve noticed a font rendering issue with Safari 5.1. Sites were randomly displaying some web-safe and web-served fonts with the Last Resort font, AKA “Block-A Characters.” These can appear for a variety of reasons, but I was getting them because Safari 5.1 has a compatibility issue when rendering fonts for those who use 3rd party font management apps. I use Font Explorer and love... Read more
The present & future of web fonts is looking awfully bright. Quality and Quantity are increasing, though there are still a few fonts I have to pass over when designing for the web. While I don’t know if all of these are in the pipeline to become web fonts, I have to believe that all type foundries are moving in that direction so that their fonts remain useful.... Read more
Dave, Reagan and I had a great time conferencing at Converge SE this summer. If you missed it or want a refresher you can check out the example site from our Designing With Web Type workshop on GitHub, and view the slides from my talk, Controlling Web Typography on SlideShare. Thank you to Gene Crawford, the ConvergeSE team and to the attendees. We had a fantastic time.
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