A Typegeek's Look at Type and Design » design

Typography Design Resources

Typegeek — Sun, 05 Sep 2010 01:19:21 +0000

Yes, I am a Typegeek, but I don’t know near as much about type and typography as I’d like. That’s why I’m glad David Airey pointed out this reference to Font Shop’s Education resources.

There is a wealth of information at Font Shop’s Education site, in fact about 72 pages worth of typographic goodies and information, broken down into sizable bits. The largest e-book (they are all .pdf files) is Meet Your Type: A Field Guide To Typography weighing in at 52 pages.

The other booklets are easier to handle at 9 pages or 2 pages. I think I’ve found my bedtime reading tonight! It’s a great way to learn about fonts and typography used in graphic design.

Simple T-Shirt Designs

Typegeek — Sat, 28 Aug 2010 03:31:40 +0000

For years I’ve wanted to design a t-shirt. Actually, I have already designed a t-shirt, and it was worn by over 1000 first year students at my university during my 4th year of a 3 year degree (it actually took me 5 to finish, but that’s another story).

So over the years I’ve come up with a few ideas but haven’t committed them to pixels yet. So in David Airey fashion, here are a few designs I finally chose to put together. Tell me what you think, and if you hang out on any t-shirt design sites, tell me which sites you like best.

I do still have one of the first shirts I helped design. It was done using CorelDraw! 5, one of my all time pieces of software so perhaps I’ll post a pic sometime soon.

Follow me on Twitter here, and check out my Flickr. But like I said, write some comments and let me know what you’re thinking!

Get Free Icons at IconBuffet

Typegeek — Sat, 14 Nov 2009 03:29:26 +0000

I’m now in a mood to really get something creative done, and it is strange that the creative urge gets to me sometimes so strong that I have to do SOMETHING and I have to do it NOW… even if it means the results are poorly done, not thought through, and shoddy. But regardless, here is a new post and some new inspiration for you.

I just became a member of IconBuffet, and I’ve already received 1 free icon set for joining, and you get one every month. Also, you can trade Icon Sets and collect all you want! There is an incredible community of really sharing people, and a need system involving tokens, stamps and awards. I was also given a set just for asking! Or come to think of it, it was offered freely by a total stranger.

So I put this together in Word once I got home from doing the evening running around:

The wreath is just word clipart (but I’m happy about the drop shadow) and those are some pretty sweet icons! Wait till you see how the story ends

On the topic of icons, there is also a tonne of other free sets out there if you are willing to look. Some pretty sweet ones I just came across today were:

Free Hand-Drawn Web Icons: http://camp.woothemes.com/2009/07/hand-drawn-social-media-icons/

Some samples:

(I added the lines since I don’t want to be share without permission, go to the site and download them yourself).

WooThemes Ultimate Icon set: http://ww w.woothemes.com/2009/02/wp-woothemes-ultimate-icon-set-first-release/

I love icon sets almost as much as I love fonts, so maybe I’ll try my hand at creating them when things aren’t so busy at work.

If you have any favourite icon sites, post a comment below. Or, send an email and I’ll invite you to IconBuffet… that way I’ll get more icon sets to tell you all about!

Online Web Design Resources

Typegeek — Fri, 01 May 2009 01:18:09 +0000

Not much here today, but I had found these links in the fall and didn’t want to lose them, so I’m posting them here for you and for me:

Good CSS (Cascading Style Sheet) Tutorial:
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/

Colour Tools for Graphic and Web Designers at AllGraphicDesign.com

Technical Colour Schemer – because we can’t get enough of colour scheme builders can we?

20 Web Design Generators

Adam Kalsey’s Button / Badge Generator ( it made this: )

Being Canadian, I will almost always insist on typing it as “colour”.

Oh and PS! I just bought a new domain so I’ll finally be hosting a WordPress / Thesis blog instead of this old Blogspot thingy! Dang you domain squatters!

My First Thoughts with Thesis

Typegeek — Thu, 12 Mar 2009 22:22:26 +0000

I have written about my curiosity with the Thesis theme for WordPress before and I’ve finally purchased a developer license for it. Here are some thoughts…

My thoughts regarding a fresh install of WordPress and Thesis 1.4.2.

Yesterday I purchased and installed Thesis theme for WordPress (WP) on one of the sites I’ve recently started. A few months ago I had installed WP 2.6 for one site and then abandoned work on it for a while. This month when I went back to it, and decided to upgrade to WP 2.7. Well, because I didn’t really know what I was doing before (possibly because I changed some default settings) the blog is no longer reachable.

Not a problem. I’ll fix it later.

In the meantime, I had another project I wanted to get started on so I installed WP 2.7 and Thesis 1.4.2 and got going. Here’s how it went…

When I first tried switching to the thesis them, I received a strange error message when previewing it:

Cannot load thesis-design-options.

Odd. I tried searching the forums, but I’m still not familiar with the layout so didn’t find anything right away, and I was quite impatient. I was trying to do all this while at work and I had important stuff I should have been doing… stuff I get paid for.

Anyway, I had looked over the installation instructions for WP a few times and had seen some references to setting permissions on certain files while I was troubleshooting the problem on the original site. One suggestion is to make sure to set the permissions on the cache file to 777. This means doing something technical on the Unix server, but luckily I use Dreamweaver to upload my files to the host. This folder is in the wp-content\themes\Thesis\custom folder in your WordPress installation.

Here’s how to change the permissions on a file in Dreamweaver:

Make sure you are vewing the remote files on the server.
Right-click the cache folder choose Set Permissions. It allows you to enter 777 directly into the box (or any other permissions required), or add the appropriate rights as required.
Click OK.

Unfortunately, that doesn’t seem to work with my web host (GoDaddy).

Fortunately, it turns out I could still activate the theme, so no harm, no foul. Just a tad annoying.

After loading it, I noticed in WP press administration I now had “Design Options” and “Thesis Options” in the WP Appearance menu.

I’m still new to WordPress, but I found the Thesis configuration really easy. There are lots of options and a very hand big ass save button!

On the Thesis options page, even the text on the button can be altered. Talk about customization!

I was particularly impressed with the contextual help of the options screen. Beside the heading titles appears a small [+] symbol. Clicking on it creates a fold-down with a short description of what that section can do. Clicking it hides the text again. Very smooth without the need for popups.

Here is the default Thesis theme:

I had read about a magazine layout coming in Thesis 1.5 that I might use for this site, but for now I wanted to switch to a 3 panel layout. Starting with the Design options, I was very easily able to switch to a 3-column format with the sidebars on either side. I may be oldschool, but its what I wanted for this particular site.

There were so many settings to play with, but basically I wanted to change the background colour and text colour. That I could do by going directly to the Editor screen in the WP Appearance menu. This does require knowledge of Cascading Style Sheets (CSS) but even if you don’t know much about those, it was easy to find the body tag and change my font and background colour.

Oops! The fine print says don’t make changes to that stylesheet in the editor. Good idea. The Thesis theme contains a panel for creating a custom stylesheet called custom.css which is stored in the thesis\custom folder.

After a bit of playing…

Now things look a lot better! Tracking down the style/colour for the header was a bit of work, but I got that back, so now all I need to do is find the colour for text posts and the comment number and we can start some major work. And then there is customizing the sidebars and changing the images in the rotator….

I can totally recommend this theme. Get Thesis. You need it, you’ll love it.

There are many more options I can’t wait to try, but I had to get to work!

In my next post I will show you where to find the other style elements to change to customize the colour in even more detail.

Until then, let me know in the comments what you think of this post.

Tips for Small Type

Typegeek — Fri, 06 Mar 2009 01:24:33 +0000

If you’ve tried creating graphics or content using small typefaces then you’ve probably run into the problem of readability. Microsoft created a font known as Verdana to solve the issue of small type on screen. Shown below is a comparison of Verdana at difference sizes to Minion Pro at the same sizes. The image was created in Adobe Photoshop CS3 with Strong anti-aliasing applied to the text.

I recently came across a highly detailed article that explains how to get the most readability from your small type. Check it out at The Art of Type.

You can read more about Verdana at the Microsoft site Channel Verdana and if you’re really a typegeek, you’d be interested in the Wikipedia entry on Verdana as well.

And of course to be fair, you might as well check out the entry for Minion as well. You can get the
Minion Complete Family Pack from Fonts.com.

It could be just me, but I think of something totally different when I hear the word “minion”

I’ve used Strong anti-aliasing in the image above. I’d like some feedback from you in the comments as to what anti-aliasing to use when creating graphical text to use on the web, when printing the content is not going to be an expectation.

Original Font Sample

Typegeek — Fri, 20 Feb 2009 01:26:55 +0000

When I started teaching computer labs a few years ago I got really fired up about typography. It was a small section in a chapter on word processing in the textbook we were using, but I was intrigued with explaining it to inexperienced users, though I had been interested in typography before.

During that time I came up with a basic typeface that I use on the white boards. It really contains mostly modifications to the letters A and E, but the trailing “S” I would sometimes add flourishes too.

Really it looks better in the word “DATABASES” but it also works ok with “SPREADSHEETS”.

I’ve played with different variations on the E, but its harder to make it look interesting and still maintain its readability, which is something I want to keep with any typeface I create.

Do you have any special purpose typefaces you’ve designed? Got any suggestions for the E? Let me know in the comments below.

Font used in Google Chrome

Typegeek — Fri, 12 Sep 2008 01:56:21 +0000

I am working on a new website regarding Google Chrome and I started doing some preliminary thoughts on the design, so I did a search for “font used in Google Chrome” and came upon this great site at chromium.org: http://dev.chromium.org/user-experience/visual-design

Turns out the default font in Chrome is the system font… duh! On XP, that means Tahoma (11pt). I remember working as a graphic artist and being able to recognize fonts and recall their name on sight… a skill which has sadly drifted away. I mean… I know the difference between Arial and Lucinda! But I should have picked up on the Tahoma thing. Admittedly, sometimes the differences between Tahoma and Verdana escape me unless I’m comparing them directly…. no actually Verdana is pretty recognizable on second thought.

(Although none of them look that great at 18pts as shown above. Verdana really shines when its really small, which is actually one of its main advantages).

So on XP, the text in the tabs is Tahoma, and on Vista it is Segoe, and so on for each operating system that will eventually run Google Chrome.

I plan on spending more time looking at the design notes of Chromium and Chrome and we’ll see how in-depth I can submerge myself in the development of Google’s newest (and first!) web browser: Google Chrome!

How to create a Dropcap in Word 2003 and Word 2007

Typegeek — Sun, 13 Apr 2008 02:00:19 +0000

One of my skills I feel is being able to present technical information to people in a way they can understand, which is one of the reasons I started this blog. I hope to produce more how-tos and tutorials as time goes by.

Here is one of my favourites. I actually didn’t know until recently that you could produce drop caps in Microsoft Word. While looking for ways to do it in Word 2007, I found ways to do it in the other versions as well.

To add a drop cap to a Word 2003 document:

Select the first letter of the sentence that you want to convert to a drop cap .
Choose Format -> Drop Cap.
A “Drop Cap” dialog box should appear. Select whether you would like a Dropped or In margin drop cap, or you can remove a previously existent cap. In the example above I have used a Dropped cap.
Select the font you wish to use.
If desired, select a different Distance From Text to make the Drop Cap letter more or less removed from the paragraph.
Increase or decrease the Lines to Drop to increase or decrease the size of the Drop Cap letter.
Press OK to apply your desired changes.

Details for Word 2007 can be found at this blog article at How-To Geek Blogs, but I may put my own up here eventually. Its really easy.

By the way, the font I used in the above example is Old English and should be available on most computers. Its definitely one of my favourites.