Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Margaux Flores
11,453 PointsOn designing type, is it really better to use CSS3 over just simply having certain elements as images?
So hear me out. I was reading this fantastic article from TypeKit Practice and halfway through, it just hit me that we’ve come along so far that we can now achieve effects and animations in type purely through CSS3 unlike in the old days where if we wanted it to look a certain way, the best way would have been to just do it in Photoshop and <img> tag it.
And then I got to this particular example where the CSS3 was quite complex (from a newbie’s POV at least) and it got me wondering if it’s really better or… healthier (?) in terms of creating quick-loading sites that browsers can easily read to design type this way cause essentially if you look at the code, you can imagine that all of this has to be compiled to achieve the end look. So I was wondering if anyone here can point out other pros as to why this is better than doing it the old school way of just designing it as an image file and leaving it all to one line of code.
TypeKit Practice Article - https://practice.typekit.com/lesson/using-shades/ Codepen Example - https://codepen.io/timbrown/pen/DzyeE
1 Answer
Max Senden
23,177 PointsHi Margaux,
The only reason to present text as an image is to keep loading times to a bare minimum (although this is debatable). As far as user-experience it's a horrible implementation. It's not responsive and cannot be interacted with (select, copy-paste, read by screenreaders, and so on). There are workarounds for example by using alt text (which you should always do with images) or by hiding the actual text behind the image so that it can be selected... but things soon become a cluster of complexity.
A better alternative to JPEG, PNG or GIF would be to present the font you want as an SVG (i.e. in small pieces of text, e.g. a brand name/logo). This way the user doesn't have to load in any webfonts and you still have total control the way it looks and behaves like.
In short, keep the webfonts on your website limited to max. 2 or 3. If you code your website well the loading times should be minimal.