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:
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
2.- ffffallback
Como su nombre indica este bookmarklet te ayuda a encontrar un fallback para comparar y ver cómo quedarían otras opciones.
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.
5.- Kern.JS
Para ajustar el kerning siempre y cuando el sitio web esté utilizando el magnífico plugin jQuery Lettering.JS.
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:
- Go To Random Link
- Hide visited links
- AutoFill Anonymous. Completa formularios con anonymous.
7.- FonFonter
Te permite probar las fuentes de Web FontFonts
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
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.
Deja una respuesta