Share
La tipografía en la web no es nada simple, y para muchos es un misterio preocupante. Hoy, vamos a revisar seis formas en que los diseñadores y desarrolladores web pueden mejorar la tipografía de los sitios que crean..
La tipografía es el arte de diseñar letras, palabras, párrafos y cómo interactúan entre sí. Muchos diseñadores y desarrolladores a menudo equiparan la tipografía con la elección de una fuente o tipo de letra, mientras que otros simplemente olvidan que el 95% del diseño web es tipografía y tienden a olvidarse de ella. Claramente, si la tipografía es realmente el 95% del diseño web, debería estar en la vanguardia de la mente de todos los diseñadores y desarrolladores. Aquí están Seis maneras de mejorar tu tipografía web.
Los fundamentos de la tipografía son importantes para todos los diseñadores, estén o no diseñando para la web.
Definiciones tipográficas
A continuación, se incluyen algunas definiciones tipográficas básicas que todo diseñador / desarrollador debe entender cuando se trata de tipografía. Esta lista no es de ninguna manera exhaustiva. Consulte la Lista de lecturas recomendadas al final de este artículo para ver glosarios más completos..
Para crear una escala tipográfica efectiva, el mejor método que he encontrado es usar la unidad de medida de tamaño "em", ya que establece el tamaño en relación con la base de un documento determinado. En el siguiente ejemplo, el tamaño de fuente base es de 12 píxeles, lo que establecería el tamaño de fuente estándar para los párrafos en 15 píxeles.
cuerpo font-size: 12px; h1 font-size: 5.0em; h2 font-size: 4.0em; h3 font-size: 3.0em; h4 font-size: 2.0em; blockquote font-size: 1.5em; p font-size: 1.25em; entrada font-size: 1.0em; pequeño font-size: 0.75em;
El ritmo vertical del espaciado de líneas que proporciona el espaciado óptimo para que lo siga el ojo. Para crear este ritmo es mejor seguir una cuadrícula de línea de base. Desde mi experiencia, el ritmo vertical en línea se establece mejor en o cerca de 1.5em. NETTUTS +, por ejemplo, usa un ritmo vertical de 1.6em, que equivale aproximadamente a una altura de línea de 17.6px (basado en un tamaño de fuente de 11px).
A continuación se muestra un ritmo vertical estándar que uso en muchos de mis sitios web creados en el sistema de cuadrícula 960. Para lograr el ritmo vertical de manera adecuada, cada párrafo debe tener un margen o relleno debajo del equivalente a la línea base de la línea de referencia estándar..
cuerpo font-size: 12px; altura de línea: 15px; p margen inferior: 15px;
Como la mayoría de los diseñadores y desarrolladores saben, los sitios web se representan de manera diferente en diferentes navegadores. Esto es especialmente cierto con las fuentes de representación. A continuación se muestra una comparación de cómo cinco navegadores populares representan el mismo texto de manera diferente:
Fuente de la imagen: FontTech.Info Cuando se crea un diseño tipográfico o un sitio rico en contenido (como una revista o un sitio de blog), ser capaz de ver las diferencias entre la tipografía en cada uno de los diferentes navegadores y sistemas operativos es una gran ventaja. Diseñar en el navegador no es nada nuevo (incluso en 1997, cuando creé mi primer sitio web, lo diseñé completamente en el navegador). Si bien no todos los sitios son candidatos para diseñar en un navegador, los más preocupados por la tipografía son perfectos para diseñar en un navegador.
Fuente de la imagen: Para una hermosa web Andy Clarke, diseñador / autor popular, habló recientemente en An Event Apart Boston con una presentación llamada Walls Come Tumbling Down en la que abogó por el diseño en el navegador por muchas razones. La imagen de arriba, tomada de su presentación, muestra el uso de una cuadrícula estandarizada tanto para columnas como para ritmo vertical..
La mejor manera de diseñar en un navegador es usar una cuadrícula como esta. En el paquete fuente, he incluido dos cuadrículas columnares diferentes, cada una con tres variantes de ritmo vertical. El CSS a continuación muestra el método más fácil de implementar una de estas cuadrículas de prueba al reemplazar la imagen de fondo o las imágenes en el cuerpo de la página HTML utilizando una clase específica de la cuadrícula que elija. Simplemente agregue la clase especificada a la etiqueta del cuerpo o la etiqueta DIV del contenedor de contenido, y estará listo para diseñar en su navegador.
.grid960base15 ancho: 960px; altura de línea: 15px; fondo: url (images / grid960base15.png) repetición-y; .grid960base18 ancho: 960px; línea de altura: 18px; fondo: url (images / grid960base18.png) repetición-y; .grid960base30 ancho: 960px; línea de altura: 30px; fondo: url (images / grid960base30.png) repetición-y; .grid600base12 ancho: 600px; línea de altura: 12px; fondo: url (images / grid600base12.png) repetición-y; .grid600base16 ancho: 600px; línea de altura: 16px; fondo: url (images / grid600base16.png) repetición-y; .grid600base18 ancho: 600px; línea de altura: 18px; fondo: url (images / grid600base18.png) repetición-y;
Se debe tener en cuenta que para un buen ritmo vertical, es necesario tener un control granular sobre la altura de la línea para alcanzar el ritmo vertical adecuado. Además, puede usar este marcador de creación de cuadrículas para superponer cualquier sitio web con una cuadrícula personalizada. Considero que esto es útil cuando no puede reemplazar la imagen de fondo con una de las cuadrículas.
Reemplazar texto por imágenes ha sido una práctica estándar en diseño web desde los años 90. Con la adopción de CSS en los principales navegadores, comenzaron a surgir técnicas de reemplazo de imágenes que no consisten simplemente en hacer una imagen y colocarla en el lugar del texto. El primero ampliamente aceptado fue Fahrner Image Replacement (FIR), pero a medida que las personas jugaban con CSS Image Replacement, se dieron cuenta de que esta técnica no era accesible. La técnica de reemplazo de imagen Phark se concibió originalmente como un reemplazo accesible para la técnica clásica FIR. Propuesto por Mike Rundle de 9rules en 2003, Phark Image Replacement se basa en el uso de las propiedades CSS de sangría de texto e imagen de fondo para ocultar el texto al usuario, pero sigue siendo accesible para lectores de pantalla y motores de búsqueda..
Para usar Phark Image Replacement, configure el elemento contenedor (en este caso, los DIV) con un alto y ancho definidos. A continuación, establezca una imagen de fondo. Finalmente, establezca la propiedad de sangría de texto en -9999px. La propiedad text-indent esencialmente empuja el inicio del texto a la izquierda a 9999 píxeles, pero esto no aumenta el área desplazable, haciendo que el texto desaparezca.
Si bien Phark es actualmente la técnica más común de reemplazo de imagen solo para CSS, hay muchas otras con diferentes ventajas y desventajas. Por ejemplo, Phark no muestra nada al usuario si las imágenes están deshabilitadas pero CSS está habilitado, una desventaja relativamente pequeña. Además, el Reemplazo de imagen CSS no está realmente diseñado para tipografía a gran escala (es decir, artículos), pero es mejor para botones, encabezados y otras pequeñas cantidades de texto. Para obtener más información sobre otras Técnicas de reemplazo de imágenes basadas en CSS, CSS-Tricks escribió un buen resumen de todas las Técnicas de reemplazo de imágenes basadas en CSS disponibles llamadas Nueve técnicas para el reemplazo de imágenes CSS.
El reemplazo de imagen estándar es ideal para situaciones altamente decorativas y pequeñas cantidades de texto. ¿Qué hace cuando desea reemplazar el texto de todo el cuerpo de un artículo? ¿Qué hay de reemplazar titulares y mantener el texto seleccionable? La respuesta aquí es una de las técnicas avanzadas de reemplazo de imagen. Para todos los propósitos intensivos, hay tres diferentes reemplazos avanzados de imagen disponibles en este momento (si conoce alguna otra, déjelos en los comentarios): basado en flash, basado en Javascript y basado en PHP.
La primera de las técnicas avanzadas de reemplazo de imágenes que llegó a la escena fue el reemplazo de flash inman escalable (sIFR), originalmente diseñado por Shaun Inman como IFR y posteriormente avanzado a la designación de sIFR por Mike Davidson y Mark Wubben, quienes actualmente mantienen el proyecto.
PROS:
- Representación de fuente más nítida debido a suavizado
- Conserva texto original semántico y accesible.
- Degrada con gracia en el texto original
- El texto es seleccionable (parcialmente)
- Guión discreto
CONTRAS:
- No es adecuado para grandes cuerpos de texto
- La instalación puede ser complicada y complicada
- Requiere Flash y Javascript
- Los tiempos de carga pueden ser lentos
- La impresión es problemática
Si desea aprender cómo implementar y ver ejemplos de sIFR, NETTUTS + tiene un excelente tutorial sobre cómo usar sIFR o visite el sitio oficial de sIFR2 o el sitio oficial de sIFR3, la versión más reciente.
La técnica avanzada más reciente de reemplazo de imagen se llama cufón, supuestamente una palabra de portmanteau de "personalizado" y "fuente" según algunos. "Apunta a convertirse en una alternativa digna a sIFR, que a pesar de sus méritos sigue siendo dolorosamente difícil de configurar y usar" según la wiki de cufón.
PROS:
- La técnica de reemplazo de imagen avanzada más rápida
- Retiene el contenido del texto semántico original.
- Degrada con gracia en el texto original
- No requiere ningún plugin (como Flash)
- Guión discreto
- Configuración fácil
CONTRAS:
- El texto no se puede copiar y pegar (el texto no se puede seleccionar)
- La licencia de fuentes es borrosa con respecto a cufón
- La justificación del texto y los efectos no funcionan.
- : el estado de hover tiene muchas peculiaridades
- Requiere Javascript
Si desea aprender cómo implementar y ver ejemplos de cufón, NETTUTS + tiene un gran screencast y tutorial sobre cómo usar cufón o visite el sitio oficial de cufón.
La técnica de reemplazo de imagen de Facelift (FLIR) es diferente de las dos mencionadas anteriormente, ya que utiliza scripts del lado del servidor con PHP y la Biblioteca de imágenes de GD. Fue desarrollado por Cory Mawhorter para proporcionar una técnica automática de reemplazo de fuentes del lado del servidor..
PROS:
- Retiene el contenido del texto semántico original.
- No requiere ningún plugin (como Flash)
- Problemas de licencias de fuente son poco probables, si es que alguna vez
CONTRAS:
- El texto no se puede copiar y pegar (el texto no se puede seleccionar)
- La representación de fuentes es insatisfactoria en comparación con otras alternativas
- Requiere un servidor web con PHP y GD.
- Requiere más recursos del servidor
- Puede ser difícil de configurar
Si desea aprender cómo implementar y ver ejemplos de FLIR, Divito Design tiene un buen tutorial sobre cómo usar FLIR o visite el sitio oficial de FLIR
CSS3 es relativamente nuevo en el panorama de la web, y aún no ha ganado un uso generalizado. Una de las características más interesantes de CSS3 es la regla @ font-face. Hay dos grandes obstáculos para usar @ font-face en este momento. En primer lugar, no muchas fuentes y tipos de letra admiten la incorporación de @ font-face. Algunas licencias son vagas y no abordan la incrustación web, mientras que otras prohíben explícitamente la incrustación @ font-face. Para obtener una lista de los tipos de letra que admiten la incorporación de @ font-face, puede webfonts.info tiene una gran lista. El segundo obstáculo es que no todos los navegadores admiten la regla @ font-face, como se muestra en la siguiente tabla de compatibilidad de navegadores.
Fuente de la imagen: Wikipedia La regla @ font-face ahora permite incrustar fuentes en IE6, IE7, IE8, FireFox 3.5+ (PC & Mac) y Safari (PC & Mac) con soporte en Opera 10 y Chrome próximamente. Esto significa que, de alguna forma o manera, las fuentes web estarán disponibles para aproximadamente el 90% de los usuarios..
Idealmente, esta primera declaración @ font-face sería parte de un archivo CSS servido a través de comentarios condicionales solo para IE con la versión EOT de la fuente. La segunda declaración @ font-face debe ser un archivo de fuente OTF o TTF. Además, debido a las restricciones de seguridad del navegador, la URL de origen para las declaraciones debe ser relativa (aunque algunos navegadores admiten URL absolutas).
Accentsconagua
@ font-face font-family: "Anivers"; src: url ("Anivers.eot"); @ font-face font-family: "Anivers"; src: url ("Anivers.otf"); Sí. Eso es todo al respecto.
body font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;
Una vez que se realizan las declaraciones, la familia de fuentes que se ha declarado se puede utilizar como cualquier otra fuente que estaría disponible en el sistema de un usuario. Este es un territorio nuevo y emocionante para los diseñadores y desarrolladores web que será importante seguir durante los próximos meses..
Los próximos proyectos de entrega de @ font-face como Typekit y Typotheque están buscando brindar una ayuda significativa en términos de negociación de licencias de integración web con las grandes fundiciones de fuentes. Además, con todas las preguntas sobre el alquiler de fuentes para incrustación web, puede resultar difícil obtener algunas (o todas) de las fuentes que va a utilizar en un diseño web para usar en su software de edición de imágenes. Hay dos soluciones para esto: 1) diseñar en el navegador como se recomienda anteriormente, o 2) usar tipos de letra similares para diseñar los diseños de páginas estáticas.
La tipografía en la web está en su infancia en comparación con la tipografía impresa, transmitida y cinematográfica. Mira otras formas de medios para el uso inventivo de la tipografía. La próxima vez que esté en el cine, vea todos los carteles de la película y preste mucha atención a la tipografía utilizada en las vistas previas y en los trailers. Eche un vistazo a la tipografía tanto en el interior como en la portada de los libros en su librería local. Examina tu colección de DVD o tus revistas favoritas para inspirarte.
En línea, siga a los principales expertos en tipografía en línea como For a Beautiful Web, Me encanta Typography, TypeInspire o webfonts.info. A continuación, encontrará una lista de enlaces de lectura recomendados para obtener más información sobre la tipografía web, además de NETTUTS + y los mencionados anteriormente..
Con suerte, estos seis consejos lo ayudarán la próxima vez que esté trabajando en tipografía para la web. Es un momento emocionante para ser un tipófilo que trabaja en la web..
