Aprenent sobre liderar en disseny web

El disseny web sempre ha pres els principis i definicions del món del disseny gràfic i d'impressió. Això és especialment cert quan es tracta de la tipografia web i la forma en què obtenim formularis de lletres a les nostres pàgines web. Aquests paral·lels no sempre són d'1 a 1 traduccions, però segurament podeu veure on una disciplina ha influït l'altra. Això és especialment evident quan es considera la relació entre el terme de tipografia tradicional "líder" i la propietat CSS coneguda com a "alçada de línia".

L'objectiu del lideratge

Quan la gent solia utilitzar manualment lletres de metall o de fusta per crear la tipografia d'una pàgina impresa, es col·locaven peces de plom primes entre línies horitzontals de text per crear espaiat entre aquestes línies. Si volíeu un espai més gran, introduïu peces de plom més grans. Així es va encunyar el terme "líder". Si heu cercat el terme "líder" en un llibre sobre el disseny tipogràfic i els directors, llegirí alguna cosa a l'efecte de: "la distància entre les línies de base de les línies successives del tipus".

Liderant en Disseny Web

En el disseny digital, el terme principal encara s'utilitza per referir-se a l'espaiat entre línies de text. Molts programes utilitzen aquest terme exacte, tot i que, òbviament, no es fa servir el lideratge real en aquests programes. És un gran exemple de noves formes de disseny que prenen idees de les tradicionals, tot i que la implantació exacta d'aquest principi ha canviat.

Quan es tracta de disseny web, no hi ha cap propietat CSS per "liderar". En canvi, la propietat CSS que manegi aquesta visualització visual de text s'anomena alçada de línia. Si voleu que el vostre text tingui espai addicional entre línies horitzontals de text, usareu aquesta propietat. Per exemple, diuen que voleu augmentar l'alçada de la línia per a tots els paràgrafs dins de l'element

del vostre lloc , podeu fer-ho així:

p principal (alçada de la línia: 1,5; }

Això seria ara 1,5 vegades l'alçada normal de la línia, en funció de la mida de font predeterminada de la pàgina (que normalment és de 16 px).

Quan s'utilitza l'alçada de la línia

Tal com s'ha detallat anteriorment, l'alçada de la línia és apropiada per utilitzar per espaciar les línies de text en paràgrafs o en altres blocs de text. Si hi ha molt poc espai entre línies, el text pot convertir-se en confús i difícil de llegir per als espectadors del vostre lloc. De la mateixa manera, si les línies estan separades massa a la pàgina, el flux normal de lectura s'interromprà i els lectors tindran problemes amb el vostre text per aquest motiu. Per aquest motiu, voleu trobar la quantitat adequada d'espaiat entre línies i alçades que calgui fer servir. També podeu provar el vostre disseny amb els usuaris reals per obtenir els vostres comentaris sobre la llegibilitat de la pàgina .

Quan no s'utilitzi l'alçada de la línia

No confongui l'alçada de la línia amb el farciment o els marges que usareu per afegir espais en blanc al disseny de la pàgina, inclosos sota l'encapçalament o els paràgrafs. Aquest espaiat no és líder, i per tant no es tracta d'una alçada de línia.

Si voleu afegir espai en determinats elements de text, usaríeu marges o farcit. Tornant a l'anterior exemple de CSS que hem utilitzat, podríem afegir això:

p principal (alçada de la línia: 1,5; marge inferior: 24 px; }

Això encara tindria l'alçada de 1.5 línies entre línies de text per al paràgraf de la nostra pàgina (les que hi ha a l'interior de l'element

). Aquests mateixos paràgrafs també tindrien 24 píxels d'espai en blanc a sota de cadascun d'ells, permetent que les pauses visuals permetin als lectors identificar fàcilment un paràgraf d'un altre i fer que la lectura del lloc sigui més fàcil de fer. També podeu utilitzar la propietat d'emplenament en lloc dels marges aquí:

p principal (alçada de la línia: 1,5; padding-bottom: 24px; }

En gairebé tots els casos, això es mostraria com el CSS anterior.

Digueu que voleu afegir espais per sota dels ítems de llista que estaven dins d'una llista amb una classe de "menú de serveis", usaria marges o farcit per fer-ho, NO alçada de línia. Així que això seria adequat.

.services-menu li { Només usaríeu l'alçada de la línia aquí si voleu establir l'espaiat del text dins dels ítems de la llista, assumint que tenien execucions de text llargues que podrien executar-se a diverses línies per a cada punt de bala.