Share
Ogni caratteristica immaginabile della tipografia può essere indicata con il suo nome. Sia che tu stia parlando del carattere tipografico stesso, sia della disposizione di tipo all'interno di un layout, c'è un enorme glossario di termini che può aiutarti a descrivere le cose correttamente. Diamo un'occhiata agli elementi di tipografia che sono importanti per te, come web designer.
Ci sono due aspetti essenziali della tipografia che riguardano direttamente i web designer:
È quindi molto importante che tu sia in grado di esprimere (ai clienti o ai membri del team) le tue opinioni e decisioni tipografiche. Non ci preoccuperemo delle minuzie dei terminali a sfera e dei triangoli, ma discuteremo l'anatomia della tipografia come è importante per i web designer.
Alcune proprietà tipografiche fondamentali possono essere manipolate con i CSS. Ad esempio, forse la cosa più importante, la famiglia di font.
Sentirai spesso discussioni sulla definizione di font contro carattere tipografico, quindi è importante che tu sappia la differenza. Un font è la raccolta impacchettata di forme di lettera; blocchi tradizionalmente fisici utilizzati nella stampa, al giorno d'oggi anche i file digitali. È il meccanismo di consegna.
Un carattere tipografico è ciò che crea il designer; il design. Mi è sempre piaciuto il confronto con la musica; comprate un CD (va bene, ci torneremo un paio d'anni qui) come meccanismo di consegna per ascoltare la musica. In realtà non stai ascoltando il CD. È una situazione simile alla selezione dei caratteri per utilizzare i caratteri tipografici forniti.
Attraverso i CSS possiamo determinare le nostre famiglie di caratteri preferiti, in ordine di classificazione. Questo è ciò che chiamiamo il pila di caratteri.
Possiamo anche manipolare font-weight attraverso i fogli di stile. Il peso è il modo in cui descriviamo lo spessore relativo del tratto di un personaggio.
Molti tipi di carattere sono prodotti con una varietà di pesi, più semplicemente descritti come luce, regolare, libro, extra-bold, con una gamma di varianti oltre. Più specificamente, possiamo determinare il peso di un carattere tipografico usando la scala TrueType, che va da 100 a 900 (400 è quello che comunemente chiamiamo regolare).
I caratteri dovrebbero idealmente essere prodotti con varianti di peso reali, numerici o nominati, per poter essere controllati tramite CSS: font-weight: 300;, font-weight: bold;. Quando una variante di font non è disponibile, i browser spesso eseguono il rendering del peso da soli, ma i risultati possono essere non ottimali.
Lettere maiuscole e minuscolo fare riferimento alle lettere maiuscole e minuscole. Il termine Astuccio proviene dai cassetti utilizzati nella stampa tipografica (il maiuscolo con le lettere maiuscole, il maiuscolo in basso ... ottieni l'immagine).
Possiamo sovrascrivere il caso (dovremmo farlo) tramite CSS text-transform: maiuscolo; per esempio.
Mentre siamo sull'argomento del character case, quando si usa la maiuscola a volte (specialmente in dimensioni minori) è consigliabile aumentare la spaziatura tra i caratteri per migliorare la leggibilità. In termini di CSS ci riferiamo a questo come spaziatura del carattere e può essere espresso come un valore positivo o negativo, di solito misurato in centesimi di an em.
In termini tradizionali, ci riferiamo alla spaziatura delle lettere come puntamento. Il tracciamento influisce sulla densità del carattere in eccesso all'interno di una determinata linea o blocco di testo. Il termine ha origine (come in molti termini tipografici) nell'epoca passata della composizione tipografica, in particolare fotocomposizione, in cui i personaggi sono stati proiettati su pellicola attraverso una lente. Lo spazio attorno a ciascun personaggio sarebbe alterato spostando un prisma lungo una traccia, quindi puntamento.
La proprietà CSS word-spacing può anche aiutarti qui. Prevedibilmente, modificando il valore di spaziatura delle parole, lo spazio tra le parole crescerà e si restringerà, avendo anche un impatto significativo sulla leggibilità.
Gioca con i valori di lettera e spaziatura delle parole applicati al seguente blocco di testo e scopri tu stesso come viene influenzata la leggibilità.
Spesso confuso con il monitoraggio è crenatura. Il crenatura si riferisce alla regolazione della spaziatura tra forme di lettera specifiche (non un intero gruppo di caratteri), ancora una volta, per migliorare la leggibilità.
UN proporzionale carattere (al contrario di a spaziatura fissa carattere, la cui spaziatura dei caratteri è uniforme) renderà le tolleranze per specifiche coppie di caratteri che hanno bisogno di ulteriore aiuto per sedersi visivamente l'uno accanto all'altro.
Ad esempio, maiuscolo V e UN, quando messi insieme di solito hanno bisogno della loro crenatura ridotta per combattere lo spazio visivo extra tra di loro.
Ancora una volta, abbiamo la composizione della vecchia scuola per ringraziare per il termine, quando il tipo è stato lanciato come blocchi di metallo. Kern si riferisce alla tacca fatta in un blocco di caratteri, che gli permetterebbe di incastrarsi in un blocco corrispondente. Il posizionamento di queste tacche maschio / femmina impedirebbe che i personaggi non corrispondenti fossero posizionati l'uno accanto all'altro.
Detto questo, il kerning è un processo associato alla composizione tipografica per la stampa e non è facilmente accettato dalla tipografia del web. Esistono strumenti JavaScript, come kerning.js, che possono aiutare i designer a manipolare il loro tipo in base al carattere, ma i CSS non sono ancora stati raggiunti.
In termini di CSS, c'è una proposta per la proprietà font-crenatura nei lavori, ma anche questo è limitato in quello che può fare per un designer tipografico.
Impostazione della proprietà (non standard) rendering del testo: ottimizzazione della flessibilità; migliorerà le cose in alcuni browser moderni, migliorando la crenatura su coppie di personaggi riconosciuti. Come con font-crenatura, questo non offre tanto controllo quanto aiuto. Farà anche scattare l'uso di legature se disponibile in un font, che mi porta bene a ...
Le legature prendono il kerning al livello successivo, offrendo glifi sostitutivi per determinate coppie di caratteri. In alcuni casi, i personaggi non si adattano molto bene, indipendentemente da come siano disposti delicatamente, nel qual caso è possibile progettare una legatura. Un classico esempio è il minuscolo f e io.
Eccoti uno con cui avrai familiarità; riconoscilo?
La e commerciale è in realtà una legatura in origine, che ci siamo abituati a usare al posto di et (che significa "e" in latino / francese).
In altri casi, le legature possono essere necessarie per alcune rarità linguistiche (il tedesco ß è forse il più familiare di queste) e talvolta anche puramente per la decorazione. Quest'ultimo ci riferiamo a come Legature discrezionali, come dove a c e a t unirsi insieme.
Dove hai un maggiore controllo sul contenuto di una pagina web, potresti utilizzare Unicode o entità HTML per visualizzare legature. Per esempio fi ti risolveremo con la "fi" di cui abbiamo parlato. Se preferisci che JavaScript ti aiuti, ligature.js potrebbe fare il trucco, anche se non è a prova di bomba.
Quando usi CSS per aiutarti, potresti appoggiarti a rendering del testo: ottimizzazione della flessibilità di cui abbiamo parlato, oppure potresti usare la proposta font-variant-legature che ha un numero di valori come comuni-legature, assicurandosi che le legature siano visualizzate ovunque sia possibile. Al momento il supporto per il browser è incompleto, ma vale sicuramente la pena tenerlo d'occhio.
Come discuteremo tra un minuto, le proporzioni di un carattere tipografico possono influenzare la quantità di spazio verticale tra ogni linea. È quindi consigliabile prendere in considerazione il altezza della linea specifico per il carattere utilizzato e regolare di conseguenza. Lo spazio verticale troppo piccolo provoca la crampatura di un corpo di testo e rende difficile per l'occhio risalire all'inizio della riga successiva.
Troppo spazio e lettura diventano ugualmente imbarazzanti.
L'uso di misure relative è sempre consigliabile nel web design, specialmente per quanto riguarda la tipografia. L'altezza della linea deve sempre essere una funzione della dimensione del carattere! utilizzando ems definire l'altezza della linea significa che è sempre relativo alla dimensione del carattere. Dai un'occhiata a questo esempio e scopri come la leggibilità è influenzata dai cambiamenti dei valori:
In termini tradizionali ci riferiamo alla spaziatura tra le linee (da non confondere con l'altezza della linea stessa) come principale, cosiddetto a causa delle strisce fisiche di piombo metallico che sono state utilizzate nelle macchine da stampa per aumentare e diminuire la spaziatura verticale.
Al giorno d'oggi, quando viene calcolata l'altezza della linea, semi-interlinea viene aggiunto sia in alto che in basso nei caratteri. Ad esempio, una dimensione del font di 36px, con un'altezza di riga di 54px (1.5em) risulterebbe in 9px di spazio aggiunto al di sotto dei caratteri e 9px sopra. In effetti, questo centra verticalmente il testo all'interno della sua linea.
Andando avanti con la nostra anatomia tipografica controllata dai CSS, veniamo a giustificazione; l'allineamento del testo. Nel nostro diagramma il testo è allineato a sinistra, ma potrebbe essere ugualmente allineato a destra, centrato o (quando si tratta di blocchi di testo superiori a una riga) giustificato. Lo styling tramite CSS viene eseguito con la proprietà text-align, ad esempio text-align: center;.
Il testo pienamente giustificato rimuove ciò che è noto come bordo frastagliato...
... ma può causare un cattivo retrogusto sotto forma di fiumi o canali apparendo nel corpo del tuo testo.
Nel mondo dei layout fluidi, dove la larghezza di un corpo di testo può essere difficile da individuare, il testo giustificato dovrebbe essere usato con cautela.
Selezionare i caratteri tipografici può essere difficile. Se stai guardando in particolare i titoli, il corpo del testo, le virgolette, ecc., Ci sono molti fattori in gioco. Diamo un'occhiata ad alcuni aspetti fondamentali dell'anatomia tipografica che meritano attenzione.
Per prima cosa, abbiamo a che fare con a serif carattere tipografico o a sans-serif? Serif sono quei tratti aggiuntivi che terminano un colpo principale. Caratteri come Arial non hanno questi tratti, lo sono sans-Serif (un'altra lezione di francese per te lì ...)
Si dice che i Serif aiutino il flusso delle lettere, legando insieme le parole coesive, aiutando l'occhio attraverso il testo e facilitando la lettura. A volte, tuttavia, possono complicare un carattere tipografico, causando affaticamento del lettore e quindi impedendo la leggibilità. L'argomento è stato di attualità per decenni e nessuna prova concreta è mai stata presentata con successo perché nessuno dei due è più leggibile.
In ogni caso, i font a volte sono disponibili in versioni serif e sans-serif (come il PT di ParaType, quindi hai il lusso di scegliere quale preferisci.
Avendo menzionato leggibilità, è solo giusto che lo distinguo rapidamente leggibilità. Usiamo la leggibilità quando parliamo dei dettagli più fini della tipografia; la capacità di riconoscere singole lettere e parole. La leggibilità assume un ruolo più funzionale, relativo alla praticità di un lettore che è in grado di assorbire un corpo di testo.
La leggibilità è ovviamente molto importante. Per questo motivo, è consigliabile prendere x-altezza in considerazione. L'altezza x del tipo descrive l'altezza (dai un'occhiata alla x di una faccia particolare), dal linea di base all'inizio dei caratteri minuscoli. I caratteri tipografici con un'altezza x relativamente grande tendono ad essere più leggibili, specialmente in dimensioni più piccole.
L'altezza x più grande viene a scapito di discensori e ascendenti, che diventano logicamente più brevi in relazione. Questo può portare a visivamente meno spazio tra le righe, di cui abbiamo parlato un momento fa.
Non sono sicuro di come sono arrivato fino a qui senza definire in modo specifico una forma di lettera ictus. Se c'è un termine che è utile per descrivere la personalità di un carattere tipografico, è quello. Il tratto di ogni forma di lettera data può essere orizzontale, verticale, diagonale, persino curva e, a seconda del tratto in questione, potrebbe avere anche un nome più specifico.
Il colpo principale (di solito verticale e pesante) all'interno di una forma di lettera è indicato come il stelo, lasciando il termine ictus per poi intendere uno di secondaria importanza. Il tratto orizzontale sopra una T maiuscola è chiamato an braccio, quello che troverai colmare il vuoto in una lettera maiuscola A o H è a bar, la lista continua ...
I tratti all'interno di una lettera, in particolare in caratteri serif, possono variare anche nello stile e nel peso; un attaccatura dei capelli essendo il più sottile presente.
Quindi alcuni tratti, in particolare le curve, avranno un peso variabile lungo la loro lunghezza. Questo è indicato come modulazione. Questa variazione bilancia il peso complessivo di un personaggio ed evita le aree particolarmente pesanti dove si uniscono due tratti.
Una modesta modulazione dell'ictus si tradurrà in una forma di lettera maldestra e pesante rispetto ad altre nell'insieme. David Kadavy si riferisce a questo equilibrio come l'uniformità della trama ed è spesso una misura della qualità in un carattere tipografico ben eseguito. Dai un'occhiata a un corpo di testo, quindi sfoca i tuoi occhi per avere un'idea della trama generale.
Ci sono migliaia dei termini del glossario e degli aggettivi per ottenere una descrizione di se si desidera descrivere correttamente argomenti tipografici. Abbiamo coperto alcune delle nozioni di base qui e spero che almeno alcune di esse siano nuove aggiunte al tuo vocabolario! Prova a lanciarne uno in modo casuale la prossima volta che vieni presentato a qualcuno di nuovo - lo saranno molto impressionato ...
Accentsconagua