Archive for the ‘Font’ Category

Every designer would agree that typography is a huge part of web design. But the process of choosing which fonts to use can be a hassle. Thankfully there are several free online webapps to help you decipher online font families, pick your favorite(s), and design text in a way to match your layout. Take a gander over these tools and see if any can help you launch that next kick-ass project.


typecast typography online webapp tool

Read the rest of this entry »

Using multiple fonts in any design is an excellent way to create interest as well as to draw a viewer’s eye to important content. Choosing the right mixture of fonts, though, can be difficult. Without some knowledge as to how to fit the different typefaces or font styles together, a design could become quite overwhelming and confusing.

Of course, knowing what fonts to use together also requires a bit of intuition. If you don’t quite have the eye, simply start browsing through typographical posters, websites, and other graphic designs that excellently utilize different fonts. You will eventually be able to tell what fonts simply draw the eye more than others in a design and which ones mesh well together. When this intuition is combined with some basic tricks for mixing and matching fonts, you will become quite the expert in choosing beautiful blends of fonts, no matter the design.

Below are the basic tips you need to know before jumping into using mixed fonts in graphic or web design, along with some excellent examples of good practice. So take some time to read through the following rules, do some research to see more mixed typography in use, and then you should be ready to try some multiple font designs on your own.

Beware of Font Overkill

Less is always more in design, and this rule is no exception when it comes to mixing fonts. Too many different fonts – or even simply too many font styles and colors – and you’ll not emphasize anything. Viewers won’t know where to look first when they see a page layout. Their eyes will jump from one to the other for a second or two, and the majority will give up trying to decipher where to begin reading than struggle through the confusing text. Keep in mind that the point of using multiple fonts is to increase the aesthetics of a design, create hierarchy and order in content, and to highlight important information.

Read the rest of this entry »

Due to how the text rasterizer works, fonts look heavier on OS X and iOS, compared to to other operating systems.

And, trying to close this gap with per-browser CSS styles is a common pattern.

Type Rendering Mix

Type Rendering Mix is a tiny JavaScript library that allows to apply styles only when Core Text is used (iOS and OS X) in order to achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.

Also, Type Rendering Mix can be used to disable web fonts when no antialiasing is applied.

It works by auto-adding some styles to theelement that represent the rasterizer and anti-aliasing support on the browsers and leaves the rest to us (creating the styles).

There is a growing number of web fonts, each have lots of items and, sometimes, we only need few from each.

Font Combiner is a free and web-based tool for picking the letters from each font and generating a custom one.

Font Combiner

It also empowers us with features like changing the kerning, subsetting, hinting options and multiple font glyph combinations.

The tool hosts lots of free web fonts to choose from and works can be downloaded as PNG or SVG.

It is already possible to find very nice icon fonts around but there is always room for new ones.

Ionicons is a fresh + free icon font with a slick design and a very good fit for web apps as it includes many “action icons”.


The font has items for arrows, comments, loaders, users, media controls, weather, charts, social and more.

There are 400+ unique icons however it is open source and new ones being added regularly.