logo
06.12.2013 08:45
1
Čau Joomláci, pár dotazů na typospecialisty:

1) Jakou velikost fontu dnes používáte pro weby? 12, 14, 15 nebo více? Mám na mysli klasický text (třeba popis produktu) v článku na běžném informačním či produktovém webu.

2) Má smysl se velikostí fontu hlouběji zabývat, když v současnosti staví hlavně responzivní weby a mobilní zařízení umí písmo zvětšit podle libosti?

3) Který ze standardních fontů (Arial, Times, Verdana,... se vám nejlépe čte - na desktopu i mobilu?

4) Na závěr - co říkáte na trend šedý font na o něco světleji šedém pozadí - máte nějakou fintu na posouzení minimálního čitelného kontrastu?

Za vaše typoodpovědi předem díky!

MaK.
06.12.2013 08:52
2
Nejdůležitější je čitelnost textu, takže já většinou určuji velikost a barvu dle zvolených fontů a kladu důraz na dobrou čitelnost. Prostě aby se v tom lidi neztráceli když to budou číst. V základu většinou používám 13px a 14px s vhodně zvoleným line-height a barvu cca #515151 na bílém pozadí. Ale neříkám že to je správně a jinak to být nemůže. Každý dle svého uvážení :)
06.12.2013 09:05
3
maxoft

ad 1) Vhodné je nedefinovat písmo v pixelech, ale v relativních jednotkách.
ad 2) Ano má to smysl - vždy musíš nastavit nějaké výchozí hodnoty.
ad 3) Pro čtení na obrazovce jsou lepší bezpatkové fonty, ale obecně se poradit nedá. Vždy záleží na konkrétním webu a jeho grafické či typografické úpravě.
ad 4) Existuje vhodný nástroj, zohledňující principy přístupnosti definované ve WCAG 2.0, viz http://poslepu.blogspot.cz/2009/01/t...stu-barev.html.
06.12.2013 09:09
4
Díky za podněty. Plaváčku, rozvineš prosím trochu více bod 1)? V relativních jednotkách k čemu, co je základem, od čeho se odpíchnout?

MaK.
06.12.2013 09:23
5
Open Sans, 14+
06.12.2013 09:31
6
maxoft

Plaváčku, rozvineš prosím trochu více bod 1)? V relativních jednotkách k čemu, co je základem, ode čeho se odpíchnout?

Přijde na to. Tady máš shrnuto pohromadě pár možností, abych se neopakoval: http://www.jakpsatweb.cz/css/font-size.html. Mně se dlouhodobě osvědčilo používat klíčová slova (viz odkázaná tabulka). Jinak řečeno - jako výchozí hodnotu pro BODY nastavím font-size: small, z čehož dnes drtivá většina prohlížečů vyrobí písmo o základní velikosti cca 13px (kromě IE v quirk mode, ale to už se moc nepoužívá, případně se to ohne podmíněným komentářem). Různé velikosti v rámci dokumentu pak ladím pomocí procentních hodnot.

Možností je samozřejmě povícero a nějaká obecně platná poučka neexistuje. Kromě té, že není vhodné omezovat uživatele, kteří si v Internet Exploreru písmo definované v pixelech nemohou zvětšit.
06.12.2013 09:31
7
CSS px je jednotka relativní k zobrazovacímu zařízení.
em/% je jednotka relativní k rodičovskému prvku.
rem je jednotka relativní k nejvyššímu nadřazenému prvku. Není podporovaná v IE8

Ten přehled na JakPsatWeb není správný.
px v CSS není obrazovkový bod, ale relativní obrazovkový bod, viz odkaz výše.
Velikosti udané v px už jsou dnes v IE zoomovatelné.
em a procenta se nevztahují k "normální velikosti", ale k velikosti rodičovského prvku.
06.12.2013 09:32
8
Martin Schlemmer

CSS px je jednotka relativní k zobrazovacímu zařízení.

Ano, ale v IE si ji nezvětšíš, což mě dost často štve, protože jsem zvyklý to dělat (nemyslím ZOOM, ale zvětšit text, aby se lépe četl).
06.12.2013 09:39
9
Jak to funguje, pokud je px definováno na <body> a pak jsou použité jen relativní jednotky? Také to IE nezvětší?
06.12.2013 09:43
10
Martin Schlemmer

Ne, nezvětší. Zkus: http://klient.plavacek.net/font-size.html
06.12.2013 11:37
11
Calibri (základní text) 11
06.12.2013 12:03
12
Já používám Arial, teda nevim jestli je to uplně ok
06.12.2013 12:14
13
Source Sans Pro. Bohužel se na win a některých linux. distribucích vykreslují špatně tenké řezy, ale dobrou čitelnost zajistí CSS Browser Selector
06.12.2013 12:21
14
holinaj

Airal patří do rodiny tzv. "bezpečných webových fontů (safe web fonts)", takže máš slušnou jistotu, že se zobrazí správně prakticky všude.
06.12.2013 12:33
15
Já používám skoro vždy něco z Google web fonts. Připadá mi to jako jistota.
06.12.2013 15:06
16
google fonts taky používám a pravidleně mi blbne diakritika :-(
06.12.2013 15:14
17
Původně odeslal Re4DeR
google fonts taky používám a pravidleně mi blbne diakritika :-(
Takt o děláš špatně, když si vybereš fonty co podporují češtinu a správně se vygeneruješ cestu k css, tak není problém.
06.12.2013 17:59
18
melo by to byt spravne :(. musim na to kouknou poradne
06.12.2013 18:15
19
V pohode sa mi číta takmer akýkoľvek font. Najradšej mám Open Sans.

Čo sa týka kontrastu. Pozerám na to viac krát a dlho. Človek ide od monitora s vedomím, že je všetko v poriadku a neskôr sa vrátim a zistím, že je to nap*.
Finty nemám. Proste upravujem dokiaľ nieje všetko ok...
06.12.2013 21:44
20
Krom různých online nástrojů na hlídání kontrastu je i fajn občas zkusit text postupně rozostřovat, dokud je ještě čitelný (samozřejmě je dobré mít k tomu i nějaké referenční hodnoty).

Ještě zajímavost na téma čitelnosti, i když už trochu OT – na tomto obrázku by se vám text vpravo měl číst zhruba o 10–20 % rychleji, než text vlevo.
29.12.2013 07:41
21
1) viz příspěvek Martina Schlemmera. Ještě to jde ve velikostech (small, medium, large, …) a procentech, kde hodnota 100% je pravděpodobně to, co na konkrétním zařízení bude v rozumné velikosti.
2) na web se dnes můžeš dívat přes mobilní zařízení s rozlišením 320x240 stejně jako 2560x1440 bodů - to je propastný rozdíl (nemluvě o UHD/4K rozlišení a připravovaném 8K); přefrázoval bych tvou otázku tak, že má rozhodně cenu udělat responzivní design, abys webem při malém rozlišením nemusel "plout" a ve velkém neměl "nudli uprostřed"; radši bych na webu oželel nějaké to hejblátko ve prospěch pohodlného čtení v malém i velkém rozlišení
3) s žádným z těch jmenovaných fontů nemám problémy. Obecně se říká, že patkové písmo se hodí víc pro vytištěné písmo a bezpatkové víc na monitor. Patkové písmo lépe vede řádku, ale většinou vypadá hůře nevyhlazené a v menších velikostech, nicméně dokážu si ho představit u on-line vydání novin a podobných a možná za pár let, s příchodem ultra vysokých rozlišení situace změní. Obecně neprohloupíš s Arialem - jak bylo řečeno, patří mezi bezpečné fonty, je v podstatě na každém počítači a má dobrou podporu glyfů (font-family v CSS tedy může končit na "Arial, sans-serif"). Trendy jsou aktuálně také Open Sans, Roboto, Ubuntu a další, ale osobně bych byl při výběru konzervativní a nešel do žádných extravagancí. Doporučil bych podívat se také, jaké skupiny znaků daný font podporuje (řecká abeceda, azbuka, matematické symboly, …) – může to jednou přijít vhod.
4) šedý font na světle šedém pozadí zohledňuje design nad čitelností, což (určitě u hlavního textu) je chyba; obecně jde o to mít velký kontrast mezi textem a pozadím. Taky pozor na to, že šedá působí (intuitivně, z grafických rozhraní) dojmem něčeho neaktivního nebo neaktuálního – šedý odstavec v černém textu může zůstat čtenáři ignorován. A k posouzení kontrastu - někde jsem slyšel, že by písmo mělo být čitelné i po převedení na 16 stupňů šedi, ale to už je asi jednodušší použít ten výše zmíněný SW.