Hispanopedia Wiki
Articulo de referencia

Tipografía web

Las fuentes web permiten a los diseñadores web utilizar fuentes que no están instaladas en el ordenador del usuario. La tipografía web , al igual que la tipografía en general, s...

Hispanopedia WikiContenido en espanolLectura gratuita
Las fuentes web permiten a los diseñadores web utilizar fuentes que no están instaladas en el ordenador del usuario.

La tipografía web , al igual que la tipografía en general, se refiere al diseño de páginas : su maquetación y la elección de fuentes . A diferencia de la tipografía tradicional para impresión (donde la página queda fija una vez compuesta ), las páginas destinadas a la World Wide Web presentan desafíos técnicos adicionales y , dada su capacidad para modificar la presentación dinámicamente , ofrecen oportunidades adicionales. Los primeros diseños de páginas web eran muy sencillos debido a las limitaciones tecnológicas; los diseños modernos utilizan hojas de estilo en cascada (CSS), JavaScript y otras técnicas para plasmar la visión del tipógrafo y del cliente.   

Cuando se creó HTML , las tipografías y los estilos se controlaban exclusivamente mediante la configuración de cada navegador web . No existía ningún mecanismo para que las páginas web individuales controlaran la visualización de fuentes hasta que Netscape introdujo el fontelemento en 1995, que posteriormente se estandarizó en la especificación HTML 3.2. Sin embargo, la fuente especificada por el fontelemento debía estar instalada en el ordenador del usuario o se utilizaría una fuente alternativa, como la fuente sans-serif o monoespaciada predeterminada del navegador . La primera especificación CSS se publicó en 1996 y ofrecía las mismas funcionalidades.

La especificación CSS2 se publicó en 1998 e intentó mejorar el proceso de selección de fuentes añadiendo coincidencia, síntesis y descarga de fuentes. Estas técnicas no tuvieron mucha acogida y se eliminaron en la especificación CSS2.1. Sin embargo, Internet Explorer añadió compatibilidad con la función de descarga de fuentes en la versión 4.0 , publicada en 1997. [ 1 ] Posteriormente, la descarga de fuentes se incluyó en el módulo de fuentes de CSS3 y desde entonces se ha implementado en Safari 3.1 , Opera 10 y Mozilla Firefox 3.5 . Esto ha incrementado el interés por la tipografía web, así como por el uso de la descarga de fuentes.

CSS1

En la primera especificación CSS, [ 2 ] los autores especificaron las características de la fuente a través de una serie de propiedades:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

Todas las fuentes se identificaban únicamente por su nombre. Más allá de las propiedades mencionadas anteriormente, los diseñadores no tenían forma de personalizar el estilo de las fuentes, y no existía ningún mecanismo para seleccionar fuentes que no estuvieran presentes en el sistema del cliente.

Fuentes seguras para la web

Las fuentes web seguras son fuentes de ordenador que se espera razonablemente que estén presentes en una amplia gama de sistemas informáticos , y que los autores de contenido web utilizan para aumentar la probabilidad de que el contenido se muestre con la fuente elegida. Si un visitante de un sitio web no tiene la fuente especificada, su navegador intenta seleccionar una alternativa similar, basándose en las fuentes de reserva y familias genéricas especificadas por el autor , o bien utiliza la sustitución de fuentes definida en el sistema operativo del visitante.

Fuentes principales de Microsoft para la web

Desde su lanzamiento dentro del programa de fuentes principales para la web de Microsoft , Arial, Georgia y Verdana se han convertido en tres fuentes de facto de la web.

Para garantizar que todos los usuarios de la web tuvieran acceso a un conjunto básico de fuentes, Microsoft inició la iniciativa Core Fonts for the Web en 1996 (finalizada en 2002). Entre las fuentes publicadas se incluyen Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings y Verdana , bajo un EULA que permitía su libre distribución, pero también limitaba algunos derechos de uso. Su alta tasa de adopción las ha convertido en un elemento básico para los diseñadores web. Sin embargo, la mayoría de las distribuciones de Linux no incluyen estas fuentes por defecto.

CSS2 intentó aumentar las herramientas disponibles para los desarrolladores web al agregar síntesis de fuentes, coincidencia de fuentes mejorada y la capacidad de descargar fuentes remotas. [ 3 ]

Algunas propiedades de fuente de CSS2 se eliminaron de CSS2.1 y posteriormente se incluyeron en CSS3. [ 4 ] [ 5 ]

Fuentes alternativas

La especificación CSS permite que se listen varias fuentes como fuentes de reserva. [ 6 ] En CSS, la font-familypropiedad acepta una lista de fuentes separadas por comas para usar, como se muestra a continuación:

font-family : "Nimbus Sans L" , Helvetica , Arial , sans-serif ;

La primera fuente especificada es la preferida. Si esta fuente no está disponible, el navegador intenta usar la siguiente de la lista. Si no encuentra ninguna de las fuentes especificadas, el navegador muestra su fuente predeterminada. Este mismo proceso se repite para cada carácter si el navegador intenta mostrar un carácter que no está presente en la fuente especificada.

Familias de fuentes genéricas

Para que los diseñadores web tengan cierto control sobre la apariencia de las fuentes en sus páginas web, incluso cuando las fuentes especificadas no estén disponibles, la especificación CSS permite el uso de varias familias de fuentes genéricas. Estas familias están diseñadas para dividir las fuentes en varias categorías según su apariencia general. Suelen especificarse como la última de una serie de fuentes alternativas, como último recurso en caso de que ninguna de las fuentes especificadas por el autor esté disponible. Durante varios años, existieron cinco familias genéricas: [ 6 ]

Sans-serif

Fuentes que no tienen marcas decorativas, o serifas, en sus letras. Estas fuentes suelen considerarse más fáciles de leer en pantallas. [ 7 ]

Serif

Tipografías que presentan marcas decorativas, o serifas, en sus caracteres. Estas tipografías se utilizan tradicionalmente en libros impresos.

Monoespacio

Fuentes en las que todos los caracteres tienen el mismo ancho.

Cursivo

Fuentes que imitan la escritura cursiva. Estas fuentes pueden tener un aspecto decorativo, pero pueden ser difíciles de leer en tamaños pequeños, por lo que generalmente se usan con moderación.

Fantasía

Fuentes que pueden contener símbolos u otras propiedades decorativas, pero que aún así representan el carácter especificado.

Las fuentes CSS funcionan en la versión preliminar 4 con menor compatibilidad con navegadores.

A partir de febrero de 2024, el Grupo de Trabajo CSS del W3C propone que los sistemas especifiquen una fuente predeterminada mediante uietiquetas; [ 8 ] a la misma fecha, estas aún no cuentan con un amplio soporte. [ 9 ]

  • Interfaz de usuario del sistema
    Fuentes predeterminadas en un sistema determinado: el objetivo de esta opción es permitir que el contenido web se integre con la apariencia del sistema operativo nativo.
  • ui-serif
    Fuentes predeterminadas en un sistema determinado con estilo serif.
  • ui-sans-serif
    Fuentes predeterminadas en un sistema determinado en estilo sans-serif
  • ui-monospace
    Fuentes predeterminadas en un sistema determinado en estilo monoespaciado.
  • ui-redondeado
    Fuentes predeterminadas en un sistema determinado con un estilo redondeado.
  • Emoji
    Fuentes que usan emojis
  • Matemáticas
    Fuentes tipográficas para fórmulas y expresiones matemáticas complejas.
  • Canción de colmillo ( chino :仿宋体)
    • Tipografías chinas que se sitúan entre las formas serif Song y cursivas Kai. Este estilo se utiliza a menudo en documentos gubernamentales.

fuentes web

Historia

Una técnica para referenciar y descargar automáticamente fuentes remotas se especificó por primera vez en la especificación CSS2, que introdujo la construcción. En aquel entonces, la obtención de archivos de fuentes de la web era controvertida porque las fuentes destinadas a usarse solo en ciertas páginas web también podían descargarse e instalarse, infringiendo la licencia de la fuente. [ 10 ]@font-face

Microsoft añadió por primera vez compatibilidad con fuentes EOT descargables en Internet Explorer 4 en 1997. Los autores debían utilizar la herramienta propietaria WEFT para crear un archivo de fuente subconjunto para cada página. EOT demostró que las fuentes web podían funcionar y el formato se utilizó en algunos sistemas de escritura no compatibles con los sistemas operativos comunes. Sin embargo, el formato nunca obtuvo una aceptación generalizada y finalmente fue rechazado por el W3C. [ 11 ]

En 2006, Håkon Wium Lie inició una campaña contra el uso de EOT y en su lugar para que los navegadores web admitieran formatos de fuente de uso común. [ 12 ] [ 13 ] [ 14 ] Desde entonces, la compatibilidad con los formatos de fuente TrueType y OpenType de uso común se ha implementado en Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 e Internet Explorer 9 .

En 2010, la Fundación Mozilla , Opera Software y Microsoft presentaron al W3C el método de compresión WOFF para fuentes TrueType y OpenType , y desde entonces los navegadores han añadido compatibilidad. [ 15 ] [ 16 ] [ 17 ]

Google Fonts se lanzó en 2010 para ofrecer fuentes web bajo licencias de código abierto . Para 2016, había más de 800 familias de fuentes web disponibles. [ 18 ]

Las fuentes web se han convertido en una herramienta importante para los diseñadores web y, a partir de 2016, la mayoría de los sitios web utilizan fuentes web. [ 19 ]

Formatos de archivo

Mediante el uso de una técnica específica de incrustación CSS [ 20 ] es posible incrustar fuentes de manera que funcionen con IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ y Chrome 4.0+. Esto permite que la gran mayoría de los usuarios de la web accedan a esta funcionalidad. Algunas fundiciones comerciales se oponen a la redistribución de sus fuentes. Por ejemplo, Hoefler & Frere-Jones afirma que, si bien «...apoyan con entusiasmo el surgimiento de una web más expresiva en la que los diseñadores puedan usar fuentes de alta calidad en línea de forma segura y fiable», la entrega actual de fuentes mediante se considera una «distribución ilegal» por parte de la fundición y no está permitida. [ 21 ] En su lugar, Hoefler & Co. ofrece un sistema de entrega de fuentes propietario basado en la nube. Muchas otras fundiciones tipográficas comerciales abordan la redistribución de sus fuentes ofreciendo una licencia específica, conocida como licencia de fuente web, que permite el uso del software de la fuente para mostrar contenido en la web, un uso normalmente prohibido por las licencias básicas de escritorio. Naturalmente, esto no interfiere con las fuentes y fundiciones bajo licencias libres. [ m 1 ]@font-face@font-face

TrueDoc

TrueDoc , aunque no es específicamente una especificación de fuente web, fue el primer estándar para incrustar fuentes. Fue desarrollado por la fundición tipográfica Bitstream en 1994 y se convirtió en compatible de forma nativa en Netscape Navigator 4 en 1996. Debido a las restricciones de la licencia de código abierto, y a que Netscape no podía publicar el código fuente de Bitstream, la compatibilidad nativa con la tecnología terminó con el lanzamiento de Netscape Navigator 6. Existía un complemento ActiveX para agregar compatibilidad con TrueDoc a Internet Explorer , pero la tecnología tuvo que competir con las fuentes Embedded OpenType de Microsoft , que contaban con compatibilidad nativa en su navegador Internet Explorer desde la versión 4.0. [ 22 ] Otro impedimento fue la falta de una herramienta de código abierto o gratuita para crear fuentes web en formato TrueDoc, mientras que Microsoft puso a disposición una herramienta gratuita de incrustación de fuentes web para crear fuentes web en su formato.

OpenType incrustado

Internet Explorer admite la incrustación de fuentes mediante el estándar propietario Embedded OpenType desde la versión 4.0. Utiliza técnicas de gestión de derechos digitales para evitar que las fuentes se copien y utilicen sin licencia. Un subconjunto simplificado de EOT se ha formalizado bajo el nombre de CWT ( Compatibility Web Type , anteriormente EOT-Lite ) [ 23 ].

Gráficos vectoriales escalables

La tipografía web se aplica a SVG de dos maneras:

  1. Todas las versiones de la especificación SVG 1.1, incluido el subconjunto SVGT , definen un módulo de fuentes que permite la creación de fuentes dentro de un documento SVG. Safari introdujo la compatibilidad con muchas de estas propiedades en la versión 3. Opera añadió compatibilidad preliminar en la versión 8.0, con compatibilidad para más propiedades en la versión 9.0.
  2. La especificación SVG permite aplicar CSS a documentos SVG de forma similar a como se hace con documentos HTML, y la regla se puede aplicar al texto en documentos SVG. Opera añadió compatibilidad con esto en la versión 10, [ 24 ] y WebKit, desde la versión 325, también admite este método utilizando únicamente fuentes SVG .@font-face

Fuentes de gráficos vectoriales escalables

Las fuentes SVG fueron un estándar del W3C de fuentes que utilizaban gráficos SVG que se convirtieron en un subconjunto de las fuentes OpenType. [ 25 ] Permitían fuentes multicolores [ 26 ] o animadas. [ 27 ] Fue primero un subconjunto de las especificaciones SVG 1.1 [ 28 ] pero ha sido obsoleto [ 29 ] en la especificación SVG 2.0. Las fuentes SVG como formato independiente son compatibles con la mayoría de los navegadores, excepto IE y Firefox, y están obsoletas en Chrome (y Chromium). [ 30 ] Ahora están generalmente obsoletas; el estándar con el que la mayoría de los proveedores de navegadores acordaron es el subconjunto de fuentes SVG incluido en OpenType (y luego el superconjunto WOFF, ver más abajo), llamado SVGOpenTypeFonts . [ 31 ] Firefox ha sido compatible con SVG OpenType desde Firefox 26.

TrueType/OpenType

La vinculación con fuentes TrueType (TTF) y OpenType (TTF/OTF) estándar de la industria es compatible con Mozilla Firefox 3.5+, Opera 10+, [ 32 ] Safari 3.1+, [ 33 ] y Google Chrome 4.0+. [ 34 ] Internet Explorer 9+ solo admite aquellas fuentes con permisos de incrustación configurados como instalables. [ 35 ]

Formato de fuente abierta web

El formato de fuente web abierta (WOFF) es esencialmente OpenType o TrueType con compresión y metadatos adicionales. WOFF es compatible con Mozilla Firefox 3.6+, [ 36 ] Google Chrome 5+, [ 37 ] [ 38 ] Opera Presto , [ 39 ] y es compatible con Internet Explorer 9 (desde el 14 de marzo de 2011). [ 40 ] La compatibilidad está disponible en Safari de Mac OS X Lion a partir de la versión 5.1.

fuentes Unicode

El término fuente Unicode es una fuente de computadora que asigna glifos a puntos de código definidos en el estándar Unicode . [ 41 ] El término se ha vuelto redundante ya que la gran mayoría de las fuentes de computadora modernas usan asignaciones Unicode, incluso aquellas fuentes que solo incluyen glifos para un solo sistema de escritura , o incluso solo admiten el alfabeto latino básico . Las fuentes que admiten una amplia gama de escrituras Unicode y símbolos Unicode a veces se denominan "fuentes pan-Unicode", aunque como el número máximo de glifos que se pueden definir en una fuente TrueType está restringido a 65 535, no es posible que una sola fuente proporcione glifos individuales para todos los caracteres Unicode definidos ( 159 801 caracteres, con Unicode 17.0 ).

Solo dos fuentes disponibles de forma predeterminada en la plataforma Windows , Microsoft Sans Serif y Lucida Sans Unicode , proporcionan un amplio repertorio de caracteres Unicode .

En plataformas de software libre y de código abierto como Linux , GNU Unifont y GNU FreeFont ofrecen una amplia gama de caracteres. En ChromeOS , las fuentes Noto de Google admiten (o se prevé que admitan) todos los sistemas de escritura codificados en el estándar Unicode.

Alternativas

Un obstáculo común en el diseño web es el uso de fuentes no aptas para la web en las maquetas. Existen varias soluciones para este tipo de situaciones. Una solución habitual consiste en reemplazar el texto con una fuente similar apta para la web o utilizar varias fuentes alternativas de aspecto parecido.

Otra técnica es la sustitución de imágenes . Esta práctica consiste en superponer una imagen con el mismo texto, pero con la fuente deseada. Si bien esto resulta estético, impide la selección de texto, aumenta el consumo de ancho de banda, perjudica el posicionamiento en buscadores y dificulta el acceso al texto para usuarios con discapacidad.

Anteriormente, se utilizaban soluciones basadas en Flash , como sIFR . Estas técnicas son similares a las de reemplazo de imágenes, aunque el texto se puede seleccionar y se representa como un vector. Sin embargo, este método requiere la instalación de un complemento propietario en el sistema del cliente.

Otra solución es usar JavaScript para reemplazar el texto con VML (para Internet Explorer) o SVG (para todos los demás navegadores). [ 42 ]

Véase también

Notas

  1. ↑ Consulte las listas de tipografías de código abierto y tipografías Unicode de software libre para obtener información sobre este tipo de fuentes.

Referencias

  1. ↑ Garaffa, Dave (2 de septiembre de 1997). "Fuentes incrustadas en Microsoft IE4pr2" . Internet.com . Archivado del original el 8 de julio de 1998.
  2. ↑ Hojas de estilo en cascada, nivel 1 , W3C, 17/12/1996
  3. ↑ "Fuentes" , Hojas de estilo en cascada, nivel 2: Especificación CSS2 , Consorcio World Wide Web , 12 de mayo de 1998 , consultado el 28 de julio de 2009
  4. ↑ Cambios en CSS2.1 —C.2.97 Capítulo 15 Fuentes , World Wide Web Consortium , consultado el 30/01/2010 
  5. ↑ Módulo CSS3: Fuentes web , Consorcio World Wide Web , consultado el 30 de enero de 2010.
  6. 1 2 "Especificación CSS2" , Fuentes , Consorcio World Wide Web
  7. ↑ Poole, Alex (2005-04-07). "¿Cuáles son más legibles: las tipografías con serifa o sin serifa?" . Archivado del original el 22-07-2017 . Recuperado el 27-09-2017 .
  8. ↑ Grupo de trabajo de CSS (1 de febrero de 2024). "Módulo de fuentes CSS Nivel 4" .
  9. ↑ "Valores ui-serif, ui-sans-serif, ui-monospace y ui-rounded para font-family | ¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc." .
  10. ↑ Hill, Bill (21/07/2008), Font Embedding on the Web , Microsoft, archivado del original el 06/09/2015.
  11. ↑ Comentario del equipo del W3C
  12. ↑ El monopolio olvidado de Microsoft
  13. ↑ Fuentes web: la perspectiva del mundo libre
  14. ↑ CSS @ Ten: La próxima gran novedad
  15. ↑ Solicitud de envío del formato de archivo WOFF 1.0 al W3C
  16. ↑ Galineau, Sylvain (23 de abril de 2010), Conozca WOFF, el formato estándar de fuente web , Microsoft
  17. ↑ Código de referencia de conversión WOFF , archivado del original el 7 de octubre de 2016 , recuperado el 8 de mayo de 2016.
  18. ↑ "La nueva base de datos de Google Fonts es un paraíso para los amantes del diseño" . Theverge.com . Consultado el 24 de agosto de 2016 .
  19. ↑ Richard Fink (06/09/2016) Webfonts on the Prairie , Alist Apart
  20. ↑ Kimler, Scott Thomas (4 de julio de 2009), Fuentes de xBrowser : amplía tu paleta de fuentes con CSS3 , archivado del original el 15 de marzo de 2012 , consultado el 5 de febrero de 2010. 
  21. ↑ Wubben, Mark (27 de febrero de 2009). "Geek Meet: Tipografía web y sIFR 3 - Diapositivas 15 y 16" . SlideShare . Recuperado el 17 de marzo de 2010 .
  22. ↑ Niederst, Jennifer (2001). Diseño web en pocas palabras: una guía de referencia rápida para escritorio (2.ª ed.). O'Reilly. pág . 36. ISBN   0-596-00196-7. Consultado el 20 de marzo de 2016. ¿En qué año se desarrolló Truedoc?
  23. ↑ Daggett, John (31 de julio de 2009), Formato de archivo EOT-Lite v.1.1 , World Wide Web Consortium , consultado el 30 de enero de 2010.
  24. ↑ Mills, Chris (4 de diciembre de 2008), Opera Presto 2.2 y Opera 10 : un primer vistazo , Opera Software , consultado el 30 de enero de 2010. 
  25. ↑ SVG en OpenType , W3C , consultado el 20 de septiembre de 2014
  26. ↑ Tipografía colorida en la web: prepárate para las fuentes multicolor , Pixel Ambacht , consultado el 20 de septiembre de 2014.
  27. ↑ Ejemplo de glifo aniquilado , people.Mozilla, archivado del original el 09/10/2014 , recuperado el 20/09/2014.
  28. ↑ Fuentes , W3C , consultado el 20 de septiembre de 2014
  29. ↑ Capítulo sobre fuentes tipográficas , W3C , consultado el 8 de marzo de 2018.
  30. ↑ ¿Puedo usar fuentes SVG ?, CanIuse , consultado el 20 de septiembre de 2014
  31. ↑ SVGOpenTypeFonts , Mozilla , consultado el 20 de septiembre de 2014
  32. ↑ Mills, Chris (4 de diciembre de 2008), Opera Presto 2.2 y Opera 10 : un primer vistazo , Opera Developer Community , consultado el 29 de enero de 2010. 
  33. ↑ Marsal, Katie (7 de febrero de 2008), Safari 3.1 de Apple admitirá fuentes web descargables y más , AppleInsider , consultado el 5 de febrero de 2010.
  34. ↑ Irish, Paul (25-01-2010), Chrome y @font-face: ¡Ya está aquí!
  35. ↑ Galineau, Sylvain (15 de julio de 2010), The CSS Corner: Better Web Typography For Better Design , Microsoft
  36. ↑ Shapiro, Melissa (2009-10-20), Mozilla admite el formato de fuente web abierta , Mozilla , consultado el 5 de febrero de 2010.
  37. ↑ Gilbertson, Scott (26 de abril de 2010), Google Chrome será compatible con el formato de fuente abierta web , webmonkey
  38. ↑ Error 38217 - [ chromium ] Agregar soporte para WOFF , WebKit
  39. ↑ Compatibilidad con especificaciones web en Opera Presto 2.7 , Opera
  40. ↑ Galineau, Sylvain (23 de abril de 2010), Conozca WOFF, el formato estándar de fuente web , Microsoft
  41. ↑ "Fuentes y teclados" . Consorcio Unicode. 28 de junio de 2017. Archivado del original el 18 de octubre de 2019. Consultado el 13 de octubre de 2019 .
  42. ↑ Acerca de Cufon
  • Especificación de fuentes CSS del W3C
  • Lista de RFC tal como se menciona en WOFF (borrador del 23/10/2009):
    • Especificación del formato de datos comprimidos ZLIB RFC 1950 
    • RFC 2119 Palabras clave para usar en RFC para indicar niveles de requisitos 
    • RFC 4647 Coincidencia de etiquetas de idioma