El futuro de la tipografía de pantalla está en tus manos

 

 

 

Sobre los autores


Índice
  1. Lecturas adicionales sobre SmashingMag:
  2. La buena tipografía ya no se puede hacer a mano
    1. Identificando lo que falta
    2. Es hora de solucionar el problema
  3. Tipografía.js
  4. 1. El JavaScript
  5. 2. El archivo de fuente personalizado
    1. Colocación de versalitas y números antiguos
    2. Obtener el archivo de fuente
    3. Crea tu propio archivo de fuente
  6. Involúcrate en el futuro de Typesetter.js

Andreas Carlsson es un desarrollador y tipógrafo que vive en Linköping, Suecia. Actualmente está trabajando en el CMS Skrivr basado en Dropbox/Markdown . Skrivr te permite... Más sobre Jaan ↬

 

  • Listas de verificación de diseño de interfaz inteligente
  • Taller de diseño conductual, con Susan y Guthrie Weinschenk
  • Hoy leemos más en la pantalla que hace incluso un año. Si alguna vez vamos a tener una época dorada de la lectura en la pantalla, este podría ser el comienzo. Las tabletas, Nooks y Kindles hacen que comprar un libro o una revista para la pantalla sea casi inevitable. Con los teléfonos inteligentes, llevamos nuestro material de lectura con nosotros y disfrutamos de acceso instantáneo a la Web , lo que permite que la experiencia de lectura fluya sin problemas de un dispositivo a otro.

    Hoy leemos más en la pantalla que hace incluso un año. Si alguna vez vamos a tener una época dorada de la lectura en la pantalla, este podría ser el comienzo.

    Las tabletas, Nooks y Kindles hacen que comprar un libro o una revista para la pantalla sea casi inevitable. Con los teléfonos inteligentes, llevamos nuestro material de lectura con nosotros y disfrutamos de acceso instantáneo a la Web, lo que permite que la experiencia de lectura fluya sin problemas de un dispositivo a otro. Y esos dispositivos probablemente tengan impresionantes pantallas HD fáciles de leer. Si a esto le sumamos servicios complementarios como Readmill y 24symbols, que nos permiten compartir nuestras experiencias de lectura, tendremos acceso perfecto en pantalla a todos los aspectos de la palabra escrita.

     

    Entonces, ¿por qué la tipografía web y de pantalla no sigue el ritmo?

    Lecturas adicionales sobre SmashingMag:

    • Equilibrio entre la longitud de la línea y el tamaño de la fuente en el diseño web adaptable
    • Diseño de teclado de tipografía [Descarga gratuita]
    • 16 píxeles: para el cuerpo del texto. Cualquier cosa menos es un error costoso
    • Espacio usted mismo

    La buena tipografía ya no se puede hacer a mano

    En el pasado, se consideraba que la tipografía sólo vivía cuando llegaba al papel. Una vez que una publicación fue editada, tipografiada e impresa, ya estaba hecha. Nada cambió después de eso. La buena tipografía y la legibilidad fueron el resultado de hábiles tipógrafos y diseñadores.

    Hoy en día, la tipografía existe no sólo en papel sino en multitud de pantallas. Está sujeto a muchos parámetros desconocidos y fluctuantes, como el sistema operativo, las fuentes del sistema, el dispositivo y la pantalla en sí, la ventana gráfica y más. Nuestra experiencia actual con la tipografía cambia según cómo se representa la página, porque la composición tipográfica se realiza en el navegador.

    En todo esto, el navegador es probablemente la parte más importante de la ecuación tipográfica de la pantalla. Irónicamente, la falta de soporte en los navegadores modernos es el mayor obstáculo para una buena tipografía web.

    Los proveedores de tipografía como servicio ofrecen una alternativa, con un número cada vez mayor de fuentes que son bastante baratas y fáciles de usar para los diseñadores al componer texto. Pero ellos también quieren un mejor soporte para la tipografía web.

    Identificando lo que falta

    Veamos algunas de las cosas básicas que faltan en la mayoría, si no en todas, las experiencias de lectura de pantalla. Cuando decimos básico, nos referimos a las cosas que lees y de las que te beneficias cada vez que miras un libro o una revista en papel o en una pantalla.

    • Kerning y espaciado de caracteres individuales;
    • Ligaduras básicas (fi, fl)
    • Otras ligaduras (fj, ffi, ffl, ffj y más);
    • Forro y números antiguos;
    • Verdaderas empresas de pequeña capitalización;
    • Reemplazo de mayúsculas por versalitas para abreviaturas;
    • Símbolos en superíndice como © y ™;
    • Comillas basadas en el idioma;
    • Reemplazo correcto de guiones en y em, y el espaciado alrededor de ellos;
    • Espaciado de ! ( ) [ ] / ; :.

    No parece mucho. Excepto que lo es. Los elementos de esta lista son algunas de las cosas que nos ayudan a leer, procesar y comprender la información. Representan en muchos sentidos la diferencia entre cómo una máquina sin alma se relacionaría con el texto y cómo lo hacen los humanos pensantes y orgánicos.

     

    Aquellos de ustedes que estuvieron presentes durante el auge de la autoedición pueden ver similitudes. En 1999, QuarkXPress no soportaba OpenType, InDesign acababa de nacer y había que utilizar cortes de fuentes “expertos” para poder trabajar con versalitas y números antiguos. Entonces, tuvimos que crear soluciones alternativas para la microtipografía, como los marcos Apple-Script para QuarkXPress, donde el script atravesaba documentos y aislaba guiones, guiones, ligaduras y abreviaturas en versalitas, reemplazándolos con los equivalentes tipográficos correctos.

    En muchos sentidos, 2012 es el nuevo 1999. Tenemos la libertad de trabajar con cualquier fuente que queramos a través del selector @font-face. Pero nuestra herramienta principal, el navegador, no tiene ninguna característica OpenType de la que hablar. Tenemos que crear soluciones.

    ¿Podemos utilizar el mismo tipo de solución que usábamos en los viejos tiempos de la impresión?

    Decimos que sí.

    Es hora de solucionar el problema

    Investigamos bibliotecas de JavaScript existentes y encontramos un montón de cosas geniales. Pero ninguno se centró en la microtipografía en su conjunto. Cuando iniciamos el proyecto, nos propusimos cinco objetivos claros:

    • Microtipografía correcta, incluyendo tantos elementos de la lista anterior como sea posible;
    • Se degrada para que los dispositivos sin soporte @font-face o JavaScript no se vean afectados negativamente;
    • independencia del sistema operativo;
    • Independencia del navegador;
    • Marcado correcto;

    Llamamos al proyecto OpenTypography y llamamos a la solución Typesetter.js.

    JavaScript, @font-face y estilos deshabilitados.

    Javascript desactivado.

    JavaScript habilitado y tipografía web mejorada con @font-face.

    Tipografía.js

    Typesetter.js tiene dos ingredientes: un JavaScript y un archivo de fuente personalizado

    JavaScript atraviesa el DOM, buscando y reemplazando elementos como comillas, ligaduras, guiones en y em, elipses y más. También busca ©, ®, ™ y los envuelve en supetiquetas.

    Lo más importante es que encuentra abreviaturas en mayúsculas y las envuelve en abbretiquetas, dándonos verdaderas versalitas. Esto es posible gracias a un poco de CSS y a los servicios de casas de fuentes bajo demanda como Fontdeck y Typekit.

    Encontrar, reponer y envolver.

    A continuación se muestra un resumen de cómo funciona Typesetter.js.

    1. El JavaScript

    El código está dividido en dos partes, lo que le brinda la opción de utilizar el reemplazo de versalitas. Pero comencemos viendo cómo funciona el reemplazo de las empresas de pequeña capitalización.

    Aquí está el HTML de muestra que usaremos para explicar qué hace realmente el script:

    pThe fine details of screen typography can be improved with JS-scripts and CSS./ppThat is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011/p

    Nuestro texto de muestra renderizado con Georgia y características tipográficas nativas del navegador.

     

    En este texto, queremos encontrar palabras todas en mayúsculas.

    El código comienza obteniendo todos los elementos de una clase elegida por el usuario, en este caso .typo. Estos elementos se almacenan en una matriz.

    mainArray[0] = 'The fine details of screen typography can be improved with JS-scripts and CSS.';mainArray[1] = 'That is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011';

    Luego, cada elemento de la matriz se repite uno por uno y se divide en una submatriz que contiene cada palabra como una cadena.

    subArray[0] = 'The';subArray[1] = 'fine';subArray[2] = 'details';subArray[3] = 'of';subArray[4] = 'screen';subArray[5] = 'typography';subArray[6] = 'can';subArray[7] = 'be';subArray[8] = 'improved';subArray[9] = 'with';subArray[10] = 'JS-scripts';subArray[11] = 'and';subArray[12] = 'CSS.';

    Cada elemento de la submatriz se prueba para ver si el recuento de caracteres de la palabra y el recuento de letras mayúsculas (valores ASCII entre 65 y 90) son iguales. Si es así, la palabra se trata como una abreviatura en mayúscula. Correo temporal gratis

    En realidad, la prueba verifica el primer y el último carácter del elemento de la submatriz. Si están en mayúsculas, entonces es justo asumir que la palabra completa es una abreviatura en mayúscula y luego realizaríamos una prueba más específica. Esto es lo que devuelve el script de nuestro texto de muestra:

    • “El” = false(no ejecutar prueba específica)
    • “detalles” = false(no ejecutar prueba específica)
    • “Andreas” = false(no ejecutar prueba específica)
    • “CSS”. = true(ejecutar prueba específica)
    • “JS-scripts” = true(ejecutar prueba específica)

    Como puede ver, la prueba también detecta palabras en mayúsculas cuando se usan con un guión o tienen un punto final.

    Nuestra prueba especial de mayúsculas crea una matriz de índice que contiene los índices de las palabras en mayúsculas (es decir, identifica en qué parte de la oración completa aparecen). Después de probar toda la submatriz, tendríamos la submatriz y la matriz de índice que contienen todos los índices en mayúsculas.

    indexArray[0] = '10';indexArray[1] = '12';

    Ahora que sabemos dónde están todas las palabras en mayúsculas en la cadena (es decir, en la oración), podemos prepararlas para el reemplazo de versalitas.

    El reemplazo de versalitas se realiza extrayendo la palabra, convirtiendo las letras a minúsculas, envolviendo la palabra completa en una abbretiqueta e insertándola nuevamente en la submatriz.

    subArray[0] = 'The';subArray[1] = 'fine';subArray[2] = 'details';subArray[3] = 'of';subArray[4] = 'screen';subArray[5] = 'typography';subArray[6] = 'can';subArray[7] = 'be';subArray[8] = 'improved';subArray[9] = 'with';subArray[10] = 'js-scripts';subArray[11] = 'and';subArray[12] = 'css.';

    Ahora solo necesitamos convertir esa matriz en una cadena y reemplazar el elemento HTML original con el nuevo elemento HTML en minúsculas.

    Antes:

    pThe fine details of screen typography can be improved with JS-scripts and CSS./ppThat is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011/p

    Después:

     

    pThe fine details of screen typography can be improved with js-scripts and css./ppThat is the goal of "Typesetter.js" — an open-source solution by Andreas Carlsson and Jaan Orvet © 2011/p

    Nuestro texto de muestra está configurado con Tanger Serif de Typolar, usando la regla @font-face. Las palabras en mayúsculas ahora están envueltas en abbretiquetas.

    Bonito y ordenado. Ahora, la segunda parte del guión, la que reemplaza las comillas, las ligaduras, los guiones en y em y las elipses; representa caracteres como © en superíndice; y convierte números al estilo antiguo envolviéndolos en una clase definida por el usuario.

    El código se explica por sí mismo:

    var charReplacements = function() {/* Quotation marks‹ = ‹› = ›« = «» = »‘ = ‘’ = ’“ = “” = ”*/var quoteCharClose = "»";var quoteCharOpen = "«";var triggerID = "#display";var smallcapsClass = "old-style"$(triggerID).each(function() {$(this).find('*').each(function() { if (($(this).html()) != 0) { if (($(this).find('img').length) === 0) { // Performs replaces on any element that is not an img / $(this).html( $(this).html().replace(/(...(.)?)|(.s.s(.s)?|(..(.)?))/g, "…")); // Finds and replaces .. | ... | .... with an elipsis $(this).html( $(this).html().replace(/fl/g, "fl")); // Replaces fl with ligature $(this).html( $(this).html().replace(/fi/g, "fi")); // Replaces fi with ligature $(this).html( $(this).html().replace(/s-s/g, " ‒ ")); // Replaces | space en-dash space | with: | space em-dash space | $(this).html( $(this).html().replace(/"([s.,])/g, quoteCharClose + "$1")); // Replaces | " space | with | » space | $(this).html( $(this).html().replace(/s"/g, " " + quoteCharOpen)); // Replaces | space " | with | space « | $(this).html( $(this).html().replace(/(d+)(?=((?!).)*(-tag with the .old-style-class but ignores digits within a a-tag. Read full explanation here https://www.phpbuilder.com/board/archive/index.php/t-10221442.html if ( (($(this).children().length) === 0) || ($('this:contains("u00a9")')) ) { $(this).html( $(this).html().replace(/u00a9/g, "supsup""©/sup") ); // Superscripts (c) $(this).html( $(this).html().replace(/u00ae/g, "supsup""®/sup") ); // Superscripts (R) }; }; };});});};

    La mayoría de los detalles tipográficos del script se declaran en las variables al principio. Este es el comienzo de un tipo de solución de “configuración” en la que estamos trabajando para construir.

    La "Configuración" es una característica bastante importante porque las reglas tipográficas cambian según el idioma; por ejemplo, las comillas y el espaciado de los guiones. El inglés, el francés y el alemán utilizan comillas diferentes, por lo que el diseñador debe poder cambiar fácilmente la configuración tipográfica.

    Ahora tenemos una tipografía bastante decente en nuestro ejemplo:

    pThe fine details of screen typography can be improved with js-scripts and css./ppThat is the goal of «Typesetter.js» — an open-source solution by Andreas Carlsson and Jaan Orvet sup©/supspan2011/span/p

    Nuestro texto de muestra con una microtipografía mucho mejor que la que admite el navegador de forma nativa.

     

    ¡Hemos cubierto mucho, pero la parte más importante aún está por venir!

    2. El archivo de fuente personalizado

    Pasemos al archivo de fuente en sí.

    Colocación de versalitas y números antiguos

    Nuestro texto ahora está dividido en clases; podemos usar CSS para configurarlo en minúsculas y números de estilo antiguo. Dado que ningún navegador admite OpenType, no podemos utilizar la font-variant: small-capsregla normal, porque esto sólo reduciría las letras mayúsculas, lo que daría como resultado caracteres más finos y claros.

    La font-variant: small-capsregla simplemente reduce las letras mayúsculas, lo que da como resultado caracteres más delgados y claros. Para obtener versalitas reales, tenemos que usar nuestro archivo de fuente de subconjunto personalizado.

    El archivo de fuente que necesitamos es un subconjunto del corte normal; en él, los caracteres en mayúsculas se han reemplazado por caracteres en versalitas y los números del revestimiento se han reemplazado por números de estilo antiguo. (¿Recuerdas los días de las “fuentes de conjuntos de expertos”? Es un poco así. Si no lo recuerdas, será mejor que lo hagas).

    Ahora podemos especificar en nuestros archivos CSS usar el subconjunto para abbretiquetas. Esto nos dará verdaderas versalitas en la Web y nos permitirá elegir entre números de estilo antiguo y de línea en nuestro texto.

    abbr { font-family: "Tanger Serif Expert", Cambria, Georgia, serif; letter-spacing: 0.15em; text-transform: lowercase; font-variant: small-caps; font-weight: 650;}

    Obtener el archivo de fuente

    Fontdeck apoya el proyecto OpenTypography ofreciendo amablemente subconjuntos de fuentes además de sus fuentes principales.

    Otros tipos de servicios y fundiciones también ponen a disposición subconjuntos. Mantenemos una lista actualizada con ejemplos en OpenTypography .

    Crea tu propio archivo de fuente

    Si tiene experiencia trabajando con fuentes, crear sus propios archivos de fuentes subconjuntos es bastante sencillo.

    Abre el corte normal en tu editor de fuentes favorito. Copie los glifos en versalitas y péguelos donde están los glifos en mayúsculas y minúsculas. Copie los números de estilo antiguo donde están los números del revestimiento. Una vez hecho esto, sólo tienes que generar un nuevo archivo de fuente y convertirlo a todos los formatos de fuentes web requeridos: TTF, OTF, WOFF, EOT, SVG.

    Puede crear fácilmente su propio archivo de fuente personalizado en subconjuntos. Simplemente reemplace los glifos en mayúsculas y minúsculas con las versiones en minúscula y los números de revestimiento con los de estilo antiguo.

    Ahora tiene su propia fuente web personalizada lista para usar con Typesetter.js

    Pero asegúrese de verificar la licencia para asegurarse de que tiene permiso para ajustar el archivo de fuente e incrustarlo mediante el selector @font-face.

    Involúcrate en el futuro de Typesetter.js

    Actualmente estamos probando Typesetter.js en nuestro CMS basado en Dropbox y Markdown, Skrivr , pero Typesetter.js se encuentra en una etapa muy temprana y necesita más desarrollo para funcionar sin problemas con todas las grandes cosas que ofrece la Web y la tecnología digital. La comunidad de pantalla está creando.

    Principalmente queremos que sea más rápido. Otra pregunta a la que nos enfrentamos es si utilizar RegEx o no. Además, ¿cómo creamos una mejor solución para apuntar a partes del DOM y aislar aquellas que no deberían reemplazarse?

    Encontrará toda la información más reciente, ejemplos, códigos y más en OpenTypography , que también es el mejor lugar para ponerse en contacto y hacernos saber si está interesado en llevar una mejor tipografía a las pantallas que nos rodean.

    (Alabama)Explora más en

    • Codificación
    • Tipografía
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    El futuro de la tipografía de pantalla está en tus manos

    El futuro de la tipografía de pantalla está en tus manos

    Sobre los autores Índice Lecturas adicionales sobre SmashingMag:

    programar

    es

    https://pseint.es/static/images/programar-el-futuro-de-la-tipografia-de-pantalla-esta-en-tus-manos-790-0.jpg

    2024-04-04

     

    El futuro de la tipografía de pantalla está en tus manos
    El futuro de la tipografía de pantalla está en tus manos

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20