30 de los mejores recursos de tipografía web en línea
Parece que hay dos campos entre los diseñadores web: aquellos que abrazan la tipografía web , experimentan con ella y prueban cosas nuevas en prácticamente todos sus diseños; y aquellos que lo evitan como la peste, optando por usar pilas de fuentes estándares y seguras para la web con poca variación.
También parece que muchos de los diseñadores que caen en el segundo grupo desearían ser más como el primero.
Los recursos a continuación pueden ayudarlo a mejorar su tipografía web, independientemente del campamento en el que se encuentre.
Hay herramientas para crear tipografías únicas, referencias y artículos que pueden enseñarle principios tipográficos, y mucha inspiración y noticias para mantenerlo actualizado sobre el estado de la tipografía web.
Herramientas de tipografía
Typetester
Typetester le permite comparar hasta tres fuentes, una al lado de la otra, con el texto de muestra que desee. Puede especificar el tamaño de fuente de referencia, el tipo de letra, el tamaño, el guiado, el seguimiento, la alineación, el espaciado de palabras, la decoración, el color y el color de fondo para obtener una imagen muy precisa de cómo se verán las fuentes en el sitio web real. Luego, cuando todo se ve exactamente como lo quieres, puedes obtener el CSS.
HTML Ipsum
HTML-Ipsum es un generador lorem ipsum específicamente para diseño web. En lugar de simplemente darle trozos de texto, HTML-Ipsum puede darle un texto preformateado como párrafos, listas ordenadas, tablas vacías, formularios y listas de navegación. El texto preformateado como este es una gran manera de ahorrar tiempo al crear maquetas de sitios web y diseños iniciales.
Typechart
Typechart le permite explorar fuentes preformateadas y seguras para la Web y verlas, ya que aparecerán tanto en una PC con Windows como en una Mac. Puede ordenar las fuentes incluidas según el tamaño, el tipo de letra y el énfasis.
WP-Typography
WP-Typography es un plugin de WordPress que ayuda a que su tipografía WP estándar sea más atractiva. Admite separación silábica, control de espaciado, reemplazo inteligente de caracteres (incluidas comillas, guiones, elipses y símbolos matemáticos) y ganchos CSS para diseñar elementos específicos (incluidos los signos y signos, los acrónimos y los números).
Conjunto de tipos de CSS
El conjunto de tipos de CSS le permite diseñar un bloque de texto y luego copiar el CSS. Es un generador de CSS simple que es ideal para diseñar una fuente a la vez. Le permite controlar el tipo de letra, el tamaño, el espaciado, el guiado, la decoración y el color.
Volteando Típico
Voltear Típico muestra el texto de muestra en una variedad de fuentes que tiene instaladas en su computadora. Es una gran manera de comparar un montón de fuentes, una al lado de la otra, todas a la vez. La única advertencia: solo algunas de las fuentes que se muestran son seguras para la web.
Cuadrícula tipográfica
Un ritmo vertical establecido es una de las cosas que distingue a la gran tipografía de la buena tipografía. La Grilla tipográfica ayuda a establecer ese ritmo vertical para usted. También incluye una cuadrícula vertical como guía para posicionar tanto la tipografía como otros elementos.
WhatTheFont
WhatTheFont proporciona una manera fácil de descubrir qué es una fuente en particular. Simplemente suba una imagen (o especifique una URL) y WhatTheFont determinará qué fuente se está utilizando. Esta es una gran manera de encontrar las fuentes que se han utilizado en imágenes o archivos Flash.
CSS con ritmo vertical
Como ya se mencionó, un ritmo vertical consistente establece una gran tipografía aparte de la que es solo "buena". Esta herramienta puede ayudarlo a crear CSS para la tipografía que tiene un ritmo vertical constante. Solo ingrese la familia de fuentes, el tamaño de fuente base, la altura de la línea base y los tamaños de fuente de destino y calcule para obtener CSS para un ritmo vertical consistente.
Calculadora de ritmo basal
Otra gran calculadora de ritmo vertical. Este, sin embargo, le mostrará qué diferentes tamaños de letra se parecen uno al otro cuando se configura con su ritmo vertical establecido. Es una excelente manera de asegurarse de que todos los tamaños de fuente que se ven se verán bien.
Fuente Burner
Font Burner le permite incrustar fuentes en sus sitios web usando sIFR, usando una interfaz gráfica. Actualmente hay más de 1000 fuentes disponibles a través de Font Burner, y también hay un plugin de WordPress disponible. Todo lo que tiene que hacer para usarlo es encontrar la fuente que desea usar, copiar el código incrustado y luego pegarlo en el código de su sitio web.
Generador de texto ciego
Este generador de texto ficticio le permite crear no solo lorem ipsum, sino también una cantidad de otros tipos de texto ficticio. Al mismo tiempo, también puede formatear ese texto directamente dentro del generador (haga clic en Opciones avanzadas), y luego copie el CSS.
Base
Baseline es un framework de cuadrícula y tipografía que incluye archivos para restablecer los valores predeterminados del navegador y crear un diseño tipográfico básico. Es una buena opción para los diseñadores que desean utilizar un diseño de cuadrícula y también desean ayuda con el diseño de la tipografía del sitio. La configuración de la tipografía incluye titulares, listas, párrafos, blockquotes y tablas, así como algún otro código de marcado.
Matriz de fuentes
Font Matrix muestra las fuentes incluidas con los sistemas operativos Mac y Windows, Microsoft Office y Adobe Creative Suite, todo en una cuadrícula que facilita ver qué fuentes se encuentran con mayor probabilidad en cada tipo de computadora. Por ejemplo, si su sitio atiende principalmente a diseñadores, puede hacer que el primer tipo de letra de su fuente sea algo que viene con Adobe Creative Suite, mientras que si el sitio está dirigido a usuarios comerciales, la primera fuente incluida podría ser algo de Microsoft Office.
Typograph
Typograph te permite experimentar con diferentes escalas y otros elementos del ritmo vertical. Incluye una variedad de escalas tradicionales (incluidos Le Corbusier y Fibonacci), así como otras opciones de diseño.
Servicios de fuentes web
Typekit
Typekit ofrece fuentes de una variedad de vendedores de tipo y fundiciones, incluidas The League of Movable Type, FontFont y Veer (puede ver toda la lista de fuentes sin tener que registrarse para obtener una cuenta). También ofrecen opciones de control avanzadas para diseñar sus fuentes, escalabilidad infinita y un colofón que les dice a los visitantes qué fuentes está usando su sitio. Los precios de Typekit son razonables, y van desde acceso parcial gratuito hasta $ 100 por año para sitios con mucho tráfico.
Kernest
Kernest es un servicio de fuentes web que utiliza fuentes OFL, GPL, GUST y Creative Commons, así como aquellas con licencias comerciales. Muchas de sus fuentes son gratuitas (el servicio en sí es gratuito), mientras que otras tienen tarifas de suscripción que comienzan en unos pocos dólares.
Fuentes en vivo desde Ascender
Ascender ofrece su propio servicio de fuente web, Fonts Live. Tienen más de 110 tipos de letra disponibles, con fuentes de Monotype, Microsoft, Bigelow y Holmes y otros, así como sus propias fuentes.
Google Font API
Google ofrece una selección limitada de fuentes web de código abierto. Si bien la selección no es grande, es gratuita y está respaldada por Google, lo que significa que es poco probable que se encuentre con problemas de capacidad o tiempo de retraso.
TypeFront
TypeFont enfoca las fuentes web de forma un poco diferente. En lugar de ofrecer una biblioteca de fuentes amigables para la web, le permiten cargar sus propias fuentes que tienen una licencia amigable para la web. Esta es una gran opción si las fuentes que desea utilizar no están actualmente disponibles en ninguno de los otros servicios de fuentes web. Hay un plan gratuito para sitios con poco tráfico, así como también planes pagos.
Fuentes web Typotheque
Typotheque ofrece su propio servicio de fuente web para hacer que sus fuentes estén disponibles para implementaciones @ font-face. La ventaja es que solo hay un costo de licencia por única vez que puede cubrir tanto aplicaciones impresas como web. La desventaja es que la selección se limita solo a sus fuentes.
Recursos y artículos de tipografía
Los elementos del estilo tipográfico aplicado a la Web
Esta es una guía de referencia muy completa para cualquiera que quiera aprender no solo los conceptos básicos de una buena tipografía web, sino también técnicas y principios más avanzados. Se divide en capítulos y subcapítulos, que incluyen movimiento horizontal y vertical, bloques y párrafos, paginación, tamaño y mucho más. Es un trabajo en progreso, por lo que esperamos que aparezca más información en el futuro.
Buen tipo de web
Nice Web Type tiene toneladas de información sobre la implementación de la tipografía web. Tienen "notas" sobre todo, desde empezar con la tipografía web hasta usar CSS @ font-face. También discuten tendencias y nuevas ideas de forma regular, y tienen una página dedicada a lo que consideran algunas de las mejores fuentes que existen.
12 ejemplos de tipografía de párrafo
Esta colección de formatos de párrafo de muestra de Jon Tan brinda un excelente punto de partida para cualquier persona que diseñe un sitio de texto pesado. Muchos diseñadores pasan por alto todas las posibilidades que ofrece el estilo de párrafo y optan por opciones conservadoras más tradicionales. Este artículo demuestra que no es tan difícil salir de la caja y hacer algo interesante con los párrafos en sus diseños.
Contraste tipográfico y flujo
Esta es una fantástica guía de WebDesignerWall sobre los principios de flujo y contraste en la tipografía web. Desglosa estos principios en varias secciones, incluido el tamaño, la tipografía / clasificación, el color y el peso.
Pila de fuentes revisada
Este artículo describe la expansión de las pilas comunes de fuentes CSS seguras para la web al explorar otras fuentes comúnmente instaladas. También explora las pilas de fuentes de algunos sitios web populares, junto con recomendaciones sobre cómo podrían mejorar sus stacks.
En la tipografía web
Este artículo de Jason Santa Maria en A List Apart es una visión muy completa de tipos de letra de emparejamiento en los diseños de su sitio web. Es un tema que no se discute muy a menudo, pero es primordial para la creación de grandes diseños tipográficos en la web.
Pensando con Tipo
Thinking with Type es el sitio web complementario al libro del mismo título de Ellen Lupton. Ofrece mucha información básica sobre tipografía. Si bien gran parte se centra en la tipografía impresa, gran parte de la información incluida se puede aplicar a la tipografía web.
10 excelentes consejos para mejorar tu tipografía web
Una lista de diez cosas simples que puede hacer para mejorar la tipografía en los diseños de su sitio web. Incluye información sobre la fuente, el tamaño, la escala y la jerarquía, los principales y más.
Inspiración de tipografía, tendencias y noticias
Typophile
Typophile es un foro para entusiastas tipográficos y tipógrafos. Si desea saber qué está pasando en el mundo de la tipografía, Typophile es un excelente lugar para buscar. También es un buen lugar para obtener ayuda con cualquier problema relacionado con la tipografía que pueda tener.
Amo la tipografía
ILT es un blog dedicado completamente a la tipografía. Discute temas de diseño y negocios, desde un punto de vista profesional. Su archivo es enorme, por lo que hay mucha información sobre noticias actuales y pasadas y tendencias para mantenerte ocupado.
nos encanta la tipografía
WLT es una galería de tipografía, rotulación, señalización y otro tipo. Los usuarios pueden enviar imágenes del tipo que aman, y es un gran lugar para inspirarse en la tipografía para su próximo proyecto.
Tipografía para los titulares
Elements of Design tiene una gran galería de más de 120 ejemplos de tipografía de titulares. Van desde lo simple a lo complejo, en una variedad de tipos de letra y estilos. Es un lugar excelente para ir si buscas un poco de inspiración. También tienen una galería de juntar citas con más de 20 ejemplos
Typographica
Typographica ofrece reseñas de tipos, comentarios y reseñas de libros tipográficos. Sus revisiones de tipo son particularmente informativas si lo que buscas es aprender qué es lo que hace que un tipo de letra sea bueno.
Detrás de las escenas de la exquisita tipografía web
Esta es realmente la primera de una serie de cinco partes. Esta publicación analiza la tipografía detrás de A List Apart, desglosando las fuentes y los estilos utilizados para diferentes partes del sitio. Publicaciones posteriores: Jesús RodrÃguez Velasco , Jon Tan , Designr.it y El Codex Transportica .
Typesites
Typesites es un blog que muestra grandes diseños de tipografía web de forma regular. Los sitios que presentan son diversos, pero todos incluyen el uso de inspiración de tipo.
Compilado exclusivamente para Webdesigner Depot por Cameron Chapman