Colorful posts in
the ‘Typography’ category

Daxion now has a larger character set, better horizontal metrics, it’s no longer available for free download and you can buy it on GraphicRiver. As a bonus, you get the psd used for the preview images used in GraphicRiver.

Check also the Tessa typeface.

• 33 free typefaces for graphic and web design
• Free fonts for design
• Free fonts for graphic design: Kilogram & Alt Matey
• Free spanish typeface Ibarra Real
• Free fonts by Stereotypes

Tags: freebie, resources, typeface

We all know that using pixels for typography is not the best way to go, thanks to IE 6. The facts are these: if you set your type in pixels, IE6 won’t enlarge it. Firefox and its friends will do it, even IE7, but if you want to enlarge some text while doing a presentation, or you want to read better that text where the designer used a small tiny little font, IE 6 won’t be doing it.

Enter the unit of measurement Em. In typography, the Em is the width of the M letter. It’s not specific to a typeface, but rather a measure of each font itself.  For the web, 1 em equals 16px, which is the default ‘Medium’ size for browsers. Then, you can set em sizes like:

However, keeping track of these sizes may be cumbersome, and if we have to deal with nested sizes, the whole process quickly becomes a nightmare. Fortunately, Em Calculator exists. It’s a nifty useful online tool for calculating em sizes, dealing with root and nested nodes.

With Em calculator, you can also set the base size, if you want it to be different than 16px. This setting is useful because you can also replicate this in CSS by adding:

body { font-size:75%; }

This will set the base font to a 12px size, so now our 1em size will be 12px instead of 16px.

You can also specify the decimal places, and this relates directly to em numbers; 0,625 em renders in Firefox exactly as 10px, whereas 0,63, a rounding from 0,625, renders as 10.0833px. Browsers rounds to the next integer pixel number, so if you surpass 10px it will start rendering as a 11px type.  For example, testing in Firefox with 16px being the 1em size: 1.3 em = 15.6 px, FF renders it as 16px; 1.333 em = 16px, FF renders it as 16px; and finally, 1.4em = 16.8px, so FF renders it as 17px. Make sure you get your correct size using the proper decimal places.

I hope you find it as useful as I did, see you next time.

Tags: resources

FontShop released a bold italic version of their new font FF Reminga for free download at their site. Head over to the site and sign up for this and other goodies like the awesome Font magazine! I received mine a few days ago, look at this baby: Read more

Tags: resources

I want to showcase 7 sites that I really like. I like them because they are 1) clean, even those crowded with options are easy to navigate, 2) they are colorful, they dare to use colors and they use them good and for good, 3) they have a lot of small details carefully crafted, showing that the designer spent a lot of time taking care of this and that instead of throwing it quickly on the table.
Read more

Tags: showcase

Some of you might know it, but I’ve just found this valuable tool for quickly prototyping web typography. Type Tester, by Marko Dugonjić, assist web designers looking for a way to compare several typographic choices featuring controls for choosing typefaces, setting sizes, leading, tracking, alignment, word-space and others. The styles and weight are rapidly available from the text itself which is organized into paragraphs featuring each style+weight combination.

Furthermore, you can use it to test your own screen type, since it also features a dropdown menu where you can select your own installed typefaces.

This will be the first freebie for graphic design, specifically in the area of typography. Tessa is a simple lowercase font, sans-serif, with some sleek design and curves

Read more

Tags: freebie, resources, typeface