Subconjuntos de números para que sean tan impresionantes como el resto de su contenido

Estás dando los toques finales a tu nueva idea de un millón de dólares: tu texto es perfecto, tu combinación de colores es deslumbrante y has encontrado una combinación de fuentes gloriosa (¿quién iba a decir que Baskerville y Raleway lucían tan bien juntos? Lo hiciste). ) pero hay un problema: los molestos números en minúsculas de Raleway hacen que su carrito de compras parezca confuso y abrumante al usuario.

Este es un problema bastante mundano, pero un problema que puede inutilizar hermosas tipografías si los números son una parte importante de su sitio; una tienda o un panel de análisis, por ejemplo. Y este no es sólo un problema con los números en minúsculas. Los números no monoespaciados pueden distraer igualmente cuando se echa un vistazo a una lista de números.

Vamos a ver algunas técnicas para combatir este problema, pero primero necesitamos encontrar una fuente cuyos números podamos usar en lugar de la fuente del cuerpo principal. No existe manera fácil de encontrar tu fuente gemela. Las características más importantes a buscar son el peso y el ancho para que puedas hacer coincidir el de tu fuente original. Si tiene la intención de utilizar números con varios pesos, intente buscar fuentes que tengan una amplia gama de pesos para aumentar sus posibilidades de igualar el original. Es posible que termines necesitando una fuente numérica diferente para cada peso o que los pesos de los pares de fuentes no coincidan, pero eso está bien porque, de hecho, no existe una policía de fuentes.

Aquí hay algunas combinaciones de fuentes de Google que coinciden lo suficientemente bien como para no notarse en tamaños pequeños:

Método 0: envuélvalos en tramos

@import url('https://fonts.googleapis.com/css?family=Raleway:400|Nunito:300');body {  font-family: 'Raleway', sans-serif;}.numeral {  font-family: 'Nunito', 'Raleway', sans-serif;}

Your total comes to $span15/span.span99/span

Ésta no es una buena solución. Tener que agregar marcas es malo, y cargar ambas fuentes en su totalidad no es genial, pero si no tienes mucho contenido y quieres una solución simple, entonces no hay que avergonzarse.

Lo que preferiríamos encontrar es una solución solo CSS que aísle los números de la fuente numérica y los cargue en lugar de (o antes de la fuente principal) sin tener que cambiar el HTML . Sigue leyendo.

Cómo funciona la familia de fuentes

Los siguientes métodos se basan en la creación de una @font-facedeclaración que solo hace referencia a nuestro subconjunto preferido de números y hace referencia a ellos en la pila de fuentes de forma normal:

body {  font-family: 'Custom Numeral Font', 'Main Font', sans-serif;}

Al ordenar la fuente subconjunto primero en su font-familydeclaración, el navegador la utilizará de forma predeterminada y recurrirá a las fuentes siguientes para los glifos que no estén disponibles en la primera. Esta es una distinción realmente importante: el navegador no solo verifica que la fuente declarada esté disponible (localmente o importada a través de @font-face), sino que también verifica que su mapa de caracteres contenga el carácter solicitado y pasará a la siguiente fuente si no lo contiene . t, carácter por carácter. Por cierto, la especificación del algoritmo de coincidencia de fuentes es una lectura sorprendentemente interesante.

Es importante tener en cuenta que el navegador priorizará la familia de fuentes sobre el peso y el estilo de la fuente, por lo que si subconfigura los números solo para un peso normal y luego tiene un número dentro de un elemento de estilo en negrita, el El navegador elegirá mostrar el tamaño normal. -carácter de peso de la fuente numérica en lugar del carácter en negrita de la fuente principal. Básicamente, si estás haciendo esto, asegúrate de hacerlo para todos los pesos de fuente en los que te mostrarán los números.

Método 1: subconjunto personalizado de Font Squirrel

Si aloja sus archivos de fuentes usted mismo en lugar de servirlos desde un servicio alojado como Adobe Fonts o Google Fonts, puede utilizar la configuración experta del Webfont Generator de Font Squirrel para crear archivos que solo contengan el subconjunto numérico. Lea el acuerdo de licencia de la fuente para asegurarse de que este tipo de manipulación esté bien antes de continuar.

Una vez que tenga los archivos de fuentes subconjuntos, podrá usarlos como lo haría normalmente. Consulte este artículo para obtener más información sobre @font-facela compatibilidad con el navegador de tipos de archivos.

@font-face {  font-family: 'Nunito';  src: url('nunito-light-webfont.woff2') format('woff2'),        url('nunito-light-webfont.woff') format('woff');  font-weight: normal;  font-style: normal;}body {  font-family: 'Nunito', 'Raleway', sans-serif;}

Si está preocupado por el rendimiento, también puede crear subconjuntos de su fuente principal para eliminar sus glifos numéricos y eliminar algunos bytes adicionales.

Método 2: subconjunto @font-face unicode-range

La unicode-rangepropiedad de @font-facese utiliza principalmente para declarar el conjunto de caracteres que contienen los archivos de fuentes con el fin de ayudar al navegador a decidir si descargar o no los archivos; un gran aumento potencial del rendimiento para sitios multilingües que utilizan alfabetos no latinos. La otra cara de la moneda es que unicode-rangetambién restringe la @font-facedeclaración al rango especificado, lo que significa que solo podemos usarla para que ciertas partes de los archivos de fuentes estén disponibles para su uso en el navegador.

@font-face {  font-family: 'Nunito';  src: url('nunito-light-webfont.woff2') format('woff2'),       url('nunito-light-webfont.woff') format('woff');  font-weight: normal;  font-style: normal;  unicode-range: U+30-39; /* 0-9 /}body {  font-family: 'Nunito', 'Raleway', sans-serif;}

Esto es peor para el rendimiento que el método anterior, ya que el navegador aún tiene que descargar el archivo de fuente completo para usar los números, pero es preferible si el acuerdo de licencia no permite la manipulación de los archivos.

Lamentablemente, no podemos usar este método para crear subconjuntos de fuentes ya cargadas por un servicio externo, pero se puede usar en fuentes locales:

@font-face {  font-family: 'Times Numeral Roman';  src: local('Times New Roman');  unicode-range: U+30-39; /* 0-9 */}

Esta es una manera elegante de modificar caracteres particulares de su fuente principal, tal vez subconjuntos de solo un signo comercial o comillas rectas preferidas (en cuyo caso tendría que renunciar al juego de palabras “Times Numeral Roman”), sin pérdida de rendimiento como La fuente local simplemente se ignorará si no existe. Puede consultar la disponibilidad de fuentes comunes del sistema aquí . Y puedes convertirte en la reina de los nerds tipográficos creando un sitio que sólo pueda apreciarse adecuadamente si tienes todos sus subconjuntos de fuentes descargados localmente, esotérico premium.

La compatibilidad unicode-rangees bastante buena, pero tenga en cuenta que la fuente del subconjunto se utilizará para todo el texto si no es compatible, así que tal vez no la convierta en Papyrus. O si realmente quieres usar Papyrus, puedes ser astuto y agregar primero otra fuente segura para la web para que los navegadores no compatibles la utilicen de forma predeterminada en lugar de Papyrus:

@font-face {  font-family: 'Backup Font';  src: local('Arial');  unicode-range: U+60; /* backtick because I can't think of a more innocuous character */}@font-face {  font-family: 'Papyrus Ampersand';  src: local('Papyrus');  unicode-range: U+26; /*  */}body {  font-family: 'Backup Font', 'Papyrus Ampersand', 'Main Font', sans-serif;}

Método 3: subconjunto de texto de Google Fonts

La API de Google Fonts viene con algunas opciones adicionales útiles para ayudar a la optimización al especificar solo pesos de fuente, estilos y alfabetos particulares (el subsetparámetro toma una lista de alfabetos similares greek,cyrillicy no un rango Unicode, lamentablemente), pero también hay un poco conocido ” beta” llamado parámetro textque aparentemente se usa en títulos y logotipos, pero funciona igualmente bien para nuestro propósito:

@import url('https://fonts.googleapis.com/css?family=Raleway:400');@import url('https://fonts.googleapis.com/css?family=Nunito:300text=0123456789');body {  font-family: 'Nunito', 'Raleway', sans-serif;}

¡Tan sencillo! ¡Muy elegante!

El textparámetro puede aceptar cualquier carácter UTF-8, pero asegúrese de codificarlos en URL si no son alfanuméricos. El único problema posible con este método es que no estamos creando un nombre personalizado con @font-face, por lo que si el usuario ya tiene el subconjunto de fuentes en su sistema, usará esa fuente en su totalidad.

No he podido encontrar ningún otro servicio de fuentes alojado que ofrezca este nivel de granularidad para subconjuntos, pero comente a continuación si encuentra uno.

Algunos casos de uso