Entendiendo la tipografía 10 herramientas y recursos útiles

En mi último artículo en Comprender la tipografía, escribí sobre lo que implica el diseño de la tipografía y cómo manipularlo para mejorar el diseño de su sitio web y mejorar la experiencia del usuario. En este artículo, estoy listando. 10 de mis herramientas favoritas para tipografía En la red.

Estos pueden ayudar a crear cuadrículas HTML y áreas de contenido, crear estilos CSS, generar nombres de fuentes y un montón de otras cosas interesantes. Vea algunos de los enlaces a continuación y asegúrese de informarnos sus opiniones en el área de discusión posterior..

Lectura recomendada: Entender la tipografía: escribir para la web

Matriz de fuentes

Esta guía en línea fue publicada por el blog de diseño 24ways. Cuenta con una tabla matricial de todas las fuentes web estándar que encontrará por defecto de varios proveedores de software. Los títulos más populares incluyen los programas Windows, Mac OS X, Microsoft Office y Adobe Creative Suite.

Comprobación de contraste de color

El contraste de color suele ser un problema cuando se aventura fuera del modelo estándar en blanco y negro. Cuando encuentras una combinación, se siente como la perfección del diseño. Sin embargo, una mala selección de colores se ve muy mal e influirá negativamente en el diseño general. Esta pequeña herramienta web puede ayudarlo a elegir un conjunto de colores que se ajusten entre sí para cualquier diseño de estilo..

HTML-Ipsum

¿Necesita una herramienta Lorem Ipsum que pueda hacer más que solo generar texto? Este generador de HTML en línea creará bloques de código para los elementos de página más comunes. Algunos ejemplos incluyen listas desordenadas, listas de definición, formularios web, tablas y muchas otras soluciones.

Typechart

Typechart es una de mis herramientas favoritas como desarrollador de CSS. Con frecuencia busco hacer coincidir una fuente específica de mi sistema con un proyecto web, pero simplemente no tengo tiempo para hojear toda mi colección. Esta increíble herramienta le permite examinar las opciones populares de familias de fuentes e incluso descargar el código CSS adecuado!

PX-to-EM.com

A menos que restablezca el tamaño de texto predeterminado del navegador, es probable que tenga problemas para hacer coincidir ems con píxeles. Esta aplicación en el navegador proporciona una tabla de conversión y una interfaz de usuario para px to em. Con seguridad, es una herramienta muy simple, pero ofrece una guía práctica con una funcionalidad realmente simple, y no puede superar la etiqueta de precio gratis..

Conjunto de tipos CSS

No recomiendo seguir usando CSS Type Set por mucho tiempo, ya que es realmente una herramienta para principiantes. Le permite generar código CSS en función de las propiedades de fuente específicas que seleccione. Aunque es muy útil al principio, con el tiempo se convierte en una muleta para apoyarse. Y no podrás motivarte a dominar las propiedades CSS por ti mismo. Pero si necesita ahorrar tiempo en un proyecto, esta herramienta no se puede pasar por alto..

voltear típico

Aquí hay un ejemplo realmente único de una biblioteca de vista previa de fuentes. la inversión típica incluye un puñado de fuentes que son nativas de su sistema operativo. Escanea automáticamente su directorio de fuentes para obtener las soluciones más seguras para la web. Puede compararlos uno al lado del otro y elegir fácilmente entre sus opciones favoritas. Este es otro gran ahorro de tiempo que marca como favorito y no lo piense hasta el último minuto..

Cuadrícula tipográfica

Se habla mucho sobre diseñar alrededor de la cuadrícula en HTML y CSS. Es probable que entienda el concepto de cómo funcionan las grillas, y la medición de un sitio web en píxeles no es diferente. Este tutorial de cuadrícula de CSS-Tricks es más como un esfuerzo guiado para introducir los conceptos básicos de la tipografía para la era digital. Es un tema mucho más avanzado en el ámbito del diseño web. Pero si tiene algo de paciencia, le recomiendo que revise los detalles para ver cómo estas propiedades de cuadrícula pueden afectar su diseño de página..

WhatTheFont!

Todos hemos encontrado un logotipo o una imagen con una fuente no identificable realmente genial. WhatTheFont ha hecho rondas en Internet durante algunos años y sigue siendo uno de mis favoritos. Elige una imagen para cargar y su secuencia de comandos analizará el texto dentro de la imagen para que coincida con cualquier tipo de letra similar. La aplicación incluso lo vinculará con productos externos donde puede comprar cada fuente a su conveniencia.

Línea base / calculadora de altura de línea

Finalmente, una herramienta realmente poderosa para generar altura de línea y propiedades de ritmo. Simplemente ingrese los valores para el tamaño de fuente base y la altura de línea, o incluya su propio código CSS personalizado a un lado. La aplicación generará vistas previas en diferentes estilos para que puedas tener una idea de cómo se verían estas propiedades en tu propio sitio web..