Bookmarklets para trabajar la tipografía de una web

Ayer vimos una utilidad, un plugin, para decidir la familia tipográfica de una web a priori, desde la creación de un boceto en Photoshop:

Añade Google Web Fonts a Photoshop

Hoy vamos a ver cómo trabajar sobre la tipografía on the fly, trabajar con la tipografía de una web desde el navegador gracias a estos bookmarklets.

En la maquetación web una de las decisiones que debemos tomar es qué tipografía vamos a utilizar. Con HTML5 y CSS3 las opciones son muchas más.

Con estos bookmarklets javascript podemos centrarnos en la tipografía de un sitio web y probar otras alternativas.

Para utilizarlos no tienes más que visitar los enlaces y arrastrar los bookmarklets hasta tu barra de marcadores/favoritos.

1.- FontFriend

Puedes hacer cambios al peso, cambiar el tipo, el tamaño, interlineado e incluso utilizar selectores jQuery  para interactuar con elementos específicos de la página. Montones de opciones que incluye la posibilidad de probar cualquier tipo de Google Web Fonts

bookmarklet javascript tipografía CSS

2.- ffffallback

Como su nombre indica este bookmarklet te ayuda a encontrar un fallback para comparar y ver cómo quedarían otras opciones.

bookmarklet javascript tipografía CSS

3.- Min

Min simplemente elimina colores, fondos y bordes para centrarnos sólo en la tipografía de la página.

4.- FontDropper 1000

Otro servicio de Extensis para probar su catálogo de WebINK seleccionando el tipo y arrastrándolo sobre cualquier texto de la página.

bookmarklet javascript tipografía CSS

5.- Kern.JS

Para ajustar el kerning siempre y cuando el sitio web esté utilizando el magnífico plugin jQuery Lettering.JS.

bookmarklet javascript tipografía CSS

5.- WhatFont

Para ver el qué fuente tipográfica está utilizando un elemento de una web. Ya hablamos de él en este post: Tipografía web “real” con Bookmarklet

También disponible ahora como extensión para Chrome y Safari.

6.- Opera Browser Wiki :: Opera Bookmarklets Page

Varios bookmarklets con funcionalidades concretas para varios usos tipográficos, cambiar el tamaño, caja alta, etc.

Y muchos otros que no tienen que ver con tipografía pero te pueden ser útiles como:

7.- FonFonter

Te permite probar las fuentes de Web FontFonts

bookmarklet javascript tipografía CSS

Otras posibilidades

Por último si no quieres utilizar ningún bookmarklet siempre puedes utilizar Firebug en Firefox o las Herramientas para desarrolladores/desarrollo de Chrome e IE respectivamente.

O el completo typetester

Typester

Debates tipográficos

Cursos de diseño web

5 cursos sobre diseño web:

  • Diseño de interfaz con Photoshop e Illustrator: En este ejemplo totalmente práctico verás todo el proceso de diseño de un book de trabajo para la web: desde las decisiones previas hasta la exportación final. Todos los pasos, uno a uno hasta llegar al resultado requerido. Con Adobe Photoshop y Adobe Illustrator crearás un diseño completo y listo para ser enviado al equipo de desarrollo de Flex, que se encargará de su finalización.
  • Diseño de tienda online con Adobe Photoshop. Crea tu Home de comercio electrónico. Dos ejemplos combinados: Creación de tienda online para Flash y Creación de tienda online para HTML. Con ambos ejercicios online de video2brain aprenderás a trabajar de forma productiva con Adobe Photoshop, creando diseños para tiendas online, sea cual sea su salida final.
  • Adobe Fireworks CS5 Integral: Este completo curso video2brain es la manera de comprobar el enorme potencial que encierra este programa y te enseñará a exprimir todas las funciones de las que dispone. Creación de prototipos web, con total integración con toda la suite CS5 y además con interacción, ¿qué más se puede pedir?
  • Maquetación web. Curso esencial práctico. Maquetar una web consiste en tomar el diseño y la arquitectura del sitio y convertirlo en código para el programador. Esta es una profesión muy demandada que requiere de conocimientos de varias disciplinas, como estilos CSS, HTML, etc. En este curso práctico te presentamos cómo abordar de forma profesional la tarea de convertir un diseño realizado en Photoshop o Fireworks en una web totalmente funcional con el uso de Dreamweaver.
  • HTML5 y CSS3: HTML5 y CSS3 te permiten desarrollar webs más accesibles, más interactivas, y visualmente más atractivas: Adaptadas a los nuevos tiempos. Asegura el futuro de tu sitio web realizando este curso video2brain de actualización a estas tecnologías.

Si los quieres todos hazte con una suscripción y si estás trabajando por cuenta ajena en España solicita las ayudas para que te salgan gratis.

Escribí esto el 11/11/2011

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies