Tecnología

Tipografías y el balance entre rendimiento y diseño web

·

Si lleváis tiempo leyéndome seguramente sepáis ya que una de mis pequeñas pasiones es el diseño y el rendimiento web. Tuve que ahondar en estos temas profesionalmente para una etapa profesional anterior y me quedé con la copla. Tanto que ahora tengo una opinión muy fuerte sobre lo que creo que un sitio web debe y no debe dar en este tipo de materias.

Esa problemática la he trasladado también a Incognitosis, claro. El rediseño que puse en marcha hace ya dos años y medio sigue manteniendo su validez, pero eso no implica que no haya apartados que mejorar.

Uno de ellos es difícilmente atacable. Resulta que cuando me puse a probar rediseños tuve claro que quería una tipografía muy especial. El problema es que las tipografías “seguras” (safe web fonts) que se usan por defecto en la mayoría de navegadores son efectivas pero impersonales, y yo buscaba un toquecito de personalidad.

Eso me acabó decidiendo a usar Linux Libertine, una tipografía con guiño incluido (para eso soy linuxero de corazón, aunque use Windows todo el día) que me pareció perfecta para ese rediseño. ¿Qué problema hay? Pues que como buena webfont, su uso condena (un poco el rendimiento).

Eso se ve rápidamente cuando paso alguna prueba de rendimiento rápida como WebPageTest en la que la cascada de elementos y recursos que se van cargando deja claro que cualquier webfont impone una carga inadmisible si buscas rendimientos óptimos. Da igual que yo use Redis como sistema de caché y que la carga de la página (menos de 1MB normalmente) sea asumible y se realice en un par de segundos. El caso es que lo de las tipografías web se nota. Pesa. Durante todo este tiempo he preferido obviar el problema y sacrificar tiempo de carga y tamaño de página para lograr un Incognitosis que en mi opinión está bastante logrado. Esta mañana, no obstante, un artículo sobre rendimiento web me ha recordado que debería volver a repasar el asunto y quizás buscar alternativas.

Lo ideal, claro, es tirar de tipografías seguras y estándar. En sitios como CSS Font Stack tienen una buena relación de lo seguras que son esas fuentes (con una estimación de lo mucho que están soportadas en Windows y macOS), y de las que vi disponibles en el catálogo de serifas solo me parecía adecuada Garamond, con un 86,47% de soporte en Windows y, eso sí, un pobre 49,91% en macOS, bastante bajito. Podría ir a una Times New Roman mucho más segura, como ocurre con Georgia o Palatino, pero ninguna de ellas me acaba de convencer en las pruebas preliminares. De hecho he puesto un rato Garamond y si habéis accedido a Incognitosis de nuevas hoy habréis visto que la cosa cambiaba bastante:

Si pincháis en la imagen podréis verla a tamaño completo. A la izquierda, Garamond. A la derecha Linux Libertine.

La verdad es que de primeras choca, porque con una Garamond 26px/36px el texto  está casi como medio borrado frente a una mucho más consistente Linux Libertine 22px/32px. No se lee mal, y de hecho la lectura es como más “ligera”, por decirlo de algún modo, pero no sé si me convence. Y aquí, claro, es donde llega la pregunta. Creo que voy a dejar Linux Libertine, pero ¿cómo veis el cambio?

Actualización: los experimentos, mejor con gaseosa. Volvemos a Linux Libertine (puede que tarde un poco en refrescar aspecto por caché). Quizás más adelante vuelva a probar cosas de este estilo con algo más de calma.


Incognichollos

Esta es una selección con las mejores ofertas tecnológicas actualizadas casi diariamente, como expliqué aquí. Aunque estés en un post “antiguo” las ofertas son de última hora, los Incognichollos los actualizo aparte. Aprovecha, que no suelen durar mucho tiempo:

  • Miniproyector Stoga 1080p: evidentemente no son 1080p nativos sino interpolados, la resolución real es 480p, pero oye, puede ser un aparatito gracioso para presentaciones o para ver cosas “a lo grande” aunque la calidad no sea top. Las críticas son buenas, así que si os apetece probar esto de los proyectores, buena oportunidad. El precio, claro, lo mejor: 45,99 euros en Amazon.
  • Monitor HP 22w: un monitor de 21,5 pulgadas, resolución 1080p y un puerto HDMI y otro VGA a un precio de escándalo, 89,99 euros en Amazon.
  • Monitor BenQ GL2580H: y por completar la oferta, este modelo de 24,5 pulgadas también es estupendo, resolución 1080p, HDMI y el precio destacado: 112,99 euros en Amazon.
  • OnePlus 5T: los nuevos telefonazos de OnePlus llegan por fin a las tiendas chinas con precios más atractivos si no os importa tanto el tema garantía. El precio más bajo ahora mismo es el de los 393,15 euros en GeekBuying con el cupón THCSEGJC.
  • Xiaomi Mi 6 64 GB: atención lectores y amantes de los caprichos tecnológicos, porque mi móvil favorito está a precio interesante. El modelo negro de 64 GB está a 307,61 euros en GearBest con el cupón BOGESM6. Novedad: el modelo azul de 64 GB sale a 313,01 en GearBest con el cupón spmi6, pero además es el nuevo envío desde España en 3-5 días. El modelo cerámico de 128 GB está a 351,32 euros en GeekBuying. También tenéis la versión “oficial” que venden en España y que está a  449 euros en Amazon.
  • Xiaomi Mi 5X: y si no queréis pagar el precio del A1, el único del fabricante con “Android puro” y sin MIUI, podéis ahorrar una pasta en el modelo con MIUI. Es idéntico en hardware, pero cuesta mucho menos: en GearBest lo tenéis a 164,96 euros con el cupón 5xximbj. En Banggood lo tenéis a 155,92 euros con el cupón 12BGM5X64GB (modelo dorado) también. Tremendo, y creedme, MIUI ya está muy pulido, os lo digo yo que lo uso a diario en mi Mi 6.
  • Xiaomi Mi A1: un estupendo móvil con un Snapdragon 625, 4 GB de RAM, 64 GB de capacidad, pantalla de 5 pulgadas y una doble cámara muy solvente. El chollo de la temporada, imposible de encontrar en España oficialmente por ahora. Está a 178,59 euros en GearBest con el cupón PDMESXA1.
  • Huawei Mate 10  Lite: el super teléfono de Huawei de finales del año pasado en versión lite, que sigue siendo estupendo con su pantalla de 5,9 pulgadas casi sin marcos, Kirin 659, sus 4 GB de RAM y 64 GB  de capacidad (ampliables) además de una cámara dual tanto en la frontal como en la trasera. Todo por 269 euros en eBay, una propuesta muy, muy llamativa.
  • HP Elite x3: atentos porque aunque estamos hablando de un móvil Windows 10 (una plataforma móvil que parece que acabará en el olvido) estamos ante una pieza casi de coleccionista. Hasta no hace mucho estaba a más de 800 euros, así que el precio es de risa. Pantalla de 6 pulgadas, Snapdragon 820, 4 GB de RAM, 64 GB de capacidad y esa capacidad de usar Continuum y convertirlo en un PC de sobremesa con el dock opcional. Está a 369,54 euros en Amazon, increíble. Hasta yo me siento tentado en plan coleccionista.
  • Moto G 5ª Generación: modesto pero con las garantías de Lenovo. Un cinco pulgadas resolutivo con sus 3 GB de RAM y sus 16 GB de capacidad. Está a 149 euros en Amazon.
  • Xiaomi Redmi 5 Plus: el nuevo teléfono modesto de los de Xiaomi con “pantalla infinita” de 6 pulgadas, un Snapdragon 625, 3 GB de RAM, 32 GB de capacidad y doble cámara, por 130,05 euros en Aliexpress (modelo dorado). Es un robo, chavales.
  • Xiaomi Mi Mix 2: el súper teléfono con pantalla casi sin marcos de Xiaomi con un Snapdragon 835, 6 Gb de RAM y 64 GB  de capacidad, además de una cámara decente aunque no sea dual. Está a 397,61 euros en GearBest.
  • Xiaomi Mi Note 3: los propios responsables de la empresa lo califican como un Xiaomi Mi 6 de 5,5 pulgadas, y la cámara dual, como la de este, es fantástica (en DxOMark le ponen un 94, uauh). Algo menos potente (Snapdragon 660), pero estupendo sobre todo a este precio, está a 270,71 euros en GearBest.
  • Honor 7X: el nuevo gama media de Huawei está muy bien: un Kirin 659, 4 GB de RAM, 32 GB de capacidad ampliables y cámara dual bastante maja. Gran competidor del Xiaomi Mi A1, diría. Todo por 172,31 euros en Geekbuying con el cupón NVIXVWYM. En Amazon lo tenéis a 232,99 euros.

 

  • Xiaomi Mi Notebook Pro: el señor portatilazo de este fabricante compite con lo más granado del mercado, de ahí lo del “Pro” final. Llega con un Core i5-8250 de ultimísima generación, una potente GeForce MX150 (netamente superior a las 940MX), 8 GB de memoria DDR4, 256 GB de capacidad y lector de huella. Está a 702,17 euros en GearBest con el cupón MIBOOKPRO, un precio absolutamente alucinante. Dos variantes interesantes: si queréis más potencia tenéis la versión con el Core i7-8550, 8 GB y 256 GB por 761,39 euros en GearBest con el cupón XiaomiMiNqq. Si además queréis más memoria, el modelo con el Core i7-8550U, 16 GB de RAM y 256 GB de SSD está a 848,89 euros en LightningInTheBox, que tampoco está nada mal.
  • Xiaomi Mi Notebook Air 12: el modelo original de 12,5 pulgadas FullHD, un Core M3-7Y30, 4 GB de memoria y 256 GB de capacidad en su SSD está a muy buen precio: 473,75 euros en GearBest con el cupón MIAIR256.
  • Xiaomi Mi Notebook Air 13,3: el nuevo modelo de mi portátil BBB (bueno, bonito y barato) favorito llega con un Core i5-7200U, 8 GB de RAM, 256 GB de SSD, una GeForce MX150 y atentos, lector de huella. Creedme: es una pasada, sobre todo a este precio. Lo tenéis en GearBest por 634,49 euros.
  • Lenovo P8: una tableta de 8 pulgadas de 1.920 x 1.200 píxeles con un Snapdraon 625, 3 GB de RAM y 16 GB de capacidad ampliables. Está a 118,43 euros en GearBest con el cupón HNYear211.
  • Apple iPad (2017):  la tableta de Apple “básica” (no es el modelo Pro, cuidado) está a buen precio. Su modelo WiFi con 32 GB de capacidad en color blanco y oro está a 290 euros en eBay. Atentos a la funda Logitech Slim Folio con teclado de la que hablo en accesorios.
  • Nintendo Switch: la consola que está triunfando en todo el mundo es un regalo bastante estupendo para estas navidades en su versión en color gris y también en la azul-rojo neón. Está a 314,90 euros en Amazon.
  • Xbox One S 500 GB + ACO: la alternativa es la consola de Microsoft, más barata (con menos almacenamiento) y con el ‘Assassin’s Creed: Origins’, que no está nada mal, y todo por 229,95 euros en Amazon.
  • TV 49” Philips 4K con Ambilight: es el modelo 49PUS6412 que llega con resolución 4K, soporte HDR, sistema operativo Android TV y además ese curioso sistema de iluminación Ambilight. Está a 499,99 euros en eBay, cuando en Amazon ronda los 650 euros.
  • Amazon Fire TV Stick Basic Edition: por fin tenemos este competidor del Chromecast en nuestro país, aunque eso sí, llega sin el soporte Alexa de su hermanito mayor. Lo mejor, que podéis prescindir del móvil para controlarlo (tiene mando) y que además de todo lo que ofrece Chromecast ofrece soporta, evidentemente, Prime Video. Si sois usuarios Prime de Amazon lo tenéis por 39,99 euros en Amazon. Muy, muy interesante.
  • Tarjeta Micro SD SanDisk Ultra 128 GB: espacio de almacenamiento sobrado para ampliar la capacidad de vuestros móviles o tabletas… ¡o Raspberry Pi! Está a 39,90 euros en Amazon (33% dto.)
  • Ratón Gaming Razer DeathAdder: un buen ratón gaming que en Amazon cuesta 66 euros y que llega con la típica iluminación RGB de Razer y una sensibilida dde hasta 16.000 PPP. Está a 39,90 euros en GeekBuying con el cupón SCUIHVRI.
  • Samsung Gear Sport: acabo de analizarlo y me pareció una gran opción para deportistas, sobre todo si hacéis natación. Si es el caso, atentos porque está rebajado: cuesta 239,99 euros en Amazon (32% dto).
  • Funda Logitech Slim Folio: permite contar con un teclado en tu iPad de 9,7 pulgadas en una funda que además lo protege. Un buen accesorio para darle más capacidad de productividad a la tableta, incluso si no es un iPad Pro. Está a 78,75 euros en Amazon (25% dto.). Aunque las fotos no lo indican, es el teclado en español con la eñe.
  • Logitech MX Master: el ratón que uso a diario y que me tiene encantado de la vida. Perfecto para manos “grandecitas” y cómodo como ninguno que yo haya probado. Está a 47,90 euros en Amazon (48% dto.)
  • Gafas de realidad virtual Hamswan: no son unas Oculus Rift, claro, pero esta evolución de las Google Cardboard son una opción curiosa para dispositivos de entre 4 y 6 pulgadas que podréis usar para experimentar con la realidad virtual. Parecen muy cómodas, tienen auriculares incorporados y botón FOV para el campo de visión. Están a 26,68 euros en Amazon (34% dto.)

¿Quieres recibir un correo de aviso cuando publique nuevas entradas?

Standard

15 comentarios en “Tipografías y el balance entre rendimiento y diseño web

  1. Korso dice:

    La tipografía de tu blog -y el diseño en general- es de lo más agradable de leer que se puede encontrar (con permiso de Medium, que otra cosa no, pero es muy agradable de leer). Eso sí, estoy en Linux y estoy leyendo el blog en Arial. Javi, por favor xD

    • Sí, Lato efectivamente se me ha quedado porque la uso en los blockquotes y en la cajita del buscador. Quería probar quitando Linux Libertine, pero no parece que vaya muy bien la cosa :/

    • Hola Moronguer

      Claro que acepto sugerencias 😉 Los textos justificados funcionan para según qué cosas, pero creo que no son buenos para una narrativa como la de un blog en la que justificar párrafos invita a una lectura monótona. Que una línea acabe antes o después hace que el recorrido visual sea más entretenido en mi opinión, y ayuda a que no te pierdas si el texto es largo (o denso). Lo consideré en su momento y lo descarté.

      Gracias de todos modos, y no dudes en apuntar cualquier otra cosa que se te ocurra Moronguer!

Comentarios cerrados