La tipografía web se refiere al uso de fuentes en la World Wide Web . Cuando se creó HTML por primera vez, los tipos de letra y los estilos se controlaban exclusivamente mediante la configuración de cada navegador web . No había ningún mecanismo para que las páginas web individuales controlaran la visualización de fuentes hasta que Netscape introdujo el font
elemento en 1995, que luego se estandarizó en la especificación HTML 3.2. Sin embargo, la fuente especificada por el font
elemento tenía que estar instalada en la computadora del usuario o se usaría una fuente alternativa, como la fuente sans-serif o monoespacio predeterminada de un navegador . Las primeras hojas de estilo en cascada La especificación se publicó en 1996 y proporcionó las mismas capacidades.
La especificación CSS2 fue lanzada en 1998 e intentó mejorar el proceso de selección de fuentes agregando coincidencia, síntesis y descarga de fuentes. Estas técnicas no se utilizaron mucho y se eliminaron 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 ha implementado en Safari 3.1 , Opera 10 y Mozilla Firefox 3.5 . Posteriormente, esto ha aumentado el interés en la tipografía web, así como en el uso de la descarga de fuentes.
CSS1
En la primera especificación de CSS, [2] los autores especificaron las características de la fuente mediante una serie de propiedades:
font-family
font-style
font-variant
font-weight
font-size
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 estaban presentes en el sistema cliente.
Fuentes seguras para la Web
Las fuentes compatibles con la Web son fuentes que probablemente estén presentes en una amplia gama de sistemas informáticos y que los autores de contenido web las utilicen 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.
Fuentes principales de Microsoft para la Web
Para asegurarse de que todos los usuarios de la Web tuvieran un conjunto básico de fuentes, Microsoft inició la iniciativa Core fonts for the Web en 1996 (finalizada 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 hacía distribuibles libremente 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, mejor coincidencia de fuentes 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 que se enumeren varias fuentes como fuentes de reserva. [6] En CSS, la font-family
propiedad acepta una lista de fuentes separadas por comas para usar, así:
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 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 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. 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]
- Fuentes que no tienen marcas decorativas o serifas en sus letras. A menudo, estas fuentes se consideran más fáciles de leer en las pantallas. [7]
- Fuentes que tienen marcas decorativas, o serifas, presentes en sus caracteres. Estas fuentes se utilizan tradicionalmente en libros impresos.
- 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 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 representan el carácter especificado.
CSS 4 presenta varias opciones nuevas:
System-ui
- Fuentes predeterminadas en un sistema determinado: el propósito 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 dado en un estilo serif
ui-sans-serif
- Fuentes predeterminadas en un sistema dado en un estilo sans-serif
ui-monoespacio
- Fuentes predeterminadas en un sistema dado en un estilo de espacio único
ui-redondeado
- Fuentes predeterminadas en un sistema dado en un estilo redondeado
Emoji
- Fuentes que usan emoji
Matemáticas
- Fuentes para fórmulas y expresiones matemáticas complejas.
Fangsong ( chino :仿宋 体)
- Tipos de letra chinos que se encuentran entre las formas serif Song y cursiva Kai. Este estilo se usa a menudo para documentos gubernamentales.
Fuentes web
Historia
Una técnica para hacer referencia a fuentes remotas y descargarlas automáticamente se especificó por primera vez en la especificación CSS2, que introdujo la construcción. En ese momento, la obtención de archivos de fuentes de la web era controvertida porque las fuentes destinadas a ser utilizadas solo para ciertas páginas web también podían descargarse e instalarse incumpliendo la licencia de fuentes. [8]@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 fuente subconjunto para cada página. EOT demostró que las fuentes web podrían funcionar y el formato tuvo algún uso en sistemas de escritura que no son compatibles con los sistemas operativos comunes. Sin embargo, el formato nunca obtuvo una aceptación generalizada y finalmente fue rechazado por el W3C. [9]
En 2006, Håkon Wium Lie inició una campaña contra el uso de EOT y, en su lugar, los navegadores web admitieron los formatos de fuente más utilizados. [10] [11] [12] La compatibilidad con los formatos de fuente TrueType y OpenType de uso común se ha implementado desde entonces 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 Mozilla Foundation , Opera Software y Microsoft , y los navegadores han agregado soporte desde entonces. [13] [14] [15]
Google Fonts se lanzó en 2010 para servir fuentes web bajo licencias de código abierto. Para 2016, más de 800 familias de fuentes web están disponibles. [dieciséis]
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. [17]
Formatos de archivo
Mediante el uso de una técnica de incrustación CSS específica [18] es posible incrustar fuentes de modo 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 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 pueden usar fuentes de alta calidad en línea de manera segura y confiable", la distribución actual de fuentes que utilizan es considerada "distribución ilegal" por la fundición y no está permitida. [19] En cambio, Hoefler & Co. ofrece un sistema de entrega de fuentes patentado enraizado en la nube. Muchas otras fundiciones de tipo comercial 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 de escritorio básicas. Naturalmente, esto no interfiere con las fuentes y las fundiciones bajo licencias gratuitas. [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 fundidora de tipos Bitstream en 1994, y se volvió compatible de forma nativa con Netscape Navigator 4, en 1996. Debido a las restricciones de licencia de código abierto, con Netscape incapaz de liberar el código fuente de Bitstream, el soporte nativo para la tecnología terminó cuando Netscape Navigator 6 fue liberado. Un ActiveX plug-in estaba disponible para añadir soporte para TrueDoc a Internet Explorer , pero la tecnología tuvo que competir contra Microsoft 's OpenType incrustadas fuentes, que habían apoyado de forma nativa en el navegador Internet Explorer desde la versión 4.0. [20] 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 fuentes web incrustada gratuita para crear fuentes web en su formato.
OpenType incrustado
Internet Explorer ha admitido la incrustación de fuentes a través del estándar patentado 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 una licencia. Se ha formalizado un subconjunto simplificado de EOT bajo el nombre de CWT ( Compatibility Web Type , anteriormente EOT-Lite ) [21]
gráficas vectoriales escalables
La tipografía web se aplica a SVG de dos formas:
- 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 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 9.0.
- 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, [22] y WebKit, ya que la versión 325 también admite este método usando solo fuentes SVG .
@font-face
Fuentes de gráficos vectoriales escalables
Las fuentes SVG eran un estándar W3C de fuentes que usaban gráficos SVG que se convirtieron en un subconjunto de las fuentes OpenType. [23] Permitía fuentes multicolores [24] o animadas. [25] Primero fue un subconjunto de las especificaciones SVG 1.1 [26] pero ha quedado obsoleto [27] en la especificación SVG 2.0. Las fuentes SVG como formato independiente son compatibles con la mayoría de los navegadores, además de IE y Firefox, y están obsoletas en Chrome (y Chromium). [28] Eso es ahora generalmente obsoleto; 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 . [29] Firefox admite SVG OpenType desde Firefox 26.
TrueType / OpenType
Mozilla Firefox 3.5+, Opera 10+, [30] Safari 3.1+, [31] y Google Chrome 4.0+ admiten la vinculación a fuentes TrueType (TTF) y OpenType (TTF / OTF) estándar de la industria . [32] Internet Explorer 9+ admite solo aquellas fuentes con permisos de incrustación configurados como instalables. [33]
Formato de fuente abierto web
El Web Open Font Format (WOFF) es esencialmente OpenType o TrueType con compresión y metadatos adicionales. WOFF es compatible con Mozilla Firefox 3.6+, [34] Google Chrome 5+, [35] [36] Opera Presto , [37] y es compatible con Internet Explorer 9 (desde el 14 de marzo de 2011). [38] El soporte está disponible en Mac OS X Lion's Safari desde la versión 5.1.
Fuentes Unicode
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 . Un error en Verdana (y el diferente manejo del mismo por varios agentes de usuario ) dificulta su usabilidad donde se desea combinar caracteres .
En plataformas de software libres y de código abierto como Linux , GNU Unifont y GNU FreeFont proporcionan una amplia gama de caracteres 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 una serie de soluciones para situaciones como esta. Una solución común es reemplazar el texto con una fuente similar segura 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 texto con una imagen que contiene el mismo texto escrito en la fuente deseada. Esto es bueno por motivos estéticos, pero evita la selección de texto, aumenta el uso del ancho de banda, es malo para la optimización del motor de búsqueda y hace que el texto sea inaccesible para usuarios con discapacidades.
También es común el uso de 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 renderizar como un vector. Sin embargo, este método requiere la presencia de un complemento propietario en el sistema de un cliente.
Otra solución es usar Javascript para reemplazar el texto con VML (para Internet Explorer) o SVG (para todos los demás navegadores). [39]
Los servicios de alojamiento de fuentes permiten a los usuarios pagar una suscripción para alojar fuentes no seguras para la Web en línea. La mayoría de los servicios alojan la fuente para el usuario y proporcionan la declaración CSS necesaria .@font-face
Un ejemplo de una configuración de CSS :@font-face
@ font-face { familia de fuentes : 'Diario' ; src : url ( 'http://your-own.site/fonts/journal/journal.woff' ) formato ( 'woff' ), url ( 'http://your-own.site/fonts/journal/journal. svg # Journal ' ) formato ( ' svg ' ), url ( ' http://your-own.site/fonts/journal/journal.ttf ' ) formato ( ' truetype ' ), url ( ' http: // your- own.site/fonts/journal/journal.eot ' ), url ( ' http://your-own.site/fonts/journal/journal.eot?#iefix ' ) formato ( ' embedded-opentype ' ); font-weight : normal ; estilo de fuente : normal ; }
Consideraciones prácticas
En la práctica, no solo importa qué navegador web utiliza la audiencia, sino también cómo está configurado su sistema operativo. En 2010, el diseñador de tipos y consultor Thomas Phinney (vicepresidente de FontLab y anteriormente en Adobe [40] ) escribió un proceso paso a paso para encontrar la mejor solución de renderizado que, más o menos en broma, utiliza una gran cantidad de goto declaraciones. [41] Miha Zajec publicó un diagrama de flujo más visualmente orientado en el mismo año en el foro Typophile . [42]
Ver también
- Reemplazo escalable de Flash Inman
- Lista de RFC como se menciona en WOFF (borrador de 2009-10-23):
- Especificación de formato de datos comprimidos RFC 1950 ZLIB
- RFC 2119 Palabras clave para usar en RFC para indicar niveles de requisitos
- RFC 4647 Coincidencia de etiquetas de idioma
Notas
- ^ ConsulteTipos de letra de código abierto ylistados de tipos de letra Unicode de software libre para este tipo de fuentes.
Referencias
- ^ Garaffa, Dave (2 de septiembre de 1997). "Fuentes incrustadas en Microsoft IE4pr2" . Internet.com . Archivado desde el original el 8 de julio de 1998.
- ^ Hojas de estilo en cascada, nivel 1 , W3C, 1996-12-17
- ^ "Fuentes" , Cascading Style Sheets, nivel 2: Especificación CSS2 , Wide Consortium Web Mundial , 1998-05-12 , recuperados 2009-07-28
- ^ Los cambios CSS2.1 -C.2.97 Capítulo 15 Fuentes , Wide Consortium Web Mundial , recuperada 2010-01-30
- ^ Módulo CSS3: Web Fonts , World Wide Web Consortium , consultado el 30 de enero de 2010
- ^ a b "Especificación CSS2" , fuentes , World Wide Web Consortium
- ^ 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 .
- ^ Hill, Bill (21 de julio de 2008), incrustación de fuentes en la web , Microsoft
- ^ Comentario del equipo W3C
- ^ El monopolio olvidado de Microsoft
- ^ Fuentes web: la vista desde el mundo libre
- ^ CSS @ Ten: la próxima gran novedad
- ^ Solicitud de envío de formato de archivo 1.0 WOFF al W3C
- ^ Galineau, Sylvain (2010-04-23), Meet WOFF, El formato de fuente web estándar , Microsoft
- ^ Código de referencia de conversión WOFF , obtenido el 8 de mayo de 2016
- ^ "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 .
- ↑ Richard Fink (6 de septiembre de 2016) Webfonts en la pradera , Alist Apart
- ^ Kimler, Scott Thomas (2009-07-04), xBrowser Fonts - Expand Your Font Palette Using CSS3 , consultado el 2010-02-05
- ^ Wubben, Mark (27 de febrero de 2009). "Geek Meet: Web Typography y sIFR 3 - Slide 15 y 16" . SlideShare . Consultado el 17 de marzo de 2010 .
- ^ 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.
- ^ Daggett, John (31 de julio de 2009), EOT-Lite File Format v.1.1 , World Wide Web Consortium , consultado el 30 de enero de 2010
- ^ Mills, Chris (2008-12-04), Opera Presto 2.2 y Opera 10: un primer vistazo , Opera Software , consultado el 30 de enero de 2010
- ^ SVG en OpenType , W3C , consultado el 20 de septiembre de 2014
- ^ Tipografía colorida en la web: prepárate para las fuentes multicolores , Pixel Ambacht , consultado el 20 de septiembre de 2014
- ^ Anymated Glyph Ejemplo , people.Mozilla , recuperada 09/20/2014
- ^ Fuentes , W3C , consultado el 20 de septiembre de 2014
- ^ Capítulo de fuentes , W3C , consultado el 8 de marzo de 2018
- ^ ¿Puedo utilizar fuentes SVG , CanIuse , recuperados 20/09/2014
- ^ SVGOpenTypeFonts , Mozilla , recuperada 20/09/2014
- ^ Mills, Chris (2008-12-04), Opera Presto 2.2 y Opera 10: un primer vistazo , Comunidad de desarrolladores de Opera , consultado el 29 de enero de 2010
- ^ Marsal, Katie (2008-02-07), Safari 3.1 de Apple para admitir fuentes web descargables, más , AppleInsider , consultado el 2010-02-05
- ^ Irish, Paul (25/01/2010), Chrome y @ font-face: ¡Ya está aquí!
- ^ Galineau, Sylvain (15 de julio de 2010), The CSS Corner: Better Web Typography For Better Design , Microsoft
- ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format , Mozilla , consultado el 2010-02-05
- ^ Gilbertson, Scott (2010-04-26), Google Chrome para admitir el formato de fuente abierto web , webmonkey
- ^ Error 38217 - [chromium] Agregar compatibilidad con WOFF , WebKit
- ^ Compatibilidad con especificaciones web en Opera Presto 2.7 , Opera
- ^ Galineau, Sylvain (2010-04-23), Meet WOFF, El formato de fuente web estándar , Microsoft
- ^ Acerca de Cufon
- ^ http://www.adobe.com/products/type/font-designers/thomas-phinney.html
- ^ Thomas Phinney (13 de octubre de 2010) Renderizado de fuentes en navegadores web: una aventura en la que encontrar su fuente
- ^ [1] según lo citado por el enlace de Phinney Internet Archive
enlaces externos
- Especificación de fuentes CSS W3C
- Typoscan es una herramienta de diseño que le ayuda a escanear la tipografía de cualquier sitio web en menos de un segundo.