Categorias de las tipografias gratuitas para descargar:

3D, Bloody, Brushed, Calligraphy, Cartoon, Condensed, Curly, Decorative, Dingbats, Distorted, Famous, Floral, Foreign, Futuristic, Graffiti, Grunge/Trash, Handwriting, Hearts, Heavy, Holidays, Horror, Initial Caps, Italic, Medieval, Minimalist .Multi-lined, Normal, Old English, Oriental, Outline, Pixel-Bitmap, Retro, Rounded, Sans, Serif, Sports, Stars, Weird.

http://www.abstractfonts.com/

1 Georgia y Trebuchet MS vienen con Windows 2000/XP muy comunes en sistemas Windows 98 ya que vienen con Office y word.

2 Las fuentes simbólicas no se muestran en  Internet Explorer, en otros navegadores se usarán fuentes de sustitución (el tipo Symbol funciona en Opera y Webdings funciona en Safari).

3 Book Antiqua es casi igual que Palatino Linotype, Palatino Linotype se incluye en Windows 2000/XP nientras que Book Antiqua se distribuyó con Windows 98.

4 Estas fuentes no son TrueType sino tipos bitmap, anticuados y solo funcionan en determinados tamaños fijos ( 8, 10, 12, 14, 18 y 24 puntos a 96 DPI).

5 Estas fuentes funcionan en Safari pero no en negrita o cursiva. Comic Sans MS funciona en negrita pero no en cursiva.

6 Disponible en Mac OS X con Classic OS instalado.

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

http://pxtoem.com/ es una aplicación online para convertir los valores en ciseños css de px a ems. Te proporciona luego el código css / html para facilitar el trabajo de diseño tipográfico en css.

http://pxtoem.com/

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

Original: http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

Tipografía elegante es atractivo cuando se comunica el diseñador y las ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Cuando sabiamente escogidos y utilizados con cuidado, puede ser muy eficaz en el apoyo al diseño global. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right. Los diseñadores siempre están explorando diferentes técnicas con el tipo: algunas imágenes o utilizar sIFR para producir muy hermosa tipografía, mientras que otros prefieren CSS solo para obtener la tipografía correcta.

Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs . Hoy en día, vamos a ver a 50 más útiles herramientas tipográficas, técnicas y recursos eficaces para la creación de diseños y expresiva. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. También echaremos un vistazo a algunas prácticas de la tipografía herramientas que ayudan a los diseñadores y desarrolladores de aprender a su estilo el contenido de la Web, prueba interactiva y ver los cambios instantáneamente. These tools are great for experimenting with different font types for your website. Estas herramientas son ideales para experimentar con diferentes tipos de fuente para su sitio web.

Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography. A continuación se cubren las herramientas tipográficas, útiles referencias tipográficas, los navegadores de fuente, tipográfico y CSS-Javascript-técnicas, técnicas de separación silábica, sIFR herramientas y recursos, redes y herramientas relacionadas, libre y de fuentes comerciales, una guía de la Web de la tipografía, los ejemplos de gran tipografía Web .

Please feel free to suggest further tools and resources in the comments to this post. Por favor, siéntase libre de sugerir nuevas herramientas y recursos en los comentarios a esta entrada. And if you like this post please feel free to subscribe to our RSS-feed Y si te gusta este puesto, por favor siéntase libre de suscribirse a nuestro RSS and follow us on Twitter y siga con nosotros en Twitter .

You may want to take a look at the following related articles: Si lo desea, puede echar un vistazo a los siguientes artículos relacionados:

• 50 Extremely Useful PHP Tools 50 Herramientas de PHP muy útiles
• 50 Extremely Useful CSS Tools 50 Extremadamente CSS Herramientas útiles

1. Typographic Tools Herramientas tipográficas

Instead of doing your own testing, use the useful and time-saving tools below. En vez de hacer su propio ensayo, el uso y la utilidad de las herramientas de ahorro de tiempo a continuación. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties. Ellos te ayudarán a jugar con la tipografía y de tomar decisiones por darle una vista previa en tiempo real de muchas de las propiedades disponibles de fuentes CSS.

HTML Ipsum HTML Ipsum
A useful little website created by Chris Coyier. Un sitio web muy útil creada por Chris Coyier. It provides you with the standard Latin text already in HTML tags. Se prevé que con la norma en el texto latino ya las etiquetas HTML. Clicking on any of the blocks automatically copies the text to your clipboard! Al hacer clic en cualquiera de los bloques de copia automáticamente el texto en el portapapeles!

Typechart Typechart
Typechart lets you flip through, preview and compare Web typography while retrieving the CSS. Typechart le permite a través de tapa, una vista previa y comparar la tipografía web, mientras que la recuperación de la CSS. You can browse different typographic styles. Puede navegar por diferentes estilos tipográficos. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Cada estilo corresponde a un estilo de identificación, que le permite anotar los prototipos y de recuperar la CSS, mientras que la codificación. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering. Otra característica útil es que se puede comparar Windows (ClearType) la prestación de Apple con la renderización de fuentes.

TTFTitles WordPress Plugin TTFTitles WordPress Plugin
This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango ). Este plugin le permite utilizar imágenes para sustituir a los títulos de sus puestos, por lo tanto, eludir el problema de adivinar lo que sus fuentes a los usuarios finales puedan tener instalado (a través de hyperdjango).

Fontstruct Fontstruct
FontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. FontStruct es una fuente libre de consolidación de la herramienta que le permite crear rápida y fácilmente las fuentes construidas de formas geométricas, que están organizados en una cuadrícula, como baldosas o ladrillos.

abcTajpu Firefox Extension abcTajpu Firefox Extension
Type in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own). Escriba letras acentuadas, caracteres o símbolos internacionales en Firefox o Thunderbird, ya sea simplemente por medio de un menú de contexto (la existencia de soporte para muchos idiomas), o por teclado macro rápidamente (incluso puede definir su propio).

PXtoEM PXtoEM
This tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter). Esta herramienta convierte las unidades de píxel a las unidades em-16px navegador utilizando el tamaño predeterminado (a través de briancray @ y @ CasJam en Twitter).

Em Calculator Em Calculadora
Em Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. Em Calculadora es una pequeña herramienta de JavaScript que le ayuda a hacer escalable y accesible diseño CSS. It converts sizes in pixels to relative em units, which are based on a given text size. Convierte el tamaño en píxeles a em relativa unidades, que se basan en un determinado tamaño del texto.

CSSTYPE CSSTYPE
CSSTYPE v2 lets you preview your text as you modify it. CSSTYPE v2 le permite una vista previa de texto como lo modifica. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. Puede establecer la fuente de la familia, tamaño, color, carta de espaciamiento de texto, el espaciamiento, altura de línea y otras propiedades. The CSS code can be generated easily once you are satisfied with the previews. El código CSS se puede generar fácilmente una vez que esté satisfecho con las previstas.

CSS-Typoset Matrix and code generator CSS-Typoset Matriz y generador de código
This tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. Esta herramienta (por desgracia, sólo en alemán) calcula los tamaños de fuente y la línea de altura y en em px y los presenta en una matriz. The tool computes both symmetrical and asymmetricam margin. La herramienta calcula tanto simétricas y asymmetricam margen. Useful! Útil!

wp-typogrify WordPress Plugin wp-typogrify WordPress Plugin
wp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well. wp-typogrify es una colección de Django plantilla filtros que ayudan a embellecer su web mediante la prevención de la tipografía y las viudas cita feo y el suministro de estilo CSS ganchos para algunos casos especiales. script Python para Django se encuentra disponible como así.

FontBurner FontBurner
After you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Después de encontrar la fuente que desea utilizar, Font del quemador le da un trozo de código que se inserta en la cabeza de su página web. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately. Siempre que usted no tiene conflictos de estilo, la nueva fuente se mostrará en su sitio de inmediato.

Convert TrueType Font to sIFR Flash File Fuente TrueType para convertir archivos Flash sIFR
Upload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail. Subir su tipo, y la herramienta genera el archivo de Flash (swf) y lo envía a su e-mail.

Text 2 PNG Conversion Texto 2 PNG Conversión
This service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. Este servicio le proporciona la capacidad de convertir la navegación y que los titulares de imágenes PNG automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Funciona mediante la adición de un archivo JavaScript que la selección de etiquetas y de reemplazar. Useful, for instance if you want to generate an image with an embedding e-mail-address. Útil, por ejemplo, si desea generar una imagen con una incrustación de correo electrónico.

7 Free Tools To Identify A Font 7 Herramientas gratuitas para identificar una fuente
A list of free online tools to speed up the identification process. Una lista de herramientas en línea libre para acelerar el proceso de identificación.

21 Typography Web Applications You Can’t Live Without 21 Tipografía Aplicaciones Web No se puede vivir sin

2. Useful typographic references Útiles referencias tipográficas

Better CSS Font Stacks Mejor CSS Fuente Pila
A couple of useful font cascades for your CSS-stylesheet. Un par de cascadas fuente útil para su hoja de estilos CSS.

FontsMatrix FontsMatrix
Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter) Matriz de fuentes incluido con Mac y sistemas operativos de Windows, Microsoft Office y Adobe Creative Suite (a través de @ lucianosb en Twitter)

Common fonts to all versions of Windows & Mac equivalents Fuentes comunes a todas las versiones de Windows y Mac equivalentes
The list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”. La lista con el conjunto estándar de fuentes comunes a todas las versiones de Windows y Mac de sus sustitutos, a veces se refiere como “fuentes de seguridad del navegador”.

Default Mac OS X 10.4 fonts list (via Elementiks ) Por defecto de Mac OS X 10.4 lista de fuentes (a través de Elementiks)

Default Windows fonts list (via Elementiks ) Lista de fuentes por defecto de Windows (a través de Elementiks)

3. Choosing a font La elección de una fuente

Type Tester Tipo de prueba
Type Tester is an online application that allows you to test different typefaces. Tipo Tester es una aplicación en línea que le permite probar diferentes tipos de letra. You have three columns of text and can modify the typography any way you please. Dispone de tres columnas de texto y la tipografía puede modificar la forma que por favor. You then get the CSS that accompanies your selections. A continuación, obtener el CSS que acompaña a su selección.

STC fontBROWSER STC fontBROWSER
This tools enables you to preview fonts installed on your system online. Esta herramienta permite obtener una vista previa de tipos de letra instalados en su sistema en línea.

Font Picker Selector de fuente
This simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Esta sencilla herramienta te muestra todas las fuentes instaladas en tu equipo y te ayuda a elegir cuál es el más apropiado para un determinado proyecto. Also available as Adobe AIR application . También disponible como aplicación Adobe AIR.

FontTester FontTester
Font Tester is a free online font comparison tool. Tester es una fuente libre de la herramienta en línea de fuentes de comparación. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. Le permite fácilmente una vista previa y comparar los diferentes tipos de letra al lado de diversos estilos de fuente CSS se aplica a ellos.

CSS Type Set Tipo de Ajuste CSS
CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately ( @jmreedy ). Tipo de Ajuste CSS es una herramienta práctica que le permite una vista previa de texto CSS lo modifica, y genera el código para que de inmediato (jmreedy @).

Flipping Typical Flipping típicos
This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. Esta es una buena manera de explorar los populares tipos de letra que usted tenga en su computadora y ver que uno se inscribe en el proyecto que está trabajando. This is done by creating text that is displayed using various typefaces from your computer. Esto se hace mediante la creación de texto que se muestra utilizando diversos tipos de letra de su ordenador.

4. Typographic Techniques Las técnicas tipográficas

12 Examples Of Paragraph Typography Apartado 12 Ejemplos de Tipografía
A showcase of some interesting techniques for designing paragraphs, by Jon Tan. Una muestra de algunas técnicas de interés para el diseño de los párrafos, por Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Algunos de estos estilos son experimentos usando pseudo elementos adyacentes y hermano selectores; navegador no es compatible.

Rendering Complex Type — Who’s got the Love? Renderizado Complejo Tipo – ¿Quién tiene el amor?
Learn how to create a complex typographic sample with pure CSS. Aprenda a crear un complejo tipográficos muestra con puro CSS.

10 Examples of Beautiful CSS Typography and How They Did It 10 Ejemplos de Bellas CSS Tipografía y ¿Cómo lo Hicieron?
A lot of great websites out there have beautiful typography using only CSS. Un gran montón de sitios web por ahí han hermosa tipografía usando sólo CSS. But simply looking at them gives you only half the picture. Sino simplemente en busca de ellos le da sólo la mitad de la imagen. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type. Este puesto presenta ejemplos de buenas limpia tipografía usando CSS, pero nada, y que explica lo que los diseñadores hicieron para lograr este hermoso tipo.

typeface.js typeface.js
With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. Con typeface.js, puede incrustar fuentes personalizadas en sus páginas Web para que usted no tiene que hacer el texto como las imágenes. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR , or JavaScript and PHP like FLIR . Lo que lo hace diferente es que es sólo de JavaScript, Flash y JavaScript no como sIFR, o JavaScript y PHP como FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. Así, en vez de crear las imágenes utilizando Flash o simplemente para mostrar su página web el texto en la fuente que desea, puede utilizar typeface.js y escribir en HTML y CSS, como si sus visitantes tuvieron la fuente instalada localmente. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal. Es bastante fácil de usar: carga el typeface.js biblioteca y typeface.js algunas fuentes, a continuación, proceder como de costumbre.

Facelift Image Replacement (FLIR) Imagen sustitución Facelift (FLIR)
Facelift Image Replacement (FLIR) 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. Imagen sustitución Facelift (FLIR) es una imagen de sustitución script que genera dinámicamente imagen de las representaciones de texto en su página web en las fuentes que de otra manera podrían no ser visibles para sus visitantes. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. La imagen generada se inserta automáticamente en su página Web a través de JavaScript y es visible en todos los navegadores modernos. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! Cualquier elemento con el texto puede ser sustituido, desde las cabeceras (<h1>, <h2>, etc) a los elementos y todo <span> entre! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. FLIR SEO es fácil y sólo hace una imagen, si JavaScript está habilitado en el navegador del usuario. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages. Si utiliza WordPress para su blog, puede encontrarse con este plug-in de utilidad para aplicar fácilmente FLIR a sus páginas Web.

P+C DTR P + C DTR
PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. PHP + CSS dinámico de reemplazo de texto es una versión libre de JavaScript de la dinámica de reemplazo de texto método, lo que le permite tomar una vainilla, basada en estándares (X) HTML página Web dinámica y crear imágenes para sustituir a las rúbricas página, usando sólo PHP y CSS. The technique is currenty unavailable for download. La técnica es currenty disponible para su descarga.

Advanced Typography Techniques Using CSS Utilizando técnicas avanzadas de tipografía CSS
While descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. Si bien las descripciones y usos básicos de tipografía CSS los controles han sido golpeados a muerte, muchos ricos tipográficos capacidades de CSS todavía no están bien documentados. This post is a great example of what you can do by combining and tweaking type using CSS. Este puesto es un gran ejemplo de lo que puede hacer combinando y modificando el tipo utilizando CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more. Se introducen diferentes técnicas: reflexiones, caída de caracteres, de escritura a mano, los titulares de los periódicos y más.

Typographic Contrast and Flow Contraste tipográfico y de flujo
Typographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. Contraste tipográfico es importante porque no todas las piezas de contenido en una página tiene el mismo peso: algunos tienen más importancia que otros. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Al crear el contrario, dirigir la atención del lector a los mensajes importantes y también mejorar atractivo visual. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space. Aquí hay siete métodos básicos para crear contraste tipográfico, utilizando el tamaño, tipo de letra, el color, el caso, el estilo / decoración, el peso y el espacio.

5. Hyphenation Separación silábica

OnLine Hyphenation En línea separación
This tool takes care of automatic Automatic hyphenation for texts and sites. Esta herramienta se encarga de la separación automática automática de textos y sitios. The tool uses ­ and inserts hyphens in the right places to make the justified text look readable. La herramienta utiliza ­ inserta guiones y en los lugares adecuados para que el texto justificado mirar legible. The tool is a little bit buggy and not perfect, but is still useful. La herramienta es un poco más errores y no es perfecto, pero sigue siendo útil.

Hyphenator Hyphenator
Hyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. Hyphenator.js pone del lado del cliente separación de documentos HTML a todos los navegadores mediante la inserción de guiones suave utilizando patrones de separación silábica y Frank M. Liang ‘s conocido algoritmo de separación de LaTeX y OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation . El objetivo es proporcionar de palabras en todos los navegadores que soporten JavaScript y el guión suave, por lo menos, Inglés, alemán y francés. Este es el script del lado del servidor que hace la separación silábica.

6. sIFR

sIFR 2.0: Rich Accessible Typography for the Masses sIFR 2.0: Rich Accesible Tipografía para las Masas
sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. sIFR (o sustitución escalable Inman Flash) es una tecnología que le permite reemplazar elementos de texto en la página con Flash equivalentes. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. Se utiliza JavaScript para la página de destino determinados elementos de texto y reemplazarlos con Flash, lo que resulta en el mismo texto, pero prestados en una nueva fuente. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. Esto significa que son libres de utilizar cualquier fuente que desee en su diseño, en lugar de limitarse a una pequeña serie de “seguros” fuentes Web. sIFR is easier to implement than any other image replacement technique. sIFR es más fácil de aplicar que cualquier otra técnica de imagen de sustitución. Instead of manually generating each header with an image editor, you’re able to skip the editor completely. En lugar de generar manualmente cada cabecera con un editor de imágenes, usted puede saltar el editor completamente.

sIFR lite sIFR lite
A solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. Una solución similar a la original sIFR paquete, pero más pequeños (3,7 Kb) que la original (22 Kb) y incluso más ingeniosas funciones. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class. Se auto-detecta el color de los elementos de texto, está totalmente orientado a objetos, no utiliza los selectores CSS y las metas por los elementos nombre de etiqueta y clase.

sIFRvault sIFRvault
A repository of sIFR fonts, rated, tagged and available for download. Un repositorio de fuentes sIFR, nominal, etiquetados y disponibles para su descarga. Users can submit their SWF-files as well. Los usuarios pueden presentar sus archivos SWF también. Please notice that you need to respect all copyright and licensing laws – some of the featured fonts appear to be commercial (via chrisjlee ). Tenga en cuenta que es necesario respetar todos los derechos de autor y licencias de las legislaciones – algunas de las fuentes parecen ser comercial (a través de chrisjlee).

jQuery sIFR Plugin sIFR jQuery Plugin
The jQuery sIFR Plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR). El sIFR jQuery Plugin es un complemento para jQuery que hace que sea fácil reemplazar texto en una página web con flash texto (sIFR). It gives you a function in javascript to replace text in a web page dynamically with sIFR (Scalable Inman Flash Replacement) text, using native jQuery functionality along with the jQuery Flash Plugin. Le da una función en javascript para reemplazar texto en una página web dinámica con sIFR (Scalable Inman Flash de reemplazo) de texto, usando jQuery nativo junto con la funcionalidad de jQuery Flash Plugin.

Multi color sIFR 2.0.1 Multi color sIFR 2.0.1
This version of sIFR supports strong , em and span -elements and can color parts of the headline in colors. Esta versión de sIFR apoya strong em y span elementos y partes de color en el título colores.

jQuery sIFR Plugin sIFR jQuery Plugin
The jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). El sIFR jQuery Plugin es un add-on para jQuery que hace que sea fácil reemplazar texto en una página Web de texto con Flash (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers. El sIFR jQuery Plugin que hace todo el trabajo de averiguar el texto, los archivos, tamaños, colores y cualquier otra configuración necesaria para convertir el texto a una hermosa fuente sIFR, en consonancia con el comportamiento en todos los principales navegadores.

sIFR Generator Generador sIFR
The big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. La gran desventaja de sIFR es sIFR que la creación de archivos es una tarea tediosa que también requiere de Adobe Flash Studio con el fin de crear un archivo. Swf con el archivo de la fuente de su elección. At least, that was the big disadvantage until now. Al menos, esa es la gran desventaja hasta ahora. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. sIFR Generator es una herramienta en línea que permite crear sIFR. swf con unos pocos clics del ratón. Simply upload the TTF font of the font you want to convert, preview and download. Basta con subir el tipo de letra TTF de la fuente que desea convertir, previsualizar y descargar.

7. Grids Rejillas

gridr buildrrr gridr buildrrr
This tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout. Esta herramienta genera diversas redes sobre la marcha y permite a los usuarios definir el ancho de las redes, así como canal para el diseño de cajas.

The Grid System El sistema de cuadrícula
An aggregator of articles, tools, books and resources related to grid-systems. Un agregador de los artículos, herramientas, libros y recursos relacionados con los sistemas de la red.

Typographic Grid Cuadrícula tipográfica
If your website is heavy with text content, you will need to pay attention to the underlying grid. Si su sitio web es pesado con contenido de texto, tendrá que prestar atención a la red subyacente. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. Echa un vistazo a Tipografía Grid, creado recientemente por Chris Coyier: “Yo estaba alrededor de rosca con la tipografía y hacer las cosas a la línea de acuerdo a una estricta rejilla horizontal y vertical. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height .” Check out the demo here . Se inspira en la composición a un ritmo vertical artículo de Richard Rutter, hace unos años, con excepción de usos unitless línea de altura. “Echa un vistazo a la demo aquí.

Grid Designer Cuadrícula de diseño
Anyone looking for a little help to get going with grid design should look at this handy tool. Cualquier persona en busca de un poco de ayuda para ponerse en marcha con el diseño de la red debería mirar en esta práctica herramienta. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. 2 Diseñador de rejilla permite configurar las variables para su diseño, como el número de columnas, la anchura en píxeles, cunetas y los márgenes. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. También puede establecer las variables de la tipografía, de modo que usted puede controlar el tamaño, peso, altura de línea y otras variables para sus párrafos y los títulos. After you set up your desired layout, all you have to do is export the CSS to use in your own design. Después de configurar su diseño deseado, todo lo que tiene que hacer es exportar la CSS a utilizar en su propio diseño.

Vertical rhythm calculator Vertical ritmo calculadora
This AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm . Esta aplicación permite AIRE desarrolladores Web que utilizan XHTML y CSS para crear sus páginas para entender y calcular los valores de ritmo vertical. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet. Introduzca los valores de salida en la aplicación y, a continuación, usted tiene la opción de copiar el resultado en el código CSS que sujetapapeles para pegar en tu hoja de estilo.

8. Free and Commercial Fonts Libre y de fuentes comerciales

40+ Excellent Freefonts For Professional Design 40 + Excelente Freefonts Para Profesionales Diseño
An overview of over 40 excellent free fonts you might use for your professional designs in 2009. Una visión de conjunto de más de 40 excelentes fuentes gratis se puede utilizar para sus diseños profesionales en 2009.

60 Brilliant Typefaces For Corporate Design 60 Brillante Tipografías Para Diseño Corporativo
Over 60 first-class commercial typefaces for corporate design. Más de 60 comerciales de primera clase para los tipos de diseño corporativo.

80 Beautiful Typefaces For Professional Design 80 Hermosas Tipografías Para Profesionales Diseño
Over 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world. Más de 80 tipos de letra para el hermoso diseño profesional, basado en las sugerencias de los diseñadores y desarrolladores web de todo el mundo.

Fontsquirrel Fontsquirrel
A growing collection of free high-quality fonts. More high-quality free fonts . Una creciente colección de alta calidad libre de las fuentes. Más de alta calidad libre de las fuentes.

Top 10 (Commercial) Fonts Of 2008 Comienzo de la página 10 (Comercial) Fuentes de 2008
This article lists this year’s most successful fonts on MyFont – in each genre. En este artículo se enumeran de este año con más éxito las fuentes de MyFont – en cada género. Based on sales numbers. Sobre la base de los números de venta.

Clean font showcase Limpieza de fuente escaparate
An extensive collection of clean, legible free fonts. Una extensa colección de limpia, libre de las fuentes legibles.

Veerle Pieters’ 10 favourite typefaces Veerle Pieters »10 tipos de letra favoritos

9. A Guide to Web Typography Guía para la Web Tipografía

Good typefaces are designed for a purpose. Buena tipos de letra están diseñados para un propósito. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project. A continuación, usted encontrará artículos muy informativo y directrices creadas por maestros de la tipografía para mostrar el efecto global que tiene buen tipo en un proyecto.

On Choosing Type Tipo de Elección
A good article from I Love Typography on choosing the right typeface. Un buen artículo de Tipografía I Love derecho a elegir el tipo de letra. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. El artículo se explica todo, desde elegir entre serif y sans-serif fuentes para recordar y honrar a leer el contenido. It’sa great post for improving your typography skills. Es un gran puesto para mejorar su tipografía habilidades.

The 100% Easy-2-Read Standard El 100% Easy-2-Leer Estándar
Best practices for good typography on the Web from Oliver Reichenstein. Las mejores prácticas para una buena tipografía en la web de Oliver Reichenstein.

Don’t be afraid of Serif Fonts No tenga miedo de Serif Fuentes
David Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices. David Rodríguez se analizan las ventajas y desventajas de sans-serif y tipografías serif y sugiere las mejores prácticas.

Elegant Web Typography Elegante Web Tipografía
A great presentation by Jeff Croft about Web typography. Una gran presentación por Jeff Croft web sobre tipografía.

10 Common Typography Mistakes 10 Errores comunes de Tipografía
The goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes. El objetivo de este post es para ayudar a los diseñadores y los clientes a comprender la importancia de una buena tipografía conocimientos y evitar algunos errores comunes.

The Non-Typographer’s Guide to Practical Typeface Selection La no tipógrafo Guía de la práctica de la Selección de Tipografía
Check out Cameron Moll’s magic formula for picking the right typeface for your needs. Echa un vistazo a Cameron Moll de la fórmula mágica para escoger el tipo de derecho para sus necesidades.

• Make a list of those familiar typefaces that you trust and know will work well in a variety of projects. Haga una lista de quienes conocen los tipos de letra que usted sabe que la confianza y trabajar bien en una variedad de proyectos.
• Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand. Complementar dicha lista con una lista de tipos desconocidos que se ocupan de objetivos específicos para el proyecto en cuestión.
• Test each typeface in small and large sizes. Cada tipo de prueba en los pequeños y grandes tamaños.
• Test in both caps and lowercase. Ensayo en ambas tapas y minúsculas.

The Principles of Beautiful Typography Los Principios de Bellas Tipografía
This is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design . Este es un gran artículo que se extrae de la realidad SitePoint libro Los Principios de Diseño Web Hermoso. The article goes into detail on fonts, letter forms, spacing, text size and more. El artículo entra en detalles sobre las fuentes, las formas carta, el espaciamiento, el tamaño del texto y mucho más. It’sa great and informative read. Es una gran e informativo leer.

Five Simple Steps to Better Typography Cinco pasos sencillos para una mejor tipografía
A series of articles by Mark Boulton that is highly worthwhile to read. Una serie de artículos de Mark Boulton que es muy útil para leer.

101 Typography Resources for Web Designers 101 Tipografía Recursos Web para diseñadores
A great list of typography-related resources from our author, Steven Snell. Una gran lista de recursos relacionados con la tipografía de nuestro autor, Steven Snell.

10. Examples of Great Web Typography Grandes ejemplos de tipografía web

Some of the designs shown below demonstrate that sometimes less really is more. Algunos de los diseños se muestra a continuación demuestran que en realidad a veces menos es más. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design. Otros hicieron en la lista debido a que el uso de texto muy bien y demostrar cómo la red puede utilizarse para hacer maravillas para el conjunto de la concepción.

Jon Tangerine Jon Tangerine

Viget Inspire Viget Inspírame

works4sure works4sure

24ways 24ways

Alex Buga Alex Buga

Wilson Miner Wilson Minero

Colour Pixel El color del pixel

Maxvoltar Maxvoltar

Mark Dearman Marca Dearman

Blogger Bake Off Hornee fuera de Blogger

Fixie Consulting Fixie Consultoría

Drupalcon Drupalcon

Guilherme Neumann Guilherme Neumann

Sursly Sursly

17 Stimulating Flickr Groups to Get You Typographically Inspired 17 Fomento de Grupos de Flickr para que te tipográficamente Inspirado
This is a list of some of the best typography Flickr groups to feed your creative appetite. Esta es una lista de algunos de los mejores grupos de la tipografía de Flickr para alimentar su apetito creativo.

17 Stimulating Flickr Groups to Get You Typographically Inspired 17 Fomento de Grupos de Flickr para que te tipográficamente Inspirado
In this collection, you’ll find a variety of websites that showcase creative and functional uses of typography. En esta colección, encontrará una variedad de sitios web que muestran los usos funcionales y creativos de la tipografía.