Tipografia web Millors pràctiques per a un lloc web modern

Una guia de tipografia web sensible que inclou totes les bones pràctiques & normes de mida d’estil de tipus de lletra per assegurar que el contingut del vostre lloc sigui llegible & un goig contemplar.

Les millors pràctiques de tipografia

Els pintors tenen els seus pinzells. Els escultors tenen la seva argila. Els dissenyadors web tenen els seus tipus de lletra? Com ara Oliver Richenstein escrit famosament: “El 95% de la informació del web està escrita en idioma”. Després de tota la cura que heu concedit als vostres gràfics, icones personalitzades, menús bonics i interfícies netes personalitzades del vostre lloc, seria un pecat fer una reflexió sobre el component vital de la tipografia web..

No us preocupeu: no heu de ser un dissenyador principal per elaborar un text elegant i eficaç. Seguint algunes directrius i principis fiables, la vostra tipografia web transmetrà la informació que els usuaris desitgen de manera fàcilment llegible i pensada.

Establir una jerarquia visual

L’objectiu més important d’una bona tipografia web és crear un jerarquia de contingut que flueix visualment d’un element a l’altre. Tots els factors que promouen una experiència de lectura sense esforç són una distinció adequada entre els seus títols, subtítols i text corporal, una varietat de pesos i estils de tipus de lletra, i el suficient espai blanc entre els blocs de text..

Tipografia: exemple de jerarquia visual

Construint un cos fort

El vostre primer ordre de negoci és restringir la part principal del vostre lloc Cos text, ja que això és el que els vostres visitants passaran la major part del temps llegint. El seu objectiu és crear un text que flueixi de manera natural pels paràgrafs grans, inspirant un ritme saludable per a trams llargs de lectura.

  • La mida de lletra més habitual per al text del cos és 16px—O, millor encara, 1em (més informació sobre això més endavant).
  • Eviteu l’alineació central del text, ja que les vores desiguals de les dues cares us permetran una visió poc agradable. En canvi, fixeu a l’esquerra i a la dreta marge del contenidor del text a auto per aconseguir un efecte més desitjable.
  • Justificada el text funciona molt bé per a diaris, no per a pàgines web. La naturalesa dels dissenys fluids pot crear espais imprevisibles entre espais.
  • Tria de baix contrast tipus de lletra més alts. Fonts com Didot funciona molt bé per als titulars de jumbo o per a la impressió de gran format, però el seu alt contrast entre les línies de traç gruixut i prim fan que sigui difícil llegir a mida petita als llocs web.
  • Compte amb llegibilitat. En molts tipus de lletra sans-serif, les majúscules “I” i minúscules “l” semblen exactament iguals, cosa que pot generar confusions innecessàries.
  • L’òptim línia-alçada del text del paràgraf està entre 1,25-1,5 × la mida de la lletra. Ajusteu en conseqüència en funció del tipus de lletra escollit.

Rúbriques per a l’èxit

Per bé o per mal, probablement la majoria de lectors escorcollin a la vostra pàgina Rúbriques sense ni tan sols molestar-se amb el text principal. Per tant, és fonamental cridar l’atenció i sol·licitar més lectura assegurant-se que la tipografia dels seus títols és notable.

  • La mida mitjana del tipus de lletra del títol és d’alguns voltants 36px—O, millor encara, al voltant 2,25em (anem a arribar a això).
  • L’atenció sempre ha d’anar a l’encapçalament davant del cos. Assegureu-vos que el text de la capçalera no estigui sobrepès per un pes de lletra massa gruixut al cos.
  • Assegureu-vos que els vostres títols compleixin les expectatives dels lectors. Un text considerablement més gran i amb una àmplia distància entre el paràgraf fill significa un canvi en el tema, mentre que els títols més petits molt més propers als paràgrafs impliquen que el contingut estigui relacionat.
  • En el cas que el vostre títol s’envolgui a la següent línia, tingueu en compte que l’òptim línia-alçada per a títols és menys del que es tracta del text del cos.

L’espai entre

La quantitat d’espai que separa els elements de la vostra pàgina diu molt sobre la seva relació entre ells i és un principi de disseny que no es pot obviar. Les capçaleres dominants envoltades d’un oceà blanc proporcionen un context molt diferent que les capçaleres més petites que s’uneixen estretament als paràgrafs (recordeu que estem construint una jerarquia visual).

Generalment, és millor equivocar-se del costat de tenir massa espai blanc que no prou. Els dissenys nets amb un espai blanc generós són els preferits a la xarxa moderna.

Caient en línia

Imagineu que llegiu text al monitor d’alta resolució de 27 polzades que s’estén per totes dues vores de la pantalla. Els vostres ulls es cansarien després d’un sol paràgraf!

És important mantenir cada línia del text principal limitada a un nombre determinat de caràcters per tal que els ulls quedin centrats en un punt central. El consens popular és que aquesta màgica mesura escriptoris és De 60 a 75 caràcters de longitud. Per pantalles mòbils, on volem esquitxar els ulls i el text massa condensat, aquest número se situa al voltant 35–40 caràcters per línia.

Extinció de l’escala

S’ha escrit molt pel que fa a l’escala entre la mida del tipus de lletra i la capçalera. Quina és la mida perfecta de l’H2 si el text del vostre cos és, per exemple, 1? Molt bé, molts tipògrafs ja han descodificat determinar les proporcions més estèticament agradables entre el text corporal i els títols H1-H6. A més, aquestes proporcions matemàtiques també s’han d’adaptar en funció de la mida de la pantalla de l’usuari.

El dissenyador Jason Pamental proporciona un gràfic útil pel que ell creu que són les mides de lletra més òptimes de diversos dispositius multimèdia, i jo tinc l’acord amb ell. Essencialment, tot i que la mida H1 ideal en un escriptori pot ser 3 × La mida del cos, a la pantalla del mòbil apareixerà massa exagerada, per la qual cosa s’ha de reduir per adaptar-se a la zona de visualització més petita..

Gràfic de mides òptimes de tipus de lletra en diversos dispositius multimèdia

NOTA RÀPIDA: Com es pot saber si es té una bona jerarquia visual? Feu un cop d’ull a la pantalla fins que tot el text es desdibuixa. Si la disposició apareix com un bloc amorf sense distinció entre seccions, és possible que la vostra jerarquia falli. Tanmateix, si podeu distingir fàcilment les separacions entre blocs de text, títols i saber clarament per on han de viatjar els ulls, esteu molt bé!

Mantenir el text sensible

El disseny web sensible és una pràctica essencial en aquests dies, sobretot perquè cada vegada més persones utilitzen dispositius mòbils com a mitjà principal per navegar per Internet. Tot i que el disseny amb percentatges en lloc de píxels ha revolucionat la manera com les imatges i els marges s’adapten a l’amplada del fluid, la tipografia web responsiva ha estat malauradament un ou més dur a trencar.

L’optimització de les mides de tipus de lletra en diversos dispositius pot resultar aclaparadora, ja que cal navegar per diverses consultes multimèdia per orientar tot el text del vostre lloc web. Tanmateix, amb un ajustament ràpid a la unitat que trieu, descobrireu més fàcilment les mides de tipus de lletra adequades per utilitzar-les per a qualsevol tipus de pantalla..

Ems Over Pixels

Per simplificar la tipografia del vostre lloc, escasseu el píxel i comenceu a utilitzar-lo ems. Els correus electrònics permeten una comprensió més senzilla de l’escalet entre les mides de lletra del vostre lloc i les unitats més petites són més manejables que els números de dos dígits de píxels.

Més important encara, amb el sistema ems tot és relatiu al contenidor pare. Si definiu la opció línia-alçada d’un contenidor a 1,5 centímetres, i fins i tot si canvieu la mida de la font del contenidor, l’alçada de la línia es mantindrà en la proporció correcta. Amb els píxels, haureu d’ajustar constantment la propietat de l’alçada de la línia del contenidor per a cada canvi de la mida de la lletra per mantenir la consistència visual.

Aquest principi és cert per a marge, encoixinament, espaiat de lletres, i la majoria de qualsevol altre estil que apliqueu al text del vostre lloc. No hi ha més picades de píxels al contingut del contingut del contingut per a cada consulta de suports, només cal que estableixi el seu estat inicial a les EM i s’ajustarà automàticament amb les proporcions originals.!

Usant Ems

El primer que cal fer és establir la referència base de la mida de font del vostre lloc. En el seu full d’estil, escriviu això:

cos {
font-size: 100%;
}

Això estableix una mida de font relativa del contingut del vostre lloc 1em, que la majoria dels navegadors interpreten com 16px. Ara totes les vostres mides d’encapçalament: 2,25em, 1,5em, etc. són múltiples múltiples de la base 1em.

NOTA IMPORTANT: Ems ho són en cascada– la mida de la seva mida és relativa al valor establert del progenitor. Per exemple: si definiu la mida de la lletra del vostre cos a 1,25 i la mida del tipus de contenidor infantil a 1,25em, els dos tipus de lletra no tindran la mateixa mida. Més aviat, el text del contenidor infantil serà de 1,25 × la mida original de 1,25 x de pares.

Més consells per a una tipografia web fantàstica

A continuació, es mostren alguns consells per obtenir una tipografia web fantàstica:

No s’excedeixi

Heu de limitar la tipografia del vostre lloc web a 2-3 fonts com a molt Normalment es tractaria d’un tipus de lletra per als seus encapçalaments, un tipus de lletra per al text principal i potser un tipus de subtítol si fos necessari. Si utilitzeu massa tipus de lletra, podeu crear un disseny desordenat i no centrat. El temps de càrrega del vostre lloc també es pot veure afectat, tal com s’explica al punt següent.

Incorporeu només allò que necessiteu

Considereu només allò que és més necessari per al vostre lloc i deixeu la resta fora. Si sabeu, necessitareu regular, negreta i cursiva dissenyar un tipus de lletra determinat i, a continuació, incorporar només aquestes opcions i excloure prim, llum i negre estils. Si carregueu més estils del necessari, podeu tenir un gran èxit als recursos del vostre lloc, ja que cada estil individual és una sol·licitud del servidor independent.

Si no voleu limitar la vostra creativitat durant la fase de disseny, seguiu endavant i incloeu-ho tot; només heu de recordar d’eliminar l’excés d’estils abans que el vostre lloc es publiqui.

Si no la podeu llegir, no la feu servir

Aquest és un biggie. Mentre el florit tipografia manuscrita pot ser temptador d’utilitzar-la, si hi ha fins i tot la més mínima confusió sobre si es tracta d’una “g” o una “y”, no la feu servir! Res és més frustrant per al lector que lluitar per desxifrar un tipus de lletra il·legible.

Afavoreix el text real sobre “Lorem Ipsum”

Tot dissenyador confia lorem ipsum text maniquí per omplir les àrees de contingut buides quan planifiqueu el disseny d’un projecte. Tanmateix, us pot sorprendre el grau d’impacte que utilitzeu el contingut real de la vostra tipografia. “Lorem ipsum” és completament emocional i buit intel·lectualment; no proporciona cap idea real de com s’expressaran les teves paraules i la seva personalitat mitjançant tipus de lletra. Per tant, connecteu el contingut real al vostre lloc tan aviat com sigui possible abans de finalitzar el disseny del vostre lloc.

Contrast amb fons

Un tipus de lletra fosc sobre un fons blanc clar sempre proporcionarà la millor llegibilitat. El text en blanc sobre una imatge fosca o borrosa també s’està popularitzant en aquests dies. Tingueu en compte que els vostres antecedents no són massa complexos ni detallats, la qual cosa desbordarà el text del primer pla.

Exemple de tipografia incorrecta de text sobre fons de textUn exemple de mala pràctica de tipografia amb un fons de “text sobre text”.

Maridatge de tipus de lletra: els agrada

L’aparellament de tipus de lletra amb personalitats completament diferents generaran senyals confusos. Els dos poden contrastar estilísticament, però emocionalment haurien de servir el mateix missatge.

Maridatge de tipus de lletra: guardeu-lo en família

La solució més senzilla sol ser la millor. De vegades, els millors aparells provenen d’utilitzar variacions (serif, pes alternatiu, llosa) dins de la mateixa família de fonts.

Hiperenllaços

La pràctica habitual i esperada és subratllar enllaça i elimina el subratllat en els esdeveniments del cursor. Quan aneu a aquesta ruta, assegureu-vos que el vostre text destacat està en cursiva o atrevida més que subratllat per evitar confusions.

En aquests dies, en canvi, el text ancorat es acoloreix generalment, amb un efecte transitori aplicat en el cas del pas. Des de la perspectiva del disseny, aquesta és innegablement la millor opció, però recordeu mantenir-la coherent!

Alguns CSS que cal conèixer

Això afecta la distància entre lletres. Útil per destacar els títols.

espai entre lletres: x.xxem;

Això afecta la distància entre les paraules:

espaciatge de paraules: x.xxem;

Això proporciona una alternativa a tots els límits per posar èmfasi. Útil també per a abreviatures.

font-variant: small-caps;

Això CAPITALITZARÀ TOT EL TEU TEXT.

text-transform: majúscules;

Això capitalitzarà la primera carta de text.

transformar text: capitalitzar;

D’aquesta manera es posarà una novetat sobre el text.

decoració de text: línia a través;

Això millora la visualització de tipus de lletra als navegadors moderns:

representació de text: optimitzaLegibilitat

Comprensió dels tipus de fitxers de tipus de lletra

És una bona idea incorporar diversos tipus de fitxers per assegurar-se que els tipus de lletra es carreguen correctament en una àmplia gamma de navegadors. Aquests són els que us hauria de preocupar més:

TrueType

TTF és el format més comú per a Mac i Windows i és compatible amb tots els navegadors principals.

OpenType

OTF també és àmpliament compatible, i permet complements com petits capítols i caràcters alterns sense la necessitat d’incrustar un tipus de lletra separat.

Tipus d’obertura incrustats

EOT només és compatible amb Internet Explorer i, tret que estiguis preocupat pels usuaris de versions antigues d’IE, probablement el millor sigui deixar-ho fora.

Format de font obert al web

WOFF —i el seu successor, WOFF2— són els nous reis de la ciutat. El seu suport als navegadors principals i la seva capacitat de comprimir els converteixen en el tipus de fitxer modern escollit.

Cal convertir un tipus de fitxer?

Probablement haureu d’arribar a la situació en què només teniu un tipus de fitxer de lletra i, d’alguna manera, l’haureu de convertir a un altre. FontSquirrel i Font2Web oferiu eines en línia que podran fer això.

Conclusió

Ja ho sabíeu contingut és l’aspecte més important del vostre lloc web. El contingut ben elaborat mereix una tipografia ben elaborada; No decebeu els visitants del lloc amb un text difícil de llegir o confús en l’estructura. Amb una jerarquia visual planificada amb cura i que s’adhereix a les bones pràctiques tipogràfiques, també es poden presentar els vostres pensaments creatius. Feliç mecanografia!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me