Presentamos la tipografía web adaptable con FlowType.JS

 

 

 

  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost
  • ¡Registro!

  • Índice
    1. Tecnicamente hablando
      1. Las matemáticas básicas
      2. El Prototipo
      3. Código mejorado
      4. Un poco de ayuda de amigos
      5. El código final
      6. Cómo funciona y respaldo
      7. Implementación
    2. Nunca nada está terminado
      1. Otras lecturas

    Mientras trabajaban para Simple Focus, un par de nuestros diseñadores notaron cómo las imágenes siempre escalaban perfectamente. La longitud de la línea del hipertexto, por otro lado, cambia según el ancho de su elemento principal, lo que tiene un efecto negativo en la legibilidad. Uno de nuestros diseñadores preguntó: "¿No sería bueno si el texto funcionara más como imágenes?" y unas semanas más tarde, FlowType.JS estaba completamente desarrollado y listo para ser enviado al mundo. Aquí está el proceso de cómo llegamos allí.

     

    *Es un gran placer para nosotros apoyar a los miembros activos de la comunidad de diseño y desarrollo web. Hoy, estamos orgullosos de presentar FlowType.JS que permite un recuento perfecto de caracteres por línea en cualquier ancho de pantalla. Este artículo es otro especial más de nuestra serie de diversas herramientas, bibliotecas y técnicas que hemos publicado aquí en Smashing Magazine: LiveStyle , PrefixFree , Foundation , Sisyphus.js , GuideGuide , Gridpak , JS Bin , CSSComb y Jelly Navigation Menu . — Ed.*

    Mientras trabajaban en un sitio con muchas imágenes para Simple Focus, un par de nuestros diseñadores, John Wilson y Casey Zumwalt , notaron cómo las imágenes siempre escalaban perfectamente. Tire de la esquina de la ventana del navegador y las imágenes se expandirán para llenar el espacio. Empuje las esquinas hacia atrás, se encogen y caen en su lugar. La longitud de la línea del hipertexto, por otro lado, cambia según el ancho de su elemento principal, lo que tiene un efecto negativo en la legibilidad.

    "¿No sería bueno", preguntó John, "si el texto funcionara más como imágenes?" Casey le aseguró que podría hacerlo, con un complemento jQuery, si tan solo pudieran resolver los cálculos.

     

    "En un diseño fluido, el ancho del navegador y la medida tipográfica están vinculados: cuanto más amplia es la ventana gráfica, más caracteres por línea". -Trent Walton

    Simple Focus es principalmente una empresa de diseño, por lo que, como la mayoría de las ideas de programación que tenemos, no hicimos nada con ellas. Luego, unas semanas más tarde, John estaba releyendo el artículo de Trent Walton sobre el tipo de líquido y se inspiró para intentar resolverlo.

    Una hora más tarde, teníamos un prototipo funcional y estábamos pateando los neumáticos internamente. En dos semanas, FlowType.JS estaba completamente desarrollado y listo para ser enviado al mundo.

    Aquí está el proceso de cómo llegamos allí:

    Tecnicamente hablando

    FlowType.JS , en resumen, no es más que algunas matemáticas inteligentes envueltas en un complemento jQuery, con algunas opciones para controlar el tamaño de fuente para lograr una cierta longitud de línea.

    Echemos un vistazo más profundo al código para comprender mejor lo que está sucediendo:

    Las matemáticas básicas

    Como verá a continuación, es algo bastante simple. Primero, necesitamos medir el ancho de un elemento para establecer un número base, que será la clave para el resto de la ecuación. Luego dividimos esa base por un número que se resuelva en un número razonable font-size. Por ejemplo, si un elemento mide en 1000pxy lo dividimos entre 50, terminamos con 20px, que es un valor razonable font-size.

    Line-heightes otra ecuación simple basada en font-size. Digamos que elegimos un line-heightnúmero de 1.45veces font-sizepara facilitar la lectura. Esta ecuación es fácil: font-sizemultiplicado por 1.45es igual al recomendado line-height.

    El Prototipo

    Un prototipo inicial nos muestra que la idea realmente funciona:

    var $width = $window.width(), $fontSize = $width / 50, $lineHeight = $fontSize * 1.45;$(window).ready( function() { $('element').css({ 'font-size':$fontSize + 'px', 'line-height':$lineHeight + 'px' });}$(window).resize( function() { $('element').css({ 'font-size':$fontSize + 'px', 'line-height':$lineHeight + 'px' });});

    Si estabas prestando atención, habrás notado que hay un problema importante con el código: las matemáticas se basan en el ancho de la ventana, no en el ancho del elemento. Esto causa problemas con los puntos de interrupción donde los elementos cambian de tamaño a una dimensión mayor y el texto se hace más pequeño mientras que el ancho del elemento se hace más ancho. Viajes y turismo

     

    Código mejorado

    La revisión del código para medir el ancho del elemento en lugar del de la ventana solucionó este problema. Durante esta sencilla actualización, también decidimos comenzar a incluir opciones para umbrales máximos y mínimos para tamaños de fuente y ancho de elemento, ya que una columna muy estrecha haría que el tamaño de fuente fuera demasiado pequeño para leer. Lea más sobre estos umbrales .

    Compartir el código revisado aquí haría que este artículo fuera demasiado largo, ya que incluye varias declaraciones "si", así como código duplicado. Ineficiente por decir lo menos. Dicho esto, al menos tenía opciones y funcionó bien. Pero estamos centrados en el diseño, ¿recuerdas? Así que queríamos recibir un pequeño consejo de algunos amigos antes de publicar algo que pudiera hacernos parecer novatos.

    Un poco de ayuda de amigos

    Casi listo para su lanzamiento, FlowType.JS fue revisado por varios pares. Dave Rupert sugirió que nos aseguráramos de que funcionara bien creando una página de demostración con varias instancias y mucho texto. Lo juntamos y contuvimos la respiración y, afortunadamente, funcionó muy bien.

    Luego le pedimos su opinión a Giovanni DiFeterici . Giovanni nos sorprendió al refactorizar y condensar todas las declaraciones "si" en dos líneas de código. Al final, la versión comprimida de FlowType.JS puede tener tan solo 450 bytes. También recibimos consejos de muchos otros amigos generosos sobre todo, desde la revisión ortográfica del sitio de demostración.

    El código final

    El código final es fenomenalmente simple. Algunas opciones y variables configuradas simultáneamente, una función base llamada changesdonde ocurre toda la magia y dos llamadas simples a changes. Uno establece la font-sizecarga y otro para volver a calcular el cambio de tamaño de la ventana.

    Echa un vistazo al código aquí:

    (function($) { $.fn.flowtype = function(options) { var settings = $.extend({ maximum : 9999, minimum : 1, maxFont : 9999, minFont : 1, fontRatio : 35, lineRatio : 1.45 }, options), changes = function(el) { var $el = $(el), elw = $el.width(), width = elw settings.maximum ? settings.maximum : elw settings.maxFont ? settings.maxFont : fontBase settings.minFont ? settings.minFont : fontBase; $el.css({ 'font-size' : fontSize + 'px', 'line-height' : fontSize * settings.lineRatio + 'px' }); }; return this.each(function() { var that = this; $(window).resize(function(){changes(that);}); changes(this); }); };}(jQuery));

    Cómo funciona y respaldo

    Como puede ver, el código aplica los números recién calculados como CSS en línea al elemento seleccionado. Debido a que este nuevo CSS está en línea, sobrescribe todo lo que haya configurado en sus hojas de estilo vinculadas, creando un respaldo natural en caso de que un usuario tenga JavaScript deshabilitado.

    Querrá configurar los ajustes según las opciones de fuente que elija, ya que las matemáticas funcionan de manera diferente según el tamaño de fuente que elija.

    Implementación

    FlowType.JS se creó como un complemento de jQuery, por lo que comenzar es fácil. Todo lo que necesita hacer es llamar a FlowType.JS y configurar algunas configuraciones según su diseño.

    $('body').flowtype({ minimum : 500, maximum : 1200, minFont : 12, maxFont : 40, fontRatio : 30, lineRatio : 1.45});

    Las instrucciones completas están en nuestro sitio de demostración . Si jQuery no es lo tuyo, un miembro de la comunidad Github ya lo ha portado a JavaScript nativo.

    Nunca nada está terminado

    Tenemos más ideas sobre formas de mejorar el complemento, pero lo tratamos ante todo como un experimento. Resuelve un problema común en el diseño adaptable donde la longitud y la altura de la línea no son ideales entre los puntos de interrupción. De todos modos, muchos desarrolladores y diseñadores inteligentes han planteado algunas preguntas sobre FlowType.JS.

    Una pregunta que nos han hecho se centra en la teoría tipográfica: ¿debería un diseño comenzar con el tamaño de fuente o el ancho del elemento al optimizar la legibilidad del texto? Creo que la mejor respuesta es que es una cuestión de criterio, que leer el texto de su diseño es la mejor manera de determinar qué es más legible. Simplemente hemos escrito una herramienta para ayudarle a lograr lo que desea con sus diseños.

    Otra tiene que ver con la accesibilidad: ¿esta herramienta no desactiva el zoom del texto, haciendo así que los sitios sean menos accesibles? Somos conscientes de este comportamiento, pero los usuarios pueden hacer zoom más allá del 200 % y ver un aumento en el tamaño de la fuente. Por ahora, simplemente recuerde tener en cuenta a su audiencia al diseñar con FlowType.JS.

    Recuerde, como cualquier utilidad, no es una panacea para los desafíos del diseño web. Solo estamos tratando de contribuir con una pequeña idea a la comunidad de diseño y desarrollo web y agradecemos sus comentarios en Github.

    Otras lecturas

    • Documentación de código, simplificada
    • Cómo impulsar su flujo de trabajo de diseño con Setapp
    • Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript
    • Genialidad de JavaScript: o cómo animar sin jQuery

    (il, ea, mrn)Explora más en

    • Codificación
    • Flujo de trabajo
    • javascript
    • jQuery





    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

    Presentamos la tipografía web adaptable con FlowType.JS

    Presentamos la tipografía web adaptable con FlowType.JS

    Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost ¡Registro! Índice Tecnicamente

    programar

    es

    https://aprendeprogramando.es/static/images/programar-presentamos-la-tipografia-web-adaptable-con-flowtype-826-0.jpg

    2024-05-20

     

    Presentamos la tipografía web adaptable con FlowType.JS
    Presentamos la tipografía web adaptable con FlowType.JS

    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