Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Font’ Category

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”.

Ionicons

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.

There are nice script fonts and the nicer ones. MightyDeals is offering a discount on a such “nicer” one called Melany Lane.

The font is elegant-yet-fun, very characteristic, has a beautiful flow and can be read so easily.

It is created by Yellow Design Studio’s and comes as the whole family of 5 sets (Melany Lane, Melany Lane Bold, Melany Lane Ornaments, Melany Lane Ornaments Bold, and Melany Lane Lane Patterns).

Melany Lane Font

300 glyphs, 364 ligatures, 100+ ornaments and background patterns exist in the font family which can be used to create impressive letter combinations.

25+ languages are supported and it is also available as a web-font. The pricing is normally $49 but offered for $17.

Not every PSD file is created equal : ). Sometimes they are very badly layered/grouped and it is hard to work with them.

In case you are trying to find out the fonts used in such a PSD file, .PSD Fonts can help.

It is a website that simply asks you to upload the PSD file (directly or via Dropbox), analyzes the layers and lists the fonts used. That simple.

.PSD Fonts

  • Tags:
  • Filed under: Design, Font, No License, Web Based
  • 2 Comments
  • For a good looking typography, the number of characters in a line is pretty important. And, this is difficult to automate only with CSS media-queries.

    FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer.

    FlowType.ijs

    The plugin has options for setting the min/max font-sizes and min/max widths where the resizing will be triggered.

    It also works fine with webfonts and a nice demo shows how it works (just resize the browser for the demo page).

  • Tags:
  • Filed under: CC License, Design, Font
  • 0 Comments
  • Dripicons is a good-looking free icon set of 90+ items which are designed in flat style.

    It includes icons that are suitable for web apps, like: arrows, media, charts and more.

    The set is available in many vector formats (PSD, AI, EPS, PDF, SVG) and also as a webfont.

    Dripicons

    Map Icons is a free icon font that is built to be used with Google Maps API + Google Places API.

    These icons extends the Google Maps Marker object to enable either an image or SVG marker to be used with the icon placed on top as a label. But, but they can be a perfect fit for any mapping-related content/app.

    It includes 100+ icons with items for almost any type “points of interest” and location markers.

    Map Icons

  • Tags:
  • Filed under: Design, Font, Goodies, Map, Other License
  • 1 Comment
  • An update in typography of design projects can quickly change the look & feel of it and there can always be better looking fonts.

    TypeWonder is a free-to-use web application for testing a website with different fonts in real-time.

    We simply enter the URL of the website, select the font from a list of free fonts (currently, only Google Fonts) and the site is presented with the new font.

    TypeWonder

    It is also possible to browse the site afterwards with the new font and the sub-pages will use this font too.

    For the future, what would be great is to define different fonts for different elements, classes and IDs.

  • Tags:
  • Filed under: Design, Font, License Free
  • 1 Comment
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com