Free Icon Fonts for Web User Interfaces


by Jacob Gube | Six Revisions

Free Icon Fonts for Web App User Interfaces

This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs).

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

  • Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
  • Can be scaled on-the-fly if the user adjusts their web browser settings
  • Can be rendered with different colors
  • Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

Foundation Icons Fonts

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

Sosa icon font

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

Font Awesome

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Iconic Icon Set Leer más “Free Icon Fonts for Web User Interfaces”

Why We Should Start Using CSS3 and HTML5 Today

For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset.


For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.

Just like the elusive character from Beckett’s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and every Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.

Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that’s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset. Leer más “Why We Should Start Using CSS3 and HTML5 Today”

Design Inspiration: Text Art Showcase

Typography is a major aspect of web and graphic design. With text art, typography and text effects can be used in unique, creative ways to design. In this post we’ll showcase some beautiful examples of text art. If you see something you like, click on the image and you will be led to the source.


http://vandelaydesign.com/blog/galleries/text-art/

Typography is a major aspect of web and graphic design. With text art, typography and text effects can be used in unique, creative ways to design. In this post we’ll showcase some beautiful examples of text art. If you see something you like, click on the image and you will be led to the source.

Australia Post Ad

Australia Post Ad

Jimi Hendrix

Jimi Hendrix

Cover Girl

Cover Girl

Typographic World Map

Typographic World Map

Freedom

Freedom

Valdez

Valdez

Am I Your Type

Am I Your Type Leer más “Design Inspiration: Text Art Showcase”

Expressive Web Typography: Useful Examples and Techniques

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.


Smashing Magazine

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Typography Examples

Denise Chandler
When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

Denisechandler in Expressive Web Typography: Useful Examples and Techniques

The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

Jessica Hische
Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

Jesse in Expressive Web Typography: Useful Examples and Techniques

MCQ
The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio. Leer más “Expressive Web Typography: Useful Examples and Techniques”

Mastering Typography in Web Design with Inspirations & Tools

Mastering Typography in Web Design with Inspirations & Tools


Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. We realize that nowadays, knowledge in typography can be applied into various forms in almost all of media fields, including graphic design and the publishing world.

Mastering Typography in Web Design

To apply typography effectively in a media, we need to understand how it was developed and how people around made it possible. This not only enriches us by having a deeper comprehension about type usage, we would be able to be choose fonts more wisely.

Sometimes in the past, I often noticed the way websites applied typography by using quite varied and unique fonts on their simple headers. And in the past, everyone was still using images when applying writing on the header. A while later, JavaScript was used to enhance the font usage. And now? We can’t count on it any more, many things are changing in web typography in this modern age. Such as API utilization, @font-face, CSS3 and possibly there will be many more alternatives in the future.

Most Common Web Typography Mistakes

With the resources that we have today, allowing us to use various kinds of fonts to make our websites much more interesting. It’s obviously more exciting for visitors to read our websites and also for a web designer to explore further the intensity of the font usage on a website. So a web designer has knowledge of when to use some particular fonts and when to use standard fonts for reading.

Most Common Web Typography Mistakes
Image credit: Lee | Quoteskine

There are a huge number of fonts available on the web, but that doesn’t mean all of them work and are suitable to be applied to a certain design. Every font is designed with certain characteristics for a certain idea, purpose, impression, and project design. So, our job as a designer is to make the concept meet the design supported with the correct font usage. Leer más “Mastering Typography in Web Design with Inspirations & Tools”

20+ New Apps and Websites for Designers

New apps and websites seem to appear on an almost-daily basis.

Trying to find the best ones each week or month can be tough, especially considering how many come out that aren’t that great.

Here we’ve compiled some of the best apps and websites that have come out in the past few months.

Some are apps closely tied to a web designer’s daily work, while others aren’t likely to be used as often, but are still useful.

If you want to share a recent web app or website useful to designers, please send a tweet to @cameron_chapman for inclusion in our next monthly roundup.


thumbNew apps and websites seem to appear on an almost-daily basis.

Trying to find the best ones each week or month can be tough, especially considering how many come out that aren’t that great.

Here we’ve compiled some of the best apps and websites that have come out in the past few months.

Some are apps closely tied to a web designer’s daily work, while others aren’t likely to be used as often, but are still useful.

If you want to share a recent web app or website useful to designers, please send a tweet to @cameron_chapman for inclusion in our next monthly roundup. Leer más “20+ New Apps and Websites for Designers”

Weekly Design News – Resources, Tutorials and Freebies


This is our weekly column in which we share our favorites posts, articles and resources with our readers all from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

Presenting an HTML5 Interactive Infographic

Presenting an HTML5 Interactive Infographic

Why Your Company Needs A Front End Developer

Why Your Company Needs A Front End Developer Leer más “Weekly Design News – Resources, Tutorials and Freebies”

Usar las fuentes de Google Font API en nuestras páginas web

Google Font API es una de las nuevas herramientas anunciadas ayer en el evento I/O 2010. Esta herramienta nos permite incluir tipografías open source en nuestros desarrollos web de una forma sencilla simplemente añadiendo una línea de código.

Google se encargará de almacenar estas tipografías en un directorio de fuentes que podremos utilizar con tres sencillos pasos:


Illustration of different font types and the n...
Image via Wikipedia

Google Font API es una de las nuevas herramientas anunciadas ayer en el evento I/O 2010. Esta herramienta nos permite incluir tipografías open source en nuestros desarrollos web de una forma sencilla simplemente añadiendo una línea de código.

Google se encargará de almacenar estas tipografías en un directorio de fuentes que podremos utilizar con tres sencillos pasos: Leer más “Usar las fuentes de Google Font API en nuestras páginas web”

A Basic Look at Typography in Web Design


April 7th, 2010 by Shannon Noack

A Basic Look at Typography in Web Design

Typography is an integral part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science.

We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day.

Typography Basics

Typography Basics

Typography is the use of type in a design. Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page.

There are two major classifications of fonts to choose from: serif and sans serif fonts.

Serif fonts have serifs or extra embellishments at the end of stokes; some call them feet or tails.

Typography Basics

Sans serif fonts are without serifs; no extra details are found on the end of each letter.

Typography Basics

Things to Consider for Typography on the Web

There are many differences in handling type in print versus on the web. Things to think about with text on the web are contrast, color, readability, and size.

Colors on a monitor screen are created by light, and it becomes more important to think about contrast because it’s straining to look at and read text with poor contrast. Black text on a white background is the easiest to read because it provides the most contrast. Color theory and color choice play an important role in web typography.

Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.

Although at an increased size and with more leading—the amount of additional vertical space between lines of type—sans serif fonts can still work fine in body text on the web. Serifs work great in headlines and headings because they give a special accent to a headline and because serif fonts are easy to read when dealing with smaller quantities of text.

Size is an important factor to consider when choosing your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design and is easy to read.

Taking Control of Fonts

There are many settings that control the way your font appears on a web page. Font size, as mentioned previously, is certainly important. The three most popular units of measurements are: em, percentage (%), and pixels (px).

Declaring font sizes in CSS is simple, here’s an example of paragraph elements being assigned a unit of 1em.

p {
 font-size: 1em;
}

Em is a widely used form of typographic measurement for web designs because it scales well and can give you finer increments of size (i.e. 1.35em).

Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).

Many people like using percentages for font sizes because they give the user control of font sizes. The size is determined by their browser’s font size settings.

Kerning and leading can also be controlled with your CSS. Kerning is the space between characters and can be controlled with the letter-spacing property. Leading can be controlled using the CSS property, line-height. Both are great ways to control the look of your text.

Other possible and less popular units of measurements are:

  • points (pt)
  • pica (pc)
  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • x space (ex)

Using pt is great for print stylesheets because they are a print unit of measurement. Points shouldn’t be used in your web pages because there are big differences between browsers when using points; Mac OS computers tend to show text 25% smaller than PC computers.

Web Safe Fonts

Web Safe Fonts

What is a web safe or web standard font? These fonts make up a group of a select few fonts that are available on most computers. This is what currently limits font choices on the web under CSS2 specifications.

Choosing from the web safe fonts available will ensure better control over what your text looks like on all browsers and operating systems. The consensus for the most popular fonts are:

Other popular fonts:

  • Impact
  • Lucida Console (Mac OS equivalent is Monaco)
  • Lucida Sans (Mac OS equivalent is Lucida Grande)
  • Palatino
  • Tahoma (Mac OS equivalent is Geneva)
  • Comic Sans
  • Trebuchet MS

When using any of these fonts—especially the ones from the second list—it’s a great idea to include a few options to fall back on in your CSS, as explained in the following section.

Setting Your Fonts

There are a few methods to choose from to display fonts on your websites. If you’re using a web safe font, you can declare it via CSS, such as in the following example:

font-family: Helvetica, Arial, sans-serif;

It’s important to include several fonts just in case someone doesn’t have your first option. This gives your user’s browser something to fall back on. This list of fonts is called a font stack.

Redefining “web safe fonts” with CSS3

Current CSS3 specs allow you to choose from any licensed OpenType or TrueType font at your disposal. You can do this by using @font-face, as shown in the following example:

@font-face {
  font-family: "Journal; src: url(journal.ttf) format("truetype");
}
h1 {
  font-family: "Journal", sans-serif;
}

Font replacement tools

There are several font replacement methods at your disposal if you are still unsure about using @font-face in your designs.

Cufon

Cufon is a favorite font replacement tool to use because it’s relatively painless to integrate into a website. Plenty of documentation is available on their website, as well as the text generator that spits out code you’ll need. Although it’s a good, solid solution, it’s not without it’s downsides—currently text rendered by Cufon is not selectable by users.

Cufon

sIFR

sIFR is a Flash-based text replacement method and is just as nice as Cufon. You’ll need Flash to create a font file for your site. It’s best used on headlines or very small blocks of text because the load time can drag on a bit if you use it extensively on a web page. The downside is that it doesn’t work without Flash enabled in your browser, but the upside of sIFR versus Cufon is that text is selectable.

sIFR

Web Typography Mistakes

Web Typography Mistakes

Lack of typography consistency is one the biggest mistakes new web designers make. Font properties are best controlled globally, and it’s good practice to set the font family, size, color, line height and weight for the body element of all your pages through CSS, such as in the following example:

body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; }

You should set heading styles globally as well for h1, h2, and h3. Link styles should also be set globally.

Choosing fonts that are too similar is not a good choice, and should be avoided by carefully looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option.

Some Examples of Great Typography in Websites

In this section, you’ll find an array of websites that display effective typography usage.

Analog

The typography choices made here match the theme of the site very well. Type plays a big role in the look of this site, using color, size, font, spacing, and layout to enhance the overall look of the page.

Analog

Blue Pixel

Blue Pixel uses Cufon to create bold headlines. The body font and the headline font are both san serif and go together well.

Blue Pixel

Festival Boreal

Cufon is also used here to add a unique look to the site through typography. Color, different sizes, and a fun asymmetrical layout create a great typographical design.

Festival Boreal

Go Media Inc

A mixture of a few different font themes creates a great web design here. The navigation is clean-cut with thin, uppercase type that is nicely paired with an italic serif font for taglines and headings on pages.

Go  Media Inc

Kari Jobe

Courier—a serif font—is paired with a few sans serif fonts in this design. The fonts work together with the design to create a look that brings together an old-world style with a new bright and modern feel.

Kari Jobe

SimpleBits

This site has lots of type and is organized well with set styles that create a user-friendly site. Bold uppercase type in the upper navigation work well with the sans serif body text and red serif headlines.

SimpleBits

We Are VI

This blog has several font styles at work and uses typography to their advantage by keeping the site organized and easy to navigate.

We  Are VI

Information Highwayman

Typography is used in the background as a design element, creating a great backdrop that doesn’t distract from the body text. The rest of the text complements the style, with good-sized easy to read body text using a serif font.

Information Highwayman

Check out this showcase of 20 websites with beautiful typography for more design inspiration and examples.

Additional Resources on Web Typography

I hope you enjoyed this look at typography in web design. Typography is a broad topic but an important concept to understand as a designer of any kind.

How heavily does typography play into the aesthetics of a web design? How much time should you spend on typography when designing a site?

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/

Reblog this post [with Zemanta]