The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "html" tag.

Icon fonts: How to make your own

This is the writeup to accompany my presentation slides about icon fonts.

Before we get into the ‘icon’ part of it…

If you use custom icon fonts, you will be likely embedding them using the @font-face CSS option. The most fail-safe way of doing so is by using the following syntax, as explained at first by Paul Irish and tweaked by Jon Hicks to arrive at this version:

@font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#webfontIyfZbseF') format('svg');

This is to ensure all browsers, including that pesky Internet Explorer, display the correct font files. Yes, that’s a smiley face there. Read the above articles to find out why!

Why use icon fonts?

Because they are awesome! There are four main reasons, though. Icon fonts are…
Read more →

Barbara February 17, 2014 Leave A Comment Permalink

What I learned this week (9/10/13)

A list of random useful things I picked up during today’s classes.

Applied Art for the Web – Photoshop

  • For design mockups it’s a good idea to start with an 1024×768 px document size, with a 960 px width for the actual site content (although it’s even more recommended to design in the browser if possible)
  • Mark layers that are to be coded with CSS (and not exported as images from the PSD) to help the developer out
  • GIFs and PNG8s can’t display half transparent pixels so we need to know the colour of the background that will be behind the image we’re exporting so we can set the matte to that colour
  • Aim to work with existing content – be assertive with client – use analogy that you wouldn’t just ask an architect how much a house costs, they have to know what you want the house to be made of!

Webpage Design – The structural layer

  • Best practice: use HTML5 elements with the stricter XHTML syntax
  • the <b> and <i> tags are back, with a different meaning: to mark up text that is somehow different (but not necessarily emphasised more) than its surroundings.
  • Whether or not the above tags should still be used is debatable but could be useful for example in text containing latin names etc; and they are less verbose than span classes
  • XHTML: use “id” instead of “name” that was valid in HTML4; “name” now deprecated

Barbara October 10, 2013 Leave A Comment Permalink

get_footer() ?>