Prispôsobenie veľkosti písma rozlíšeniu obrazovky
Aktuálne najzložitejší oriešok je nastavenie veľkosti písma (najmä súvislého textu) na webe tak, aby si ho v pohode prečítali tak majitelia obrovských monitorov s veľmi jemným rozlíšením ale aj ľudia, ktorí majú menšie obrazovky s jemným rozlíšením. Nehovoriac o ľuďoch so staršími veľkými monitormi a hrubým rozlíšením či aj „CRTčkari“. No vyber si, ako na to…
Môžete na to ísť ľahkou cestou:
Prvá je najľahšia, všetci majú taký monitor ako mám ja a musím sa dokonale prekvapene čudovať prečo to tí druhí vidia „inak“. Inak je synonymum pre slovo horšie až zle.
Druhá je prefíkaná, vyberiem si podľa seba, čo majú „všetci“, rozumej väčšina, čiže v reáli asi 20 percent ľudí. Podľa toho nastavím layout, veľkosti písma atď.
Tretia cesta je ešte viac prefíkaná, nebudem manipulovať s veľkosťou písma a spoľahnem sa na to, že prehliadač preberie veľkosti písma z toho, ako si to prednastavil používateľ (ideálne je ak to preberá prehliadač z nastavení jeho OS). Je to ťažké v tom, že si musím otestovať nasimulovaním rôzne prostredia a možnosti veľkostí písma.
Štvrtá cesta je moderne prešibaná, použijem dnes buzzwordový responzibilitu.
[css]
body {
font-size: 100%; /* start with a flexible baseline, more on this in the next section */
}
h1 {
font-size: 2.5em;
}
@media screen and (max-width: 50em) {
h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
h1 {
font-size:1.5em;
}
}
@media screen and (max-width: 30em) {
h1 {
font-size:1.2em;
}
}
[/css]
Môžete sa spoľahnúť na otrepané „linknem tam nejakú jskovú libku“ a použijete FlowType.JS ale ten rieši len rozlíšenie resp. viewport a zároveň sa stará skôr o pridružený problém – dĺžku riadku pre príjemné čítanie textu.
Posledný nápad už operuje iba z rozlišeovania cieľových platforiem. Na mobil hodím iné písmo, na tablet iné atď. pričom viem, ktoré ma aké rozlíšenie a fyzickú veľkosť. Samozrejme musím vedieť, že taký iPad mini má to isté rozlíšenie ako väčší iPad. Opäť nedoriešite všetko dokonale.
A vždy sa vám ozve nejaký človek s exotickými návykmi.
Kvalitný jednočlánkový komplexný zdroj pre riešenie veľkostí písma na webe je v tomto článku.
