Hispanopedia Wiki
Articulo de referencia

Web typography

Web fonts allow Web designers to use fonts that are not installed on the viewer's computer. Web typography , like typography generally, is the design of pages – their layout a...

Hispanopedia WikiContenido en espanolLectura gratuita
Web fonts allow Web designers to use fonts that are not installed on the viewer's computer.

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography (where the page is fixed once typeset), pages intended for display on the World Wide Web have additional technical challenges and –given its ability to change the presentation dynamically –additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

When HTML was first created, typefaces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the font element in 1995, which was then standardized in the HTML 3.2 specification. However, the computer font specified by the font element had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first CSS specification was published in 1996 and provided the same capabilities.

The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Explorer added support for the font downloading feature in version 4.0, released in 1997.[1] Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in Web typography, as well as the use of font downloading.

CSS1

In the first CSS specification,[2] authors specified font characteristics via a series of properties:

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

All fonts were identified solely by name. Beyond the properties mentioned above, designers had no way to style fonts, and no mechanism existed to select fonts not present on the client system.

Web-safe fonts

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 
Lecturas relacionadas
6 articulos
TipografíaTipografíaLa tipografía es el arte y la técnica de organizar los tipos para que el lenguaje escrito sea legible , legible y atractivo cuando se muestra. La d...TypefaceTypefaceA Specimen , a broadsheet with examples of typefaces and fonts available. Printed by William Caslon , letter founder; from the 1728 Cyclopædia . A ...TipografíaTipografíaLa composición tipográfica es la composición de texto para su publicación, exhibición o distribución mediante la disposición de tipos físicos (o so...World Wide WebWorld Wide WebUna página web de Wikipedia mostrada en Google Chrome La World Wide Web ( WWW o simplemente la Web ) es un sistema de información que permite compa...CSSCSSLas hojas de estilo en cascada ( CSS ) son un lenguaje de hojas de estilo que se utiliza para especificar la presentación y el estilo de un documen...JavaScriptJavaScriptJavaScript ( / ˈdʒ ɑː v ə s k r ɪ p t / ), a menudo abreviado como JS , es un lenguaje de programación y una tecnología central de la Web , junto c...