Greepit » Fonts http://www.greepit.com Open Source Web Development Resources for Designers and Developers Fri, 10 Feb 2012 12:59:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Into Fonts! Google Font API & Font Directoryhttp://www.greepit.com/2010/05/google-into-fonts-google-font-api-font-directory/ http://www.greepit.com/2010/05/google-into-fonts-google-font-api-font-directory/#comments Wed, 19 May 2010 20:22:16 +0000 Saif http://www.greepit.com/?p=5186 Google, the search engine giant, is now taking initiatives with fonts and just launched:

Google Font Directory: It provides high-quality open source web fonts. You can browse their catalog of available fonts and copy the code required to use them on your web page.

These fonts also support HTML5 and CSS3 styling options like drop shadows, rotation, etc…

Google Font API: It provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. Applying a font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style.

Its similar as we add stylesheets in our web pages, the difference here is: the stylesheet is hosted at Google and comes with a parameter.

A new JavaScript library called WebFont Loader is also launched with the collaboration of Typekit and the Google. It gives you more control over font.

Find out more at: http://googlecode.blogspot.com/2010/05/…

Related Posts

]]> http://www.greepit.com/2010/05/google-into-fonts-google-font-api-font-directory/feed/ 10 Free Icons Collection – Hardly Seenhttp://www.greepit.com/2010/03/free-icons-collection-hardly-seen/ http://www.greepit.com/2010/03/free-icons-collection-hardly-seen/#comments Sun, 28 Mar 2010 20:14:03 +0000 Saif http://www.greepit.com/?p=4027 Being a designer, I know the importance of Icons in website design & user interface design. Many times, a layout turned to a master piece only by using few appropriate professional icons.

Today, I am presenting a Free icons collection with multiple file types like Vector, ICO, PNG, GIF & PSD.

9 Icon & PNG Cake Icons

cake-icon-pack

Twitter PSD Icons

twitter-psd-icons

Glossy Icons with PSD Source

glossy-icons-with-psd-source

Website icons Collection

website-icons-collection

Free PNG Icons

Free PNG Icons


Vector Icons

Vector Icons

Ecommerce / Online Shop

ecommerce-online-shop-icons

Boeing 747 Aeroplane

boeing-747-aeroplane-icon

108 Social Bookmarking Icons

free-social-bookmarking-icons

Car Icon Set

car-icon-set

Twitter Egg

twitter-egg-icon

Vector Stock Market Graphs

Vector Stock Market Graph Icons

Icons for Website

icons-for-website

Free Vector Clock Icon

free-vector-clock-icon

Free Twitter Icons Set

free-twitter-icons-set

Speakers PSD

speakers-psd-icon

Weather Cloud Icons

weather-cloud-icons

Portal Icons

portal-icons

Free Skype Icon

free-skype-icon

Balloon Dock PSD

balloon-dock-icons

World Flags with US & Canadian State Flags

World Flags with US & Canadian Flags

Creative PSD

creative-psd-icons

Free Hand Pointer

free-hand-pointer-icons

Minimal Dock Set

minimal-dock-icons-set

75 Beautiful Dock Icons

75-free-dock-icons

Little Big Planet PSD Icons

little-big-planet-icons

Designers PSD Icons

designers-psd-icons

30 Free PNG Icons

free-png-icons

High Resolution Media Center

high-resolution-media-center

Professional Software Icons

professional-software-icons

Recycle Bin

recycle-bin-icons

Airmail Envelope

airmail-envelope-icon

iPhone & Web Application Icons

130 Free Icons for iPhone & Web Applications

Users & Buttons

users-buttons

Applications and Systems – Black & White

black-white-application-system-icons

Social Bookmarking Characters

social-bookmarking-characters

Stay updated by subscribing to our Full RSS Feed, following us on Twitter and Facebook.

Related Posts

]]> http://www.greepit.com/2010/03/free-icons-collection-hardly-seen/feed/ 5 High Quality Free ECommerce Icons in PNG Formathttp://www.greepit.com/2010/03/high-quality-free-ecommerce-icons-in-png-format/ http://www.greepit.com/2010/03/high-quality-free-ecommerce-icons-in-png-format/#comments Fri, 26 Mar 2010 20:24:11 +0000 Saif http://www.greepit.com/?p=3987 A collection of high quality free ecommerce icons for an online shop. Multiple categories of online shopping has been covered in this great icon collection.

high-quality-free-ecommerce-icons

Related Posts

]]> http://www.greepit.com/2010/03/high-quality-free-ecommerce-icons-in-png-format/feed/ 5 Open Source Tool To Build Your Own Fonts – Typismhttp://www.greepit.com/2009/02/open-source-tool-to-build-your-own-fonts-typism/ http://www.greepit.com/2009/02/open-source-tool-to-build-your-own-fonts-typism/#comments Thu, 19 Feb 2009 11:40:44 +0000 Saif http://www.greepit.com/?p=1526 typism is a web-based font editor. It is a public site where anyone can create a font for others to use and to study, to modify and to copy.

Open Source Tool To Build Your Own Fonts

You write the description of a typeface, design the outlines of a glyph, track the development history and publish any revision in human-readable format to store locally. All it takes to run it is a browser supporting a few open standards.

Typism uses SVG and runs on Google App Engine.

Website: http://typism.appspot.com/fonts/index

Related Posts

]]> http://www.greepit.com/2009/02/open-source-tool-to-build-your-own-fonts-typism/feed/ 0 Sansation – A Free Fonthttp://www.greepit.com/2009/02/sansation-a-free-font/ http://www.greepit.com/2009/02/sansation-a-free-font/#comments Fri, 06 Feb 2009 12:32:22 +0000 Saif http://www.greepit.com/?p=1401 A Free serif font Available in light, regular and bold flavors.

Download Sansation

Related Posts

]]> http://www.greepit.com/2009/02/sansation-a-free-font/feed/ 0 Quicksand – A Free Sans Serif Typeface with 7 Weightshttp://www.greepit.com/2009/01/quicksand-a-free-sans-serif-typeface-with-7-weights/ http://www.greepit.com/2009/01/quicksand-a-free-sans-serif-typeface-with-7-weights/#comments Thu, 29 Jan 2009 05:18:17 +0000 Saif http://www.greepit.com/?p=1305 Andrew Paglinawan is a self-employed graphic designer, working in the fields of logo design, print design, web design and branding. He has released a free sans serif typeface called Quicksand with 7 weights including a dashed version. The font looks really nice and professional.

Quicksand - A Free Sans Serif Typeface with 7 Weights

Website: http://typophile.com/node/50437

Download: http://www.andrewpaglinawan.com/QuicksandFamily.zip

Related Posts

]]> http://www.greepit.com/2009/01/quicksand-a-free-sans-serif-typeface-with-7-weights/feed/ 0 Web Typography Cheat Sheethttp://www.greepit.com/2009/01/web-typography-cheat-sheet/ http://www.greepit.com/2009/01/web-typography-cheat-sheet/#comments Tue, 27 Jan 2009 20:23:06 +0000 Saif http://www.greepit.com/?p=1283 Let’s be honest. Typography and the web do not go hand-in-hand. You’re limited to a choice of about 5 fonts, most of which are cheap knockoffs of ‘proper’ typefaces. You’ve got practically no fine control over kerning or line spacing, and – worst of all – there’s a very good chance that no matter what you do, no matter how hard you try – your type is going to look different on every single browser and operating system. So what is an avid graphic designer-cum-web designer to do when faced with the seemingly insurmountable task of making web type look good?

Tip 1: Don’t limit your size options

Once upon a time, we were limited to a mere 7 sizes via use of the <font> tag – thankfully current incarnations of CSS grant us much better control, so quite a fine level of control over the size can be had.

Font Size

Figure 1: Newer methods of specifying sizes in CSS allow for more flexibility when choosing type size. Don’t stick to standard sizes – experiment!

Relative sizes work best- don’t forget your visitors may have a different font size setting to the default, so specifying fixed point or pixel values may make things look awfully strange. ‘Em’ units – so called as 1em is equal to the width of the lowercase ‘m’ character, are one of a few ways to scale your text proportionally. All things being equal, at default settings 1em is the same size as 12 points.

You’re not limited to while numbers, either – 0.8em is a good body font size, typically being rendered at 10pt. You can specify any number you like, and as large as you like – don’t limit yourself to sub-24pt sizes if the design warrants a larger size.

Tip 2: Play with your letter spacing

Letter spacing is perhaps one of the more effective ways to spruce up web type, particularly at larger sizes. It’s just a shame Internet Explorer cripples the finesse that could be available via the letter-spacing CSS property.

Letter Spacing

Figure 2: Letter spacing can be used to tighten the whitespaces in larger type, or relax the spacing in smaller type. The larger the font, the more you can tweak the letter spacing.

Firefox and other compliant browsers will happily take a precise decimal value, and space the text nicely and continuously at non-integer values, but Internet Explorer (sadly, even the latest IE7) will only allow for broad, rounded-to-neared-pixel-integer figures – which basically means you’re not going to get the spacing you want in IE.

Despite this limitation, letter spacing can be used effectively at larger sizes to really add some zing to an otherwise bland headline or title. As type gets larger, so too does the spaces between the type. This means that large fonts can have unsightly gaps and rivers of whitespace running through the letters. A little negative spacing will close these gaps, and if used with care can look distinctive, in some cases even suitable for replacing prerendered type.

Tip 3: Line height and word spacing, too

It’s not just letter spacing that you can mess around with – word-spacing and line-height can be specified to further tweak the text display.

Word spacing is perhaps less useful and more subtle than letter spacing, but adding a little extra whitespace between words can help somewhat in terms of readability. On longer lines, a little extra word spacing will mean fewer words per line, and thus make it easier for readers to keep track of where they are in the text.

Coupled with line height, you can gain more accurate control over the word density of any given page. I tend to specify line height as a percentage, with about 120-140% being the ‘normal’ default. A little extra (~200%) can make large passages of text a little easier to read, whilst tighter line heights (100% or less) can help with multi-line titles, where larger fonts could result in acre-wide gaps between lines without moderation.

With all the above spacing methods, care must be taken to ensure the effect is subtle – nobody wants to read text that’s squashed into a tiny space, or spread over 3 or 4 times the area that’s required. The default settings are default for a reason – text readability – so any changes made to the spacing should be subtle and should aid readability rather than impairing it.

Tip 4: Try a new slant on an old favorite

As mentioned in my top blog trends post, Times New Roman is used in only 5% of the top 100 blogs. It was Times’ early predominance on the web, being the default font for most browsers, that perhaps dulled its impact somewhat, but despite this, and if used creatively and in a fresh way, Times can have a great impact.

Try a new slant on an old favorite

Figure 3: Even fonts that have fallen out of favour due to overuse, such as Times New Roman, can be refreshed with a little creative typography.

Try a non-standard size and a non-standard spacing model (all capitals works great, too) and Times can be a visually interesting and fresh font.

Tip 5: Be bold

‘Bold’ in the sense that you try new and exciting things – not in the typographical ‘bold’ sense. Big fonts, tight spacing, loose spacing, colour, use of first-letter and first-line can all help to set your text apart from typically dull web typography.

The key thing is to experiment, try new things – not at the expense of readability, but in the name of design.

And, if nothing else, the experimentation to find the perfect typographical mix on the web should occupy the time between now and whenever fully flexible, fully supported CSS typography becomes mainstream!

Related Posts

]]> http://www.greepit.com/2009/01/web-typography-cheat-sheet/feed/ 1 GeoBats Font – Free Maps Of All Countries and Stateshttp://www.greepit.com/2009/01/geobats-font-free-maps-of-all-countries-and-states-on-the-world/ http://www.greepit.com/2009/01/geobats-font-free-maps-of-all-countries-and-states-on-the-world/#comments Thu, 22 Jan 2009 06:28:04 +0000 Saif http://www.greepit.com/?p=1178 Good font to let you have maps of all countries. Stop searching for maps. Instead, install this font and get a key to every country and state on the world for free.

GeoBats Font - Free Maps Of All Countries and States

Download Map Font

Related Posts

]]> http://www.greepit.com/2009/01/geobats-font-free-maps-of-all-countries-and-states-on-the-world/feed/ 0 100% Free Fonts with Commercial Use Licencsehttp://www.greepit.com/2009/01/free-fonts-with-commercial-use-licencse/ http://www.greepit.com/2009/01/free-fonts-with-commercial-use-licencse/#comments Wed, 21 Jan 2009 04:43:26 +0000 Saif http://www.greepit.com/?p=1145 100% Free Fonts with Commercial Use Licencse

Font Squirrel is a growing Collection of free fonts which can be used in commercial work. Feel free to download and use in any of your project. Font Squirrel has collected very nice (looks premium) fonts for us and categorized them beautifully for our ease.

Website: http://www.fontsquirrel.com

Related Posts

]]> http://www.greepit.com/2009/01/free-fonts-with-commercial-use-licencse/feed/ 0 typeface.js – Use Any Font Via JavaScripthttp://www.greepit.com/2009/01/typefacejs-use-any-font-via-javascript/ http://www.greepit.com/2009/01/typefacejs-use-any-font-via-javascript/#comments Tue, 20 Jan 2009 07:39:06 +0000 Saif http://www.greepit.com/?p=1126 Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

Use Any Font Via JavaScript

As the fonts that can be used in websites are limited, there are several solutions to this problem like sIFR or FLIR. typeface.js is another open source solution which uses JavaScript.

Website: http://typeface.neocracy.org

Demo: http://typeface.neocracy.org/examples.html

Related Posts

]]> http://www.greepit.com/2009/01/typefacejs-use-any-font-via-javascript/feed/ 0