La tipografia és un dels elements més importants de qualsevol web i té un impacte considerable en la marca i l'experiència.Tan fonamental és que fer canvis complets a la teva tipografia (optar per una nova font, canviar la mida, augmentar l'interlineat) és complex i està ple de possibles pous de temps.Però hi ha alguns canvis senzills que pots fer a la teva tipografia que no trencaran la teva quadrícula i es poden aconseguir en 30 minuts o menys. Aquí en tens vuit dels més fàcils.
-
Augmenta el contrast de color
En dissenyar el text, és habitual que els dissenyadors el vegin com un bloc dins d'un disseny visual. La relació d'un dissenyador amb el text és molt diferent de la d'un usuari; un dissenyador col·loca el text com una forma, un usuari el llegeix línia per línia. En conseqüència, els dissenyadors tendeixen a subestimar la quantitat de contrast que requereix el text.El text gris clar és estèticament bonic però funcionalment inútil. El text està destinat a ser llegit i ha de complir amb els estàndards WCAG AA en ordinadors d'escriptori i els estàndards WCAG AAA en dispositius mòbils, o en qualsevol situació amb moltes fonts de llum ambiental. Com més gran és el text, més marge de maniobra tens.El text s'ha de provar minuciosament per comprovar el contrast, però com a punt de partida, el text de 18px sobre un fons blanc mai no hauria de ser més clar que #595959.
Estreny l'espai entre títols
La gran majoria de les tipografies estan dissenyades per usar-se com a cos de text: grans blocs de text continu, diverses línies de llarg. Quan es va fer la font, es va estendre per a aquest ús.A diferència del text continu, els encapçalaments tendeixen a ser curts i estan envoltats de més espais en blanc, especialment a dalt i a baix. Els espais en blanc addicionals inunden visualment l'espai negatiu de les formes de les paraules i separen les lletres.Per compensar-ho, pots reduir l'espai entre lletres i entre paraules dels encapçalaments entre un 1% i un 5%.
-
Afluixa l'espai entre paraules
Quan llegim, el nostre cervell no delleta les paraules lletra a lletra; reconeix formes de paraules i fins i tot formes de grups de paraules.La majoria de les tipografies es preocupen per no interrompre aquestes formes de paraules. Tanmateix, hi ha moments en què es vol evitar que es formin paraules i permetre caràcters individuals.Afluixa l'espai entre lletres en qualsevol text destinat a llegir-se com una sèrie de caràcters, com ara números de sèrie, codis de seguiment i dades tabulars.
Usa fonts del sistema per als camps d'entrada
La privacitat és un gran problema per als usuaris. Qualsevol cosa que puguis fer com a dissenyador per assegurar als usuaris que les seves dades estan segures augmentarà l'experiència d'usuari positiva del teu lloc.Dissenya els teus camps HTML perquè usin fonts del sistema: les fonts predeterminades establertes pel sistema operatiu amb què el teu usuari accedeix al lloc. Això crea una delimitació clara entre les dades de la marca en les fonts de la marca i les dades de l'usuari en les fonts de l'usuari.Usar fonts del sistema d'aquesta manera anima l'usuari a sentir-se propietari de les seves dades, genera confiança i augmenta les conversions.
Marca els paràgrafs una sola vegada
Els paràgrafs de text necessiten una indicació visual que han començat. Hi ha tres maneres en què això es transmet normalment: seguint un encapçalament, amb un espai vertical abans del paràgraf o sagnant la primera línia.Cada paràgraf ha d'utilitzar un d'aquests indicadors i només un. A causa de la naturalesa del contingut web i dels beneficis que tenen els encapçalaments per escanejar ràpidament el contingut de lectura, per a la majoria de llocs, la millor opció és una combinació de seguir un encapçalament i espaiat vertical.
Usa estils genuïns
Per diverses raons que van des de la disponibilitat de fonts fins a l'optimització agressiva, és habitual que els llocs falsifiquin estils alternatius usant CSS. Les cursives es poden falsificar com a obliqües amb una inclinació, les negretes es poden falsificar usant els valors predeterminats del navegador i les versaletes es poden falsificar posant el text en majúscules i reduint la mida de la font.Aquests trucs fan més mal que bé, creant formes de paraules distorsionades que interrompen el flux natural del text.Si no pots usar cursives, negretes i minúscules genuïnes, no les falsifiquis. Troba formes alternatives de crear èmfasi, com ara canviar els colors.
Usa les cometes correctes
Els apòstrofs, les cometes simples i dobles són caràcters específics. La majoria de les fonts proporcionen un glif per a ells que és diferent de la tecla ràpida de cometes simples o dobles del teclat.Aquestes cometes es coneixen habitualment com a cometes "intel·ligents" perquè les aplicacions de processament de textos generalment tenen l'opció de ser "intel·ligents" respecte als glifs que usen.Usar les cometes correctes és una de les maneres més senzilles d'oferir un text refinat.
Divideix el text correctament
La separació sil·làbica és la divisió d'una paraula en dues línies. Permet un text irregular a la dreta menys extrem, i és vital en dispositius mòbils on l'amplada de pàgina disponible és relativament petita en comparació amb l'escriptori.La web té un suport sorprenentment pobre per a la partició correcta, però està millorant gradualment i es pot aplicar com una millora progressiva.El CSS et permet configurar la divisió de paraules en cap (sense guionets), automàtic (el navegador s'insereix automàticament) i manual (en què especifiques on han d'aparèixer els guionets usant el caràcter de guionet suau).Tipogràficament, es pot inserir un guionet en qualsevol paraula que tingui cinc caràcters o més; ha d'haver-hi almenys dos caràcters abans del guionet i almenys tres després.Mai no has de separar tres línies consecutives de text, però abordar això requereix JavaScript. Pots minimitzar aquest problema augmentant-ne la mida.A Several som experts en disseny i desenvolupament web, així que si vols deixar aquesta feina en mans d'un grup de professionals, contacta amb nosaltres.
Hi parlem?
