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 , como la tipografía en general, es el diseño de páginas: su diseño y opciones tipográficas . A diferencia de la tipografía tradicional impresa (donde la página se fija una vez compuesta ), las páginas destinadas a mostrarse en la World Wide Web tienen desafíos técnicos adicionales y, dada su capacidad para cambiar la presentación dinámicamente, oportunidades adicionales. Los primeros diseños de páginas web eran muy sencillos debido a limitaciones tecnológicas; Los diseños modernos utilizan hojas de estilo en cascada (CSS), JavaScript y otras técnicas para ofrecer la visión del tipógrafo y del cliente.

Cuando se creó HTML por primera vez, los tipos de letra y los estilos estaban controlados exclusivamente por 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 luego se estandarizó en la especificación HTML 3.2. Sin embargo, la fuente de computadora especificada por el fontelemento tenía que instalarse en la computadora del usuario o se usarí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 capacidades.

La especificación CSS2 se lanzó en 1998 e intentó mejorar el proceso de selección de fuentes agregando coincidencia, síntesis y descarga de fuentes. Estas técnicas no tuvieron mucho uso y fueron eliminadas en la especificación CSS2.1. Sin embargo, Internet Explorer agregó soporte para la función de descarga de fuentes en la versión 4.0 , lanzada en 1997. [1] La descarga de fuentes se incluyó más tarde en el módulo de fuentes CSS3 y desde entonces se implementó en Safari 3.1 , Opera 10 y Mozilla Firefox 3.5 . Posteriormente, esto ha aumentado 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 mediante una serie de propiedades:

Todas las fuentes se identificaron únicamente por su nombre. Más allá de las propiedades mencionadas anteriormente, los diseñadores no tenían forma de diseñar 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 razonablemente se puede esperar que estén presentes en una amplia gama de sistemas informáticos y que los autores de contenido web las 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, basada en las fuentes alternativas y familias genéricas especificadas por el autor o utiliza la sustitución de fuentes definida en el sistema operativo del visitante.

Las fuentes principales de Microsoft para la Web

Desde su lanzamiento bajo las fuentes Core de Microsoft para el programa Web, 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 de fuentes principales para la Web en 1996 (terminó en 2002). Las fuentes lanzadas incluyen Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings y Verdana , bajo un EULA que las hacía de libre distribución pero también limitaba algunos derechos para su uso. Su alta tasa de penetración los 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, coincidencia de fuentes mejorada y la capacidad de descargar fuentes remotas. [3]

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

Fuentes alternativas

La especificación CSS permite incluir varias fuentes como fuentes alternativas. [6] En CSS, la font-familypropiedad acepta una lista de fuentes separadas por comas para usar, así:

familia de fuentes : "Nimbus Sans L" , Helvética , 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 ocurre por 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 según su apariencia general. Por lo general, se especifican como las últimas 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, 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]

Serifa

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

monoespacio

Fuentes en las que todos los caracteres son igualmente anchos.

Cursivo

Fuentes que se asemejan a la escritura cursiva. Estas fuentes pueden tener una apariencia decorativa, 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 representan el carácter especificado.

Fuentes CSS que funcionan en el borrador 4 con menor compatibilidad con el navegador

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, estos aún no cuentan con un amplio apoyo. [9]

fuentes web

Historia

Una técnica para hacer referencia y descargar automáticamente fuentes remotas se especificó por primera vez en la especificación CSS2, que introdujo la construcción. En ese momento, recuperar archivos de fuentes de la web era controvertido porque las fuentes destinadas a usarse sólo para determinadas páginas web también podían descargarse e instalarse infringiendo la licencia de fuentes. [10]@font-face

Microsoft agregó por primera vez soporte para fuentes EOT descargables en Internet Explorer 4 en 1997. Los autores tuvieron que usar la herramienta patentada WEFT para crear un archivo de fuentes subconjunto para cada página. EOT demostró que las fuentes web podían funcionar y el formato tuvo cierto uso en 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 prefirió que los navegadores web admitieran los formatos de fuente más utilizados. [12] [13] [14] Desde entonces, se ha implementado compatibilidad con los formatos de fuente TrueType y OpenType comúnmente utilizados 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 agregado soporte. [15] [16] [17]

Google Fonts se lanzó en 2010 para ofrecer fuentes web bajo licencias de código abierto . En 2016, hay 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 archivo

Al utilizar una técnica de incrustación de CSS específica [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 dice que, si bien "... [apoyan] con entusiasmo el surgimiento de una Web más expresiva en la que los diseñadores puedan utilizar fuentes de alta calidad en línea de forma segura y confiable", la entrega actual de fuentes que utilizan es considerada "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 patentado basado en la nube. Muchas otras fundiciones de tipos comerciales abordan la redistribución de sus fuentes ofreciendo una licencia específica, conocida como licencia de fuentes 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 interfiere con las fuentes y fundiciones bajo licencias libres. [m 1]@font-face@font-face

VerdaderoDoc

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 ser compatible de forma nativa con Netscape Navigator 4 en 1996. Debido a restricciones de licencia de código abierto, dado que Netscape no pudo publicar el código fuente de Bitstream, el soporte nativo para la tecnología finalizó cuando se lanzó Netscape Navigator 6. liberado. Un complemento ActiveX estaba disponible para agregar soporte para TrueDoc a Internet Explorer , pero la tecnología tenía que competir con las fuentes Embedded OpenType de Microsoft , que habían sido compatibles de forma nativa con 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 de incrustación de fuentes web gratuita para crear fuentes web en su formato.

Tipo abierto integrado

Internet Explorer admite la incrustació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 utilicen sin licencia. Un subconjunto simplificado de EOT se ha formalizado con el nombre de CWT ( Compatibility Web Type , anteriormente EOT-Lite ) [23]

gráficas 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 fuente que permite la creación de fuentes dentro de un documento SVG. Safari introdujo soporte para muchas de estas propiedades en la versión 3. Opera agregó soporte preliminar en la versión 8.0, con soporte para más propiedades en la 9.0.
  2. La especificación SVG permite que CSS se aplique a documentos SVG de manera similar a los documentos HTML, y la regla se puede aplicar al texto en documentos SVG. Opera agregó soporte para esto en la versión 10, [24] y WebKit desde la versión 325 también admite este método usando fuentes SVG únicamente.@font-face

Fuentes de gráficos vectoriales escalables

Las fuentes SVG eran un estándar W3C de fuentes que utilizaban gráficos SVG y que se convirtieron en un subconjunto de las fuentes OpenType. [25] Permitía fuentes multicolores [26] o animadas. [27] Primero fue un subconjunto de las especificaciones SVG 1.1 [28] pero ha quedado 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] Esto ahora está generalmente en desuso; el estándar con el que estuvieron de acuerdo la mayoría de los proveedores de navegadores es el subconjunto de fuentes SVG incluido en OpenType (y luego el superconjunto WOFF, ver más abajo), llamado SVGOpenTypeFonts. [31] Firefox ha soportado SVG OpenType desde Firefox 26.

Tipo verdadero/Tipo abierto

El enlace 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 abierta web

El formato de fuente web abierto (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 desde 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 único 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 para una fuente única para proporcionar glifos individuales para todos los caracteres Unicode definidos (149.813 caracteres, con Unicode 15.1).

Sólo 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 gratuitas y de código abierto como Linux , GNU Unifont y GNU FreeFont proporcionan una amplia gama de caracteres. En ChromeOS , las fuentes Noto de Google admiten (o están previstas para admitir) todos los scripts 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 seguras para la web. Hay varias soluciones para situaciones como esta. Una solución común es reemplazar el texto con una fuente similar segura para la Web o utilizar una serie de fuentes alternativas de apariencia similar.

Otra técnica es la sustitución de imágenes . Esta práctica implica superponer 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 los motores de búsqueda y hace que el texto sea inaccesible para usuarios con discapacidades. [ cita necesaria ]

En el pasado se utilizaban soluciones basadas en Flash como sIFR . Esto es similar a las técnicas de reemplazo de imágenes, aunque el texto se puede seleccionar y representar 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]

Ver también

Notas

  1. ^ Consulte las listas de tipos de letra 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 , 1998-05-12 , consultado el 28 de julio de 2009.
  4. ^ Cambios en CSS2.1: fuentes del capítulo 15 de C.2.97, 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 , World Wide Web Consortium
  7. ^ Poole, Alex (7 de abril de 2005). "¿Cuáles son más legibles: los tipos de letra 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 W3C
  12. ^ El monopolio olvidado de Microsoft
  13. ^ Fuentes web: la vista 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 , consultado 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 (6 de septiembre de 2016) Webfonts on the Prairie, Alist Apart
  20. ^ Kimler, Scott Thomas (4 de julio de 2009), xBrowser Fonts: 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: tipografía web y sIFR 3 - diapositivas 15 y 16". Compartir diapositivas . Consultado el 17 de marzo de 2010 .
  22. ^ Niederst, Jennifer (2001). Diseño web en pocas palabras: una referencia rápida de escritorio (2ª ed.). O'Reilly. pag. 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árese para fuentes multicolores, Pixel Ambacht , consultado el 20 de septiembre de 2014
  27. ^ Ejemplo de glifo Anymated, personas.Mozilla , consultado el 20 de septiembre de 2014
  28. ^ Fuentes, W3C , consultado el 20 de septiembre de 2014.
  29. ^ Capítulo de 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 para admitir fuentes web descargables, más, AppleInsider , consultado el 5 de febrero de 2010
  34. ^ Irlandés, 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 (20 de octubre de 2009), Mozilla admite el formato de fuente abierta web, Mozilla , consultado el 5 de febrero de 2010
  37. ^ Gilbertson, Scott (26 de abril de 2010), Google Chrome admitirá el formato de fuente abierta web, webmonkey
  38. ^ Error 38217: [cromo] Agregar compatibilidad con WOFF, WebKit
  39. ^ Soporte de 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 Cufón

enlaces externos