Crear una base tipográfica con hojas de estilo

En los últimos años, el axioma "mobile first" ha motivado a los diseñadores a conectarse y llegar a su público teniendo en cuenta en primer lugar cómo tomarán forma el sitio y la experiencia en los dispositivos móviles. Al principio, esto significaba diseñar para la pequeña pantalla de un teléfono, pero con el tiempo, los lectores electrónicos y las tabletas se han vuelto más frecuentes que los portátiles y los ordenadores de sobremesa, lo que exige soluciones para distintos tamaños de pantalla. Y diseñar para esas múltiples pantallas significa asegurarse de que la tipografía funciona. Hoy en día, mobile first se ha convertido en algo natural, pero para garantizar que el diseño funcione bien en pantallas pequeñas, medianas y grandes, hay que pensar en "type first". Existe una amplia gama de herramientas para crear hojas de estilo tipográfico, incluidos editores de texto, editores de markdown, programas de diseño de páginas y aplicaciones web como Typecast™de Monotype.

Del backend al frontend

Antes de maquetar un sitio web, consultar las hojas de estilo tipográfico te ayudará a dimensionar las cosas utilizando una metodología de tipografía en primer lugar. Podrás ver desde el encabezado 1 hasta los pies de foto, pasando por los encabezados secundarios y el cuerpo de texto, y finalmente llevar tu tipografía a un navegador desktop y móvil para asegurarte de que todo funciona en todos los dispositivos. Los desarrolladores web suelen utilizar un editor de texto para introducir estilos CSS y componer su contenido de texto como HTML en el backend. Existen muchos editores de texto para escribir CSS y HTML a mano, y algunos de ellos ofrecen una vista previa del aspecto que tendrán la tipografía y el diseño finales en el frontend.

Los editores Markdown ofrecen una interfaz sencilla que sólo muestra texto sin formato, y muchos de ellos permiten exportar el contenido a HTML. Markdown no está pensado para sustituir a HTML o CSS, sino que es un punto de partida para aquellos que quieren un enfoque de menos es más a la hora de escribir y ver su contenido, y luego convertirlo a un formato web como XHTML o HTML. Los editores Markdown ofrecen una forma básica de trabajar con texto, en la que se etiquetan estilos, como los títulos principales, los secundarios, el cuerpo del texto y las comillas. En la pantalla, todo el texto aparece igual, con etiquetas visibles a las que has dado estilos de escritura, como "#" delante del texto destinado a ser el encabezado 1 y "##" para el encabezado 2. Y sólo cuando se ha exportado, el texto aparece en la pantalla. Y sólo cuando se ha exportado a HTML se puede ver cómo se verá en un navegador web. A menudo, tendrás que crear el CSS como un archivo separado para especificar tamaños de letra, familias y colores.

Editores WYSIWYG

Aunque muchos diseñadores y desarrolladores se han acostumbrado a utilizar editores de texto, el tiempo es oro, y todo lo que se pueda hacer para reducir el tiempo de producción y desarrollo le ayudará a usted y a su equipo a pensar primero en el tipo de letra y a publicar sus diseños de forma rápida y sencilla. Los procesadores de texto y los programas de maquetación que funcionan en ordenadores de sobremesa, tabletas e incluso teléfonos inteligentes están pensados para ofrecer a los diseñadores una experiencia de maquetación del tipo "lo que ves es lo que obtienes" (WYSIWYG), que te muestra el aspecto que tendrá tu diseño, al tiempo que proporciona el HTML y CSS necesarios para que el sitio funcione en un navegador.

Muchos programas WYSIWYG le permiten cambiar fácilmente el tamaño, el peso y el estilo de la tipografía, así como su color y el color de fondo. La aplicación Typecast de Monotype es una de estas herramientas WYSIWYG, pensada para ofrecer a los diseñadores una vista previa inmediata de la tipografía y el diseño en un sitio app fácil de usar que funciona en un navegador web.

Puede crear su base tipográfica con una familia tipográfica o con una combinación de dos o más, y los editores WYSIWYG como Typecast app le ayudan a hacer el trabajo de forma más rápida y sencilla que escribiendo su HTML y CSS línea a línea en un editor de texto. Por lo general, los diseñadores de páginas web han empezado a utilizar fuentes seguras para la Web fuentes, como las familias tipográficas Arial®, Georgia® o Verdana®. Éstas y otras fuentes están instaladas en la mayoría de los sistemas operativos, lo que les da el título alternativo de "sistema fuentes." Es importante tener en cuenta, sin embargo, que construir con el sistema fuentes durante el desarrollo preliminar, cuando se previsualizan las oportunidades de la hoja de estilo tipográfico, no significa que se deba utilizar sólo el sistema fuentes en el diseño final, diluyendo la eficacia de un sitio. El sistema fuentes está pensado como un esqueleto sobre el que construir, utilizando finalmente Web Fuentes para personalizar su tipografía y dar a su sitio una voz única.

A partir del sistema fuentes utilizado en su maquetación con Web Fuentes , puede realizar un diseño paralelo para comparar y contrastar ambos. Puede elegir entre una amplia variedad de proveedores y fuentes con el fin de dar a su sitio un aspecto que coincida con su identidad de marca existente, y llevar a cabo pruebas con el fin de encontrar un mejor partido para su fallback fuente.

Cuando hayas establecido, probado y finalizado tu tipografía, utiliza Typecast para ver tu guía de estilo, que muestra qué fuentes utilizarás, sus proveedores, tu paleta de colores y los estilos y propiedades CSS. Y si has optado por utilizar un editor de texto, un editor markdown, un procesador de textos o un programa de diseño de páginas, querrás exportar tu diseño a HTML y tus estilos a CSS para previsualizarlos y probarlos en un navegador. Con tu tipografía especificada y lista para la web, ahora tienes los activos para empezar a desarrollar primero el resto del tipo de tu sitio.