CSS3, Web Fonts and Icons

We’re really lucky to be working in an industry like the web industry. Nowadays, we have so many new tips and techniques and ways of working all of the time. We’re also really lucky that we’re in an age where, as these new technologies are introduced, our browsers can (for the most part) be pretty quick to catch up, so we get to put these new technologies into our designs (and gasp, even into client work!) more than ever before.

CSS3 is one of those (slightly) new great technologies. Along with it have come a whole host of things which make our lives easier as both designers and developers. As our browsers are getting better, we can be more adventurous with our ideas and designs that we create.

However, we’re also in an age where we’re designing for more users, devices, browsers and technologies than we ever have done before. Before the age of the smartphone, the tablet and the internet-connected fridge there was really only one way to access the Internet; through a normal computer. And the most common screen resolution for a time was 640px x 480px, or 800px x 600px!

Nowadays we have thousands of different devices, screen sizes and contexts that we’re expected to cater for. If we only look at the screens and screen sizes we have to cater for, we have thousands of mobile devices (mobile phones, smartphones, tablets, netbooks etc), Retina screens, standard screens, high definition screens, small and large screens, and so, so much more.

While it can be really difficult, the amount of things we have to cater for is only going to get bigger and bigger, so it’s something that we have to adapt to and learn from.

---

Our Process Must Adapt

And what does this mean for our process? It is an impossible task to test your website on every single device made that your site could possibly be viewed on. Instead, we have to effectively change our process for the better. I’m sure, as a developer, you’ve had to do this yourself, and it’s the same as a designer.

We might have to take extra steps to improve our design process for the better. One example of this is getting more comfortable in iterating design ideas for typography (for example) in the browser, quicker. Whatever it is, I can guarantee that your process may need to adjust slightly.

---

CSS3

Although it feels like CSS3 is a more recent thing, with the adoption of many of the popular CSS3 techniques being used in the last couple of years, the earliest drafts for CSS3 was as early as 1999; fourteen years ago!

Unlike previous CSS specifications (such as CSS2), CSS3 was divided into several modules – and in mid-2012 there were over fifty modules published. Four of these in particular have been published as recommendations, where the module has undergone a massive amount of reviewing and testing before being recommended for full use. The four W3C Recommended CSS3 modules as yet are:

• Media Queries
• Namespaces
• Selectors (Level 3)
• Colour

Other modules, such as “Background and Borders”, “Multi-Column Layout”, “Flexible Box Layout” are currently at the “Candidate Recommendation” level, where the W3C is happy with the significant features of that module.

At this level, it’s thought that implementations (by browsers, for example) should drop the browser prefixes that they have in place. Other modules that are being looked at include “CSS Animations”, “CSS Transforms” and “CSS Filter Effects”, but these are all in “Working Draft” status (as are many, many other modules!) and are therefore not quite as ready as those with the CR status.

However, alongside the four main W3C Recommended modules, there are many popular CSS3 techniques that we see often in our websites today. These include:

• CSS Gradients
• Border-radius
• Box-shadow
• Multiple Backgrounds
• Opacity (rgba)
• Animations & Transforms

Let’s look at each of these in a little more detail.

CSS Gradients

The introduction of CSS Gradients has meant that instead of using an image background to create a particular look on a website, for modern browsers you can use CSS3 instead.

This is great as it saves page weight and also ensures that you’re keeping performance to a minimum by not requesting as many images.

Border Radius

Border radius means we can now include rounded corners for modern browsers in our designs without having to resort to using images for each one. And imagine if you had a background image which had a border, rounded corner, gradient and a shadow – those sorts of things were a nightmare in the past, whereas they are now easier to implement for browsers that support them.

If you’re lucky, you’ll get clients that also understand about progressive enhancement, and if not then you can explain it to them and educate them. In today’s world where many people own smartphones, tablets and computers (or a combination of that and more) people should expect and understand that websites are not all made to perform the same on every device or screen they view it on. To a degree, they will understand for certain aesthetic visuals to degrade gracefully for other browsers. Rounded corners being one of them!

Box-shadow

With the introduction of the CSS3 box shadow, we can now have drop shadows for our box elements. There’s also a text version that we can use (text-shadow, if you can’t guess) for our content as well.

You also have the choice to have both an inset or standard set gradient as well, meaning that we can – yep, you guessed it – abandon the use of images for these styles once more.

Multiple Backgrounds

CSS3 also introduced us to being able to reference multiple background images in our code. This is great, as it means we can have more fun with layering background elements on top of one another to create fancy effects that we otherwise might have struggled to recreate in CSS or with one background image alone.

Opacity (rgba)

Finally – from IE9 upwards and with all other modern browsers, we no longer have to create a small, repeatable, transparent background image!

This alone was enough to make me love using CSS3, and simply means we can be free to use transparency in our designs where we feel it’s appropriate.

Animations & Transforms

Animations and transforms are great; along with transitions, they help us to add much more interactivity into our websites. While these can be difficult to display in our designs, it’s definitely a way that we can use CSS3 to our advantage to bring websites to life.

---

Web Fonts (@font-face)

The inclusion of the @font-face rule for CSS3 was brilliant for designers, as it meant we can be a little more experimental in the typography we use in our designs. In essence, using web fonts has allowed designers a lot more freedom to express creativity through their work.

Why Web Fonts are Great

Web fonts are great, as they offer us a new way to create visually stunning websites. There is such a wide variety of choice for the fonts that we can now use in our websites, if not in the hundreds, most definitely into the thousands.

Not all of them will be great, and there are definitely some favoured more by many, but there are so many gems that you can find to use in your designs that look just plain nice compared to some of the older, web safe fonts.

Web fonts also offer us a safer way to work responsibly with our responsive designs. Do you remember the day when “fancy” headings were created with alternative fonts (that weren’t deemed web safe) and they were placed as images or image backgrounds? Web fonts mean that we can safely abandon that practice and leave it behind, knowing that we will have beautiful websites with fully accessible and scalable fonts.

How Can I Use Web Fonts?

With the introduction of web fonts and @font-face, a few services popped up that help us to implement web fonts into our websites. Those services include:

• Typekit
• H&FJ cloud.typography
• Fontdeck
• Fonts.com
• Google Fonts

And even with just so few services, there are many ways to implement these into your development process. Some use JavaScript and some use pure CSS to load the fonts in. But what about the designers workflow; how can working with web fonts work in static mockups?

It’s a little bit of a tricky one, really, as there aren’t many ways to integrate the web fonts you use with the graphics software you might use. Typekit have recently announced plans to integrate a Desktop Sync with Adobe Creative Cloud, and started rolling it out to select users.

Due to Typekit being acquired by Adobe, they now have this way of being perfectly in sync with Photoshop and Illustrator and all the other Adobe products, which is great news for designers.

Other than that, there’s no other way that we can easily integrate the web fonts we choose to use in our mockups, unless we do it by buying the standard, “desktop” version of the font separately to the web font. If you’re not looking after the brand for a website, then this can start to become a bit expensive and uneasy to manage.

One other option you have when working with typography is to jump into the browser quite quickly; either through working with a service such as Typecast, as explained in the previous Typography sections of this series, or by purchasing the web fonts on your preferred service and seeing how they react with your content in a prototyped version of your design.

However you decide to work with web fonts in your design, you can be guaranteed that you will have a more creative, better looking end result for your users to enjoy and that you can be proud of.

---

Icons

Icons are a big thing at the moment; one good thing that is happening in the world of the “trends”. I think icons and visual imagery that can fall under that, for example a logo, are a great tool to help guide your users around a website. Used alongside text, they can be a great visual aid.

However, in a world where we need to ensure that images and layouts work well across so many devices and screen sizes, we need to make sure that our icons and imagery works well across the board and is more future-proof. Luckily, there are a couple of options available to us that can help us make sure we do that.

PNG

The lovely PNG (that offered us a way of including a transparent background in an image, that wasn’t a dodgy GIF) is one sure-fire way to work with icons in your websites.

But don’t forget; if you’re wanting to serve beautiful looking images to a Retina crowd, then you’ll need some sort of CSS or JavaScript backup to make sure that you do that.

Working with PNGs shouldn’t often change anything in your workflow either. You can simply save out any images you’ve created at the required size and save straight from Photoshop.

PNGs also work well for scaling, as long as you scale down. If you have to scale an image up (which sometimes happens when you go from a larger viewport to a smaller viewport) the PNG will often look pixellated and blurry, which is something you will obviously want to avoid.

SVG

That last point about PNG swiftly brings us on to the SVG option that we have for our icons. As long as you have an image that is vector based (created in Adobe Illustrator, for example) – and not raster based, like it would be in Adobe Photoshop for example – then you can save this image out as an SVG.

As a developer you’re likely to understand about SVG and the different ways you can implement them into your website. If you don’t, SVG is a way of implementing a scalable graphic into your website designs. That way, you don’t need to worry about the graphic turning pixellated or blurry upon resizing or scaling, and it will instead stretch perfectly to the required size that you need.

This works great for logos, icons, basically anything that might possibly need to scale that you either already have in a vector format or can easily recreate in that format, if necessary. When designing and saving out your SVG images, I would always recommend that you work to the optimal size that you need most of the time; that way, your browser only has to do some work to resize and scale the logo in particular circumstances and not all of the time.

Web Fonts

As we now already know, web fonts are infinitely scalable and can work perfectly on our websites in current browsers. Some very clever people have been able to combine both web fonts and icons to make icon or symbol web fonts. Quite like Wingdings, these often have more meaning and context when used than a simple icon.

There are arguments for and against web fonts as icons: some say that to load an entire font to use only several of the ligatures isn’t sensible, as it will add a lot of weight to the page and influence performance.

While this might be difficult to avoid with commercial symbol web fonts that you’ve bought, there are tools to create your own web fonts, where you can avoid this and only create a font with the icons that you need. Some also say that you may lose some of the context with web fonts as they sometimes only use just a letter to display the icon. However, some clever people like the folk at Symbolset use keywords for the fonts, which help add at least a little more context to the icon that you have.

And there you have three options for how to use icons in your designs; the choice is now yours to make! Most options will add slightly to your design workflow in some way or another, but it’s up to you to see which process may fit into your workflow best.