stringtranslate.com

Tipografía web

Las fuentes web permiten a los diseñadores web utilizar fuentes que no están instaladas en la computadora del espectador.

La tipografía web , al igual que la tipografía en general, es el diseño de páginas, su disposición y las opciones tipográficas . A diferencia de la tipografía impresa tradicional (en la que la página queda fija una vez compuesta ), las páginas destinadas a ser mostradas en la World Wide Web tienen desafíos técnicos adicionales y, dada su capacidad para cambiar la presentación de forma dinámica, oportunidades adicionales. Los primeros diseños de páginas web eran muy simples debido a las limitaciones tecnológicas; los diseños modernos utilizan hojas de estilo en cascada (CSS), JavaScript y otras técnicas para transmitir la visión del tipógrafo y del cliente.

Cuando se creó el HTML , los tipos de letra 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 las fuentes hasta que Netscape introdujo el fontelemento en 1995, que luego se estandarizó en la especificación HTML 3.2. Sin embargo, la fuente de computadora especificada por el elemento tenía que estar instalada en la computadora del usuario o se usaría fontuna fuente de respaldo, como la fuente sans-serif o monoespaciada predeterminada de un navegador. La primera especificación CSS se publicó en 1996 y brindaba las mismas capacidades.

La especificación CSS2 se publicó en 1998 e intentó mejorar el proceso de selección de fuentes añadiendo coincidencias, síntesis y descarga de fuentes. Estas técnicas no tuvieron mucho uso 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] La descarga de fuentes se incluyó más tarde en el módulo de fuentes CSS3 y desde entonces se ha implementado en Safari 3.1 , Opera 10 y Mozilla Firefox 3.5 . Esto ha aumentado posteriormente el interés por la tipografía web, así como el uso de la descarga de fuentes.

CSS1

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

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 aplicar estilos a las fuentes y no existía ningún mecanismo para seleccionar fuentes que no estuvieran presentes en el sistema cliente.

Fuentes seguras para la web

Las fuentes seguras para la Web son fuentes informáticas que se puede esperar 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 en 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 las familias genéricas especificadas por el autor, o utiliza la sustitución de fuentes definida en el sistema operativo del visitante.

Fuentes Core de Microsoft para la Web

Desde que se lanzaron bajo el programa de fuentes Core 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 un conjunto básico de fuentes, Microsoft inició la iniciativa Fuentes básicas para la Web en 1996 (que finalizó en 2002). Las fuentes publicadas incluyen Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings y Verdana , bajo un EULA que las hizo de libre distribución pero también limitó algunos derechos de uso. Su alta tasa de penetració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 de forma predeterminada.

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

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

Fuentes de reserva

La especificación CSS permite que se incluyan varias fuentes como fuentes de respaldo. [6] En CSS, la font-familypropiedad acepta una lista de tipos de fuentes separados por comas para usar, de la siguiente manera:

familia de fuentes : "Nimbus Sans L" , Helvetica , Arial , sans-serif ;    

La primera fuente especificada es la fuente preferida. Si esta fuente no está disponible, el navegador web intenta utilizar la siguiente fuente de la lista. Si no se encuentra ninguna de las fuentes especificadas, el navegador muestra su fuente predeterminada. Este mismo proceso también se produce en 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 dar a los diseñadores web 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 en función de su apariencia general. Se las suele especificar como las últimas de una serie de fuentes de reserva, como último recurso en caso de que ninguna de las fuentes especificadas por el autor esté disponible. Durante varios años, hubo 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 las pantallas. [7]

Serif

Fuentes que tienen marcas decorativas o serifas en sus caracteres. Estas fuentes se utilizan tradicionalmente en libros impresos.

Monoespaciado

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

Cursivo

Fuentes que se asemejan a la escritura cursiva. Estas fuentes pueden tener un aspecto decorativo, pero pueden resultar 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.

Borrador de trabajo 4 de fuentes CSS 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]

Fuentes web

Historia

La primera vez que se especificó una técnica para consultar y descargar automáticamente fuentes remotas fue en la especificación CSS2, que introdujo la construcción. En ese momento, obtener archivos de fuentes de la web era controvertido 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 agregó por primera vez compatibilidad con fuentes EOT descargables en Internet Explorer 4 en 1997. Los autores tuvieron que usar la herramienta patentada 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 sistemas de escritura que no eran 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 pidió que los navegadores web admitieran los formatos de fuentes más utilizados. [12] [13] [14] Desde entonces, se ha implementado el soporte para los formatos de fuentes TrueType y OpenType más utilizados en Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 e Internet Explorer 9 .

En 2010, el método de compresión WOFF para fuentes TrueType y OpenType fue enviado al W3C por la Fundación Mozilla , Opera Software y Microsoft , y desde entonces los navegadores han agregado soporte. [15] [16] [17]

Google Fonts se lanzó en 2010 para ofrecer fuentes web con licencias de código abierto . En 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 utilizan fuentes web. [19]

Formatos de archivos

Mediante el uso de una técnica específica de incrustación CSS [20] es posible incrustar fuentes de forma 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 dice que, si bien "... apoyan con entusiasmo el surgimiento de una Web más expresiva en la que los diseñadores puedan usar de forma segura y confiable fuentes de alta calidad en línea", la entrega actual de fuentes mediante este sistema se considera una "distribución ilegal" por parte de la fundición y no está permitida. [21] En cambio, 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 fuentes para mostrar contenido en la Web, un uso normalmente prohibido por las licencias básicas de escritorio. Naturalmente, esto no afecta a las fuentes y fundiciones con licencias libres. [m 1]@font-face@font-face

TrueDoc

TrueDoc , aunque no es específicamente una especificación de fuentes web, fue el primer estándar para incrustar fuentes. Fue desarrollado por la fundición tipográfica Bitstream en 1994 y pasó a tener soporte nativo en Netscape Navigator 4, en 1996. Debido a las restricciones de la licencia de código abierto, con Netscape incapaz de publicar el código fuente de Bitstream, el soporte nativo para la tecnología finalizó cuando se lanzó Netscape Navigator 6. Un complemento ActiveX estaba disponible para agregar soporte para TrueDoc a Internet Explorer , pero la tecnología tuvo que competir contra las fuentes Embedded OpenType de Microsoft , que habían tenido soporte nativo en su navegador Internet Explorer desde la versión 4.0. [22] Otro impedimento fue la falta de herramientas de código abierto o gratuitas para crear fuentes web en formato TrueDoc, mientras que Microsoft puso a disposición una herramienta gratuita de fuentes incrustadas en la web para crear fuentes web en su formato.

OpenType integrado

Internet Explorer admite la incorporación de fuentes a través del estándar propietario Embedded OpenType desde la versión 4.0. Utiliza técnicas de gestión de derechos digitales para ayudar a evitar que las fuentes se copien y se utilicen sin licencia. Un subconjunto simplificado de EOT se ha formalizado con 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 compatibilidad con muchas de estas propiedades en la versión 3. Opera agregó compatibilidad preliminar en la versión 8.0, y compatibilidad con más propiedades en la 9.0.
  2. La especificación SVG permite aplicar CSS a documentos SVG de manera similar a los documentos HTML, y la regla se puede aplicar al texto en documentos SVG. Opera agregó compatibilidad para 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 eran un estándar de fuentes del W3C que utilizaba gráficos SVG y que se convirtió en un subconjunto de las fuentes OpenType. [25] Permitía fuentes multicolor [26] o animadas. [27] Primero fue un subconjunto de las especificaciones SVG 1.1 [28] pero quedó 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á generalmente obsoleto; el estándar con el que la mayoría de los proveedores de navegadores están de acuerdo es el subconjunto de fuentes SVG incluido en OpenType (y luego el superconjunto WOFF, ver más abajo), llamado SVGOpenTypeFonts. [31] Firefox ha admitido SVG OpenType desde Firefox 26.

Tipo verdadero/Tipo abierto

La vinculación a 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 abierto para la Web

El formato Web Open Font Format (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] El soporte 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 informática 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 informáticas modernas utilizan 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 (154.998 caracteres, con Unicode 16.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 . [ necesita actualización ]

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 alfabetos codificados en el estándar Unicode .

Alternativas

Un obstáculo común en el diseño web es el diseño de maquetas que incluyen fuentes que no son aptas para la Web. Existen varias soluciones para situaciones como esta. Una solución común es reemplazar el texto con una fuente similar apta para la Web o usar una serie de fuentes alternativas de apariencia similar.

Otra técnica es la sustitución de imágenes . Esta práctica implica superponer el texto con una imagen que contiene el mismo texto escrito en la fuente deseada. Esto es bueno para fines estéticos, pero impide la selección de texto, aumenta el uso del ancho de banda, es malo para la optimización de motores de búsqueda y hace que el texto sea inaccesible para usuarios con discapacidades. [ cita requerida ]

En el pasado, se utilizaban soluciones basadas en Flash , como sIFR . Se trata de técnicas 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 presencia de un complemento propietario en el sistema del cliente.

Otra solución es utilizar 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 los listados de tipos de letra Unicode de código abierto y tipos de letra Unicode de software libre para conocer dichas fuentes.

Referencias

  1. ^ Garaffa, Dave (2 de septiembre de 1997). "Fuentes integradas en Microsoft IE4pr2". Internet.com . Archivado desde el original el 8 de julio de 1998.
  2. ^ Hojas de estilo en cascada, nivel 1, W3C, 17 de diciembre de 1996
  3. ^ "Fuentes", Hojas de estilo en cascada, nivel 2: Especificación CSS2 , World Wide Web Consortium , 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 de enero de 2010
  5. ^ Módulo CSS3: Fuentes web, World Wide Web Consortium , consultado el 30 de enero de 2010
  6. ^ ab "Especificación CSS2", Fuentes , Consorcio World Wide Web
  7. ^ Poole, Alex (7 de abril de 2005). "¿Cuáles son más legibles: las tipografías serif o sans serif?". Archivado desde el original el 22 de julio de 2017. Consultado el 27 de septiembre de 2017 .
  8. ^ Grupo de trabajo 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 de julio de 2008), Incrustación de fuentes en la Web, Microsoft, archivado desde el original el 6 de septiembre de 2015
  11. ^ Comentario del equipo del W3C
  12. ^ El monopolio olvidado de Microsoft
  13. ^ Fuentes web: la visión desde el mundo libre
  14. ^ CSS @ Ten: La próxima gran novedad
  15. ^ Solicitud de envío de formato de archivo WOFF 1.0 al W3C
  16. ^ Galineau, Sylvain (23 de abril de 2010), Conozca WOFF, el formato de fuente web estándar, Microsoft
  17. ^ Código de referencia de conversión WOFF , recuperado el 8 de mayo de 2016
  18. ^ "La nueva base de datos de fuentes de Google es un paraíso para los amantes del diseño". Theverge.com . Consultado el 24 de agosto de 2016 .
  19. ^ Richard Fink (6 de septiembre de 2016)Fuentes web en la pradera, Alist Apart
  20. ^ Kimler, Scott Thomas (4 de julio de 2009), Fuentes xBrowser: amplíe su paleta de fuentes con CSS3 , consultado el 5 de febrero de 2010
  21. ^ Wubben, Mark (27 de febrero de 2009). "Geek Meet: Web Typography and sIFR 3 - Slide 15 and 16". SlideShare . Consultado el 17 de marzo de 2010 .
  22. ^ Niederst, Jennifer (2001). Diseño web en pocas palabras: una referencia rápida para computadoras de escritorio (2.ª ed.). O'Reilly. p. 36. ISBN 0-596-00196-7. Recuperado 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árese para las fuentes multicolores, Pixel Ambacht , consultado el 20 de septiembre de 2014
  27. ^ Ejemplo de glifo de Anymated, people.Mozilla , consultado el 20 de septiembre de 2014
  28. ^ Fuentes, W3C , consultado el 20 de septiembre de 2014
  29. ^ Capítulo sobre fuentes, 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 de enero de 2010), Chrome y @font-face: ¡Ya está aquí!
  35. ^ Galineau, Sylvain (15 de julio de 2010), The CSS Corner: Mejor tipografía web para un mejor diseño, Microsoft
  36. ^ Shapiro, Melissa (2009-10-20), Mozilla admite el formato de fuente abierto para la Web, 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 abierto para la 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 de fuente web estándar, Microsoft
  41. ^ "Fuentes y teclados". Consorcio Unicode. 28 de junio de 2017. Archivado desde el original el 18 de octubre de 2019. Consultado el 13 de octubre de 2019 .
  42. ^ Acerca de Cufon

Enlaces externos