5 maneres de millorar la vostra tipografia web

El tipus és una part fonamental de cada projecte web. La legibilitat i la llegibilitat solen ser part integrant de l'experiència de l'usuari. Saber treballar amb text pot augmentar la conversió, la durada de cada sessió i el vostre lloc web és més valuós per a les persones.

Què és el text?

Cartes, paraules, frases, paràgrafs. El text com parlar és una manera de transmetre idees a les persones. Conté missatges informatius i específics que podeu llegir. Quan escriviu per a gent a Internet, cal que entengueu de què parleu.

Com a gran fan de Ellen Lupton's Thinking with Type, he de citar l’autor i dir: "En tipografia," text "és una seqüència contínua de paraules que difereix dels encapçalaments o subtítols més curts".

Una bona tipografia ha de proporcionar als usuaris una manera fàcil de saber què busquen. Heu de sentir-vos còmodes i productius en llegir els vostres textos. D’aquesta manera, haureu de comunicar les vostres idees de la forma més eficaç possible. Una mala tipografia us frustrarà i us distraurà, us sentireu decebuts i no llegireu.

En aquest article, us donaré alguns consells sobre com millorar la tipografia web i fer que el contingut del vostre text sigui més llegible i llegible. Per tant, comencem

Mida del tipus de lletra

Fa uns anys, era habitual utilitzar 10 o 12 píxels per al cos del text. Avui en dia utilitzem pantalles FHD o UHD, per la qual cosa també hem d’ampliar les mides de la lletra. Si s’utilitza una mida de lletra estàndard gran, s’augmenta la llegibilitat del contingut del text. És òptim tenir una mida de lletra de 16 a 22 píxels per al vostre cos (o ) per millorar la llegibilitat del vostre contingut. En dissenyar un lloc responsiu per a mides de pantalla més petites, podeu reduir el text per defecte a 14 a 18 píxels.

Aquestes mides també són mínimes quan es tracta de dissenyar per a persones amb deficiències visuals (persones que porten ulleres o només gent gran).

La mida òptima del text del cos és d’entre 16 i 22 píxels per millorar la llegibilitat del contingut del vostre text.

Tanmateix, no oblideu que la mida òptima del vostre tipus de lletra depèn sempre del tipus de lletra que hàgiu escollit per al vostre projecte web. Aquí a la imatge de sota es pot veure la diferència entre l'altura x (la distància entre la línia base d'una línia de text i les capçals de la part principal de les minúscules) d'Helvetica Neue i Futura.

Podeu veure la diferència entre Helvetica Neue i Futura en les mateixes mides.

L'espai entre línies també es coneix com a alçada de línia

També és conegut com a líder en impremta. Feien servir tires metàl·liques per separar les línies individuals.

En dissenyar per a la web, haureu d’utilitzar almenys 1,5 vegades la mida del text del vostre cos per a l’altura de la vostra línia. És òptim i es recomana utilitzar 1,1 o 1,2 vegades l’espai entre línies per als vostres encapçalaments.

Haureu d’utilitzar una alçada de línia que sigui almenys 1,5 vegades la mida del text del vostre cos.

Què vol dir això? A la pràctica, amb una mida de font de 16px per al contingut del cos, l'alçada de la línia hauria de ser d'uns 24px (com es pot veure en l'exemple següent).

Però de vegades, si voleu fer més elegants els vostres textos i només funcionar amb paràgrafs més curts, podeu augmentar una mica l’alçada de la línia.

Veureu Aktiv Grotesk amb una alçada de la línia de 1,5 múltiples del text del cos.

Longitud de línia

La gent no llegeix grans blocs de text a la xarxa. Realment els resulta incòmode i difícil escanejar línies llargues. És important que la gent no es mogui contínuament per una línia de text mentre llegeix, sinó que barregi moviments curts i ràpids (coneguts com a saccades) amb parades curtes (fixacions) - això va descriure l’oftalmòleg francès Louis Émile Javal.

Les persones no es mouen contínuament per una línia de text mentre llegeixen, sinó que fan moviments curts i ràpids, barrejats amb parades curtes.

Per tant, la longitud de la línia hauria de ser limitada i el nombre òptim de caràcters per línia hauria d’estar entre 60 i 80 per obtenir una experiència d’usuari positiva per als lectors. Per dissenyar llocs web amb resposta, heu de definir la longitud de la línia a les mides de pantalla més petites. Per a dispositius mòbils, heu d'utilitzar de 30 a 40 caràcters per línia.

Les línies de més de 80 caràcters també són un gran problema per a les persones amb dislèxia.

A la imatge podeu veure la diferència entre línies òptimes i massa àmplies.

Contrast

El contrast és important des del punt de vista de la facilitat d’ús, però també afecta la llegibilitat i la llegibilitat.

El text que no és prou alt en contrast és més difícil de llegir, i suprimir el lloc web no és només un infern per a les persones amb deficiències visuals. Això pot reduir les conversions i els temps de sessió mitjans o provocar taxes de rebot.

Avui en dia, la tendència és utilitzar un text gris sobre fons blanc. Tanmateix, no importa si els usuaris no poden llegir el contingut còmodament. La gent llegeix més lentament quan el contrast no és òptim. No heu de desxifrar cap paraula, podeu ometre informació important del text, no heu de descobrir enllaços, o pot ser difícil escanejar contingut, fins i tot si esteu llegint en dispositius mòbils mentre esteu de sol.

El contrast i el contingut de fons s’han d’alinear segons la regla 4.5: 1.

Des del punt de vista de l’accessibilitat, s’hauria de controlar el contrast i el contingut de fons segons la regla 4.5: 1, que també ajuda els usuaris amb deficiències visuals com ara deficiències visuals o daltonisme a llegir correctament el contingut de la pantalla. Però crear un contrast òptim sovint és més difícil i no es tracta només de colors. Per exemple, per a persones amb daltonisme, veure problemes d’enllaços d’hipertext és un problema i hauríeu de subratllar-los (també és una gran solució per a persones amb ceguesa).

El contrast no es tracta només de colors. Les persones amb deficiències visuals poden tenir problemes per trobar enllaços d’hipertext si no se’ls subratlla.

Ritme vertical

La gent del web no llegeix blocs de text sencers. Només cal escanejar el contingut i buscar informació important. Amb un ritme vertical, és més fàcil. Per als usuaris, l’exploració és més convenient que llegir a la xarxa. Utilitzem un ritme vertical per mantenir coherents totes les distàncies verticals entre els elements (encapçalaments, paràgrafs, subtítols o fins i tot imatges). També utilitzem el ritme vertical per facilitar que l’usuari trobi imatges importants. En aquest lloc web podeu tenir una experiència més relaxada i positiva.

Però, com funciona el ritme vertical?

Probablement heu sentit a parlar de Baseline: és molt important en el disseny d'impressió que la línia de referència sigui la línia invisible en la qual es troben tots els personatges. També utilitzem aquest terme en disseny web, però és una mica diferent. A l’àrea de disseny web, la línia de base es determina per l’alçada de la línia (l’alçada de la línia també és propietat CSS) del text del cos.

Quan definiu la vostra línia de base i creeu la vostra quadrícula bàsica, haureu de començar per la mida del text ( ) i definiu el múltiple per l’alçada de la línia (propietat per l’altura de la línia en CSS) i, a continuació, escalau-ho tot.

Com podeu veure a la imatge de sota, faig servir una mida de lletra de 16px per al text del cos i una alçada de línia de 24px. Això vol dir que 24px és la línia de referència per a mi (he dividit anteriorment per guiar millor i configurar tots els tipus de lletra relacionats amb la meva línia base) per 2, 3 o, sobretot, per tenir més guies a la pantalla). Basant-se en aquesta definició, tots els espais (incloent marcs, espais o sanefes) han de ser multiplicables o divisibles per 6px. Per crear una coherència visual entre paràgrafs i encapçalaments, vaig decidir crear espais com a múltiples del número 6, i finalment vaig utilitzar 24 o 36 píxels. Les mides de les fonts i les altures de la línia també són múltiples de 6px.

Aquí podeu veure com ha de funcionar el ritme vertical en els vostres dissenys.

Unes poques paraules com a conclusió

La tipografia és una part integral del disseny web i si es prenen les decisions correctes, el text és llegible, llegible i comprensible. L’usuari té una experiència d’usuari positiva en llegir el contingut de text i navegar pel vostre lloc web. Més conversions signifiquen més beneficis. També consideren que el vostre lloc web és més valuós. Simplement, utilitzeu aquests pocs consells i augmenteu l’accessibilitat i el temps mitjà de sessió.