Uso principalmente Ubuntu come sistema operativo principale da circa 8 mesi. Uno dei problemi più comuni in cui spesso mi imbatto mentre navigo riguarda la degradabilità dei font scelti nelle pagine web, e come questi spezzino e tronchino il layout.
Capisco che sia sempre una noia progettare qualcosa che funzioni perfettamente anche per un’infima minoranza come noi utenti linux, specialmente se si parla di web typography. I cosidetti web-safe fonts non sempre sono universali, e troppo spesso si lascia degradare a memoria l’attributo font nella regola del body.
Faccio un paio di esempi:
In entrambi la parte in alto è quella che visualizzo di solito, quella sotto invece è quella corretta che ottengo con uno o due (Ctrl)+(-). Ho preso due esempi a caso, ve ne assicuro che posso riempire un libro di screenshot del genere (Laura, non volermene!).
Non sempre il problema riguarda il font in se, molto spesso la colpa è anche dei browsers/SO e delle loro interpretazioni poco coerenti.
La regola d’oro è che se il layout è progettato tenendo conto del text-resize, allora sei a prova di bomba.
Quando però ci troviamo a scrivere la proprietà font-family, e dobbiamo pensare alla sua degradabilità, teniamo sempre in considerazione la lunghezza dei caratteri. Se il layout sballa la causa sta sempre nella lunghezza:
Da questa immagine (che ho preso da qui), si vede chiaramente come Arial sia visibilmente più corto di Verdana.
Che il nostro layout sia fisso o che si dimensioni a seconda del testo contenuto, degradiamo scegliendo font della stessa lunghezza (basta fare due prove).
E nei casi estremi, se siete vincolati da dimensioni poco permissive (per dei bottoni, ad esempio), allora per favore, tenete in considerazione una regola di overflow.
4 commenti
Questo a volte è anche uno dei motivi per cui non uso immagini come background di testi, magari con un piccolo resize o magari su differenti browser il risultato è orribile.
Secondo me, sarebbe anche giusto inserire la possibilità di ingrandire/ridurre il font-size semplicemente cliccando su un pulsante, direttamente dalla pagina.
Figurati Laburno, perchè dovrei arrabbiarmi? Il template non l’ho fatto io per fortuna…solo vorrei capire.
cosa intendi per “degradare a memoria l’atributo del font”?
Ho capito che font diversi hanno larghezze diverse, e ho visto cosa succede sul mio layout, ma come ovviare e qual è il comportamento giusto? questo non ho capito… :P
grazie
@Davide: Avevo messo tra i preferiti un tutorial molto carino su come creare dei bottoni grafici ridimensionabili. Lo devo ritrovare.
Per quanto riguarda la possibilità di ingrandire/ridurre direttamente dentro la pagina non so, mi sembra uno spreco visto che lo fa già il browser. Altro discorso se si vuole decidere, ad esempio, la dimensione del layout.
@Laura: quando si dichiara il font nel body:
body { font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; }Si specificano diverse famiglie di font, cosìchè se ne mancasse una nel computer del visitatore, si può utilizzare quella successiva. Con questo intendo degradabilità.
A memoria, perché succede che spesso, dopo aver scelto il font principale, si scelga i successivi in modo sbrigativo, scegliendoli ad occhi chiusi tra i web-safe.
I problemi di visualizzazione possono dipendere da questo, ma anche, specialmente per i linari, da un rendering poco coerente del font nel browser (chi ha usato le vecchie versioni di Epiphany, come me, ne sa qualche cosa). In questo caso ci si può fare ben poco, però avere a che fare con una degradabilità corretta del font-family aiuta sempre.
ah ho capito ora cosa intendi.
quindi non essendoci il Trebuchet su Linux prende quello successivo, solo che non funzica come dovrebbe.
mmmm sarà il caso di usare quel link sul confronto dei font, se lo trovo lo aggiungo, potrebbe essere utile anche in questa occasione.
grazie della segnalazione, ne terrò conto, è una cosa che non avevo valutato, anche perchè di solituo uso font websafe fin dal primo font segnalato sigh.