TypeNeu is an odyssey in typography. TypeNeu reports on the past, present and the future of typographic culture, with main focus on typefaces and applied typography in different forms. You can see many different typography from book, fashion, illustration, magazine, packaging, poster, print and etc… Please enjoy and get some inspiration.

Source: TypeNEU - An Odyeesey in Typography

• 1 Comment

Typechart lets you flip through, preview and compare web typography while retrieving the CSS.

You can view different typefaces with different font sizes and emphases. One of the handy features is that you can compare Windows rendering with Apple font rendering.

You can also download the CSS code for a specific typographic style, cach style corresponds with a style ID, which allows you to annotate prototypes and retrieve the css while coding as well.

Requirements: -
Demo: http://www.typechart.com
License: License Free

• 12 Comments

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. It is similar to sIFR which accomplishes this by using a combination of javascript, CSS, and Flash. FLIR generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between.

Requirements: Javascript Enabled
Demo: http://facelift.mawhorter.net/
License: GPL License

• 4 Comments

Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using WhatTheFont font recognition system. Upload a scanned image of the font and instantly find the closest matches in our database.

Or, you can try Identifont, the largest independent directory of typefaces on the Internet, with information about fonts from 517 publishers and 144 vendors. You can identify a typeface by answering a series of simple questions about its appearance.

Requirements:-
Demo: http://www.identifont.com
Demo: http://www.myfonts.com/WhatTheFont/
License: License Free

• 2 Comments

Nowadays, most web designers can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites.

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type?

3.7Designs has pointed out an important point. We should not simply steal the design/code/style, learn from it instead. He has seen a few sites that have ripped off the design elements of these beautiful typography and the site is awful.

Source: 10 Examples of Beautiful CSS Typography and How They Did It

• 1 Comment

Font Cubes is where you can find the a lot of free PC fonts and free Mac Fonts from the best font artists in the world. You can download any fonts easily by clicking the “Download” button. Registering as a member will allow you to access Font Cubes’s unique font management system. By registering, you could keep track on your favourite fonts by fontmarking them and asside of that, you could also use the system to keep track of font you have used in your project as well. However, the fonts listed in Font Cubes are the font author’s property. Please contact the authors for further consultation regarding the use of the listed fonts for.

Requirements: -
Demo: http://www.fontcubes.com/
License: License Free

• 6 Comments

FontStruct is a free font-building tool brought to you by FontShop. FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application.

You can keep your creations to yourself, but we encourage users to share their “FontStructions”. Explore the Gallery of fonts made by other FontStruct users and download them or even copy them and make your own variations. Some of the fonts within the Gallery looks really good and professional. Have you created your own fonts yet?

Requirements: -
Demo: http://fontstruct.fontshop.com/
License: Creative Commons License

• 5 Comments

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content. You can set the font family, size, color, letter-spacing, word-spacing, line-height and etc… It will automatically generate the CSS file for you. You can see the changes instantly. It is a really great tool for experimenting a suitable font type for your site.

Requirements: -
Demo: http://csstypeset.com/
License: License Free

• 5 Comments

Remember the time when we are creating graphical headlines and navigations of special fonts in Photoshop, optimize and save the image into GIF or PNG formats, and then upload it to the server. If we would like to change the text for the headlines, we need to do the whole process once again. Now, you do not have to do it in this clumsy way and you do not have to do it with Flash either. Text2PNG can do that for you automatically.

Text2PNG provides webmasters the ability to convert their website headlines and navigations to PNG images automatically. The process is very simple, you just code your headlines in usual HTML and CSS with an element ID. And then by adding a small JavaScript file and selecting which tags to replace, it will replace the selected headlines into graphical PNG format with your chosen font. How easy is that! You can view the example below.

In order to speed up the process of the script, they cache all the image on the browser cache and on the server. Each PNG image expiration is set to ten years from the day it’s created. However, you can always update the images on your site when the content is changed. The new images will be generated and cached again.

You can have a look at the fonts they support. If you would like to use the script in your blog or other content management system, you can use the Font Selection Tool, which allows you to select the font you need for your website easily. You can have a look at the screenshot below.

Requirements: -
Demo: http://www.text2png.com
License: License Free

• 8 Comments

Typography on the web has become a point of focus for standards based developers recently. One of the key concepts that we can use within our sites is consistent line-height in CSS terms. If you think of a ruled notebook, the lines are all equal heights.

The concept is fairly straight forward but in practice can be confusing especially for a CSS newcomer. All sizing needs to be relative to the base size. This allows for easy scaling up or down while keeping the required spacing and layout consistent, this can be refereed to as an elastic layout. To allow this we need to specify measurements in percent or em. Em calculator save you the hassle of all of those calculations.

Requirements: -
Demo: http://www.jameswhittaker.com/blog/article/em-based…
License: License Free

• 2 Comments