it-swarm-eu.dev

Existuje optimální velikost písma?

Pro většinu webových projektů, se kterými jsem se zabýval, je velikost písma pro hromadný text obvykle 12px - 13px, ale zajímalo by mě, jestli je to dobrá velikost. Pamatuji si, jak jsem si přečetl článek, který říká, že velikosti písem na webových stránkách by měly být mnohem větší, přibližně 17 pixelů, aby hromadný text odpovídal velikosti tištěných písem.

Existuje optimální velikost písma. Kdy je něco příliš velkého/malého pro průměrného uživatele?

Existuje nějaký pro/proti pro malé/střední/velké velikosti písma?

Aktualizace:
Chtěl bych získat vaše zkušenosti se skutečnými testy reakcí uživatelů atd. Je to snadné, toto a to je příliš velké nebo malé, ale zjistil jsem, že uživatelé někdy překvapí a reagují jinak než znalecké posudky .

Dobrá diskuse je také schopnost změnit velikost písma, ale není to to, co je zde požadováno. Mám zájem o více informací o tom, jak uživatelé reagují na různé velikosti písma, nikoli o tom, jak by měli být schopni to změnit.

56
googletorp

Toto je široce diskutovaná téma. Jeden z nejlepších způsobů, jak jsem to vysvětlil, je z prezentace Design pro vývojáře: aby vaše frontendy saly méně od Idan Gazit.

To mělo následující snímek: alt text Toto je 16px text na normální obrazovce a 12pt text v knize. Zpráva je, že 12pt je vynikající pro knihu, ale obvykle se také drží mnohem blíže čtenáři než obrazovce. S ohledem na vzdálenost se zdá, že 16px na obrazovce a 12pt v knize mají stejnou velikost. 12pt na papíře = 16px na obrazovce

Existují nejrůznější výjimky, kde je upřednostňován menší text. Ale pro optimální čitelnost delšího textu souhlasím s 16px.

Doporučuje se měnit škálovatelné jednotky jako em nebo % než jednotky s pevnou velikostí jako pt nebo px. Číst dále: Velikost písma CSS: em vs. px vs. pt vs. procento

34
user745

Neexistuje nic jako optimální velikost písma. Hledání jednoho znamená, že zapomínáte na něco důležitého: čitelnost textu není pouze produkt velikosti.

Za posledních pět let jsem vytvořil asi tucet webových stránek jako návrhář uživatelského rozhraní a všichni měli jiné publikum. Jednou z věcí, které jsem našel, bylo, že velikost není největším faktorem. Je to kombinace různých aspektů souvisejících s zobrazováním textu:

  • kontrast
  • rodina písem
  • výška řádku
  • pozice na stránce

Kombinace těchto vede k hrubé metrice pro celková čitelnost a zjistil jsem, že to je nejdůležitější návrhový cíl pro text.

Jako anekdota z testování (od té doby, co jste se zeptali): Pracoval jsem na komunitním webu s 700 000 měsíčními návštěvami, kde hlavním publikem byli nedůvěryhodní uživatelé. Použili jsme 12px Verdana pro typ těla a 14px-16px Arial pro tituly. Občas bychom pro méně důležitý text klesli na 11px Verdanu v šedé barvě. Při provádění testů použitelnosti na webu jsme obdrželi zpětnou vazbu nikoli o velikosti textu, ale o tom, jak okolní barvy designu způsobily, že jste se dívali do lampy. Interpretovali jsme to jako příliš světlý web a upravili kontrast celého designu tak, aby byl méně jasný. Částečně kvůli těmto změnám a částečně kvůli změnám v navigační struktuře jsme zaznamenali výrazný meziměsíční nárůst zobrazení stránek na návštěvníka.

Jedna věc, kterou si musíte pamatovat o malých velikostech fontů, je to, že mají účel: když potřebujete něco menšího než něco jiného (duh!). Ale jako návrhář uživatelského rozhraní je důležité si pamatovat, že vaší úlohou je vytvářet v rozhraní jasnost a použitelnost (mimo jiné) tím, že de-zdůraznění některé prvky uživatelského rozhraní, které můžete zlepšit jeho použitelnost. Je na vás, abyste se rozhodli, které prvky by měly být zmenšeny a které aspekty textu by měly být upraveny (z mého seznamu výše).

20
Rahul

Zdá se, že 12px funguje dobře pro většinu lidí. Mít něco na 17px ztěžuje čtení, a také to má méně než 10px. Myslím, že 12-13 pixelů je dobrým vodítkem.

Ale opravdu, měli byste nastavit velikost textu na něco jako 1em. Důvodem je, že některé prohlížeče neumožňují uživatelům měnit velikost textu, pokud je nastaven v pixelech. Bez ohledu na to, jakou velikost textu máte, lidé s ostrýma očima jej zmenší, aby si mohli přečíst více, a lidé se špatným zrakem text zvětší.

Stačí nastavit věci na 1em a nechat lidi a jejich prohlížeče, aby si poradili se zbytkem.

Je však dobré stránku otestovat s různými velikostmi písma, abyste zjistili, zda rozložení zůstává spravovatelné.

9
Vincent McNabb

Podle posledních vědeckých důkazů:

  • 18 a 22 bodů povede k významně zlepšené čitelnosti objektivu (měřeno pomocí sledovače očí)
  • 10 a 12 bodů povede k významně narušenému porozumění (měřeno otázkami porozumění)
  • čím větší, tím lepší, protože objektivita čitelnosti se neustále zlepšuje se zvětšující se velikostí písma.

Neberte si za to moje slovo. Přečtěte si podrobnosti v vědecká práce .

7
Martin

Optimální velikost písma je individuální a je nastavena OS/prohlížečem uživatelů. Takže neměňte to.

Pokud potřebujete zvětšit písmo (např. Nadpisy), udělejte to relativně (např. 200% nebo 2em).

Nikdy nezmenšujte velikost písma a vždy udržujte dobrý kontrast, aby byla zachována čitelnost.

5
George Pavelka

Ne.
... ne v px, stejně.

Správné jednotky pro vyjádření optimální velikosti, pokud existuje, by byly úhel na sítnici.

Pokud se díváte na px, díváte se pouze na jeden ze tří faktorů nezbytných k určení čitelnosti1:

Rozteč teček nebo správná definice „rozlišení“ (pixelů/vzdálenost) je způsob, jak převést z px na skutečnou vzdálenost.

Vzdálenost při čtení, kterou samozřejmě potřebujete, protože znaky stejné dimenze nejsou všude stejně čitelné.

... a samozřejmě čitelnost jde s:

  • vyšší px
  • vyšší rozteč teček (nebo nižší rozlišení)
  • nižší čtecí vzdálenost

1Je zde také barva textu, barva pozadí, písmo atd. (Tučný text, který je černý na bílém, potřebuje menší velikost než text kurzívou, který je žlutý na oranžové), ale co potřebujete rozhodnutí založené pouze na dimenzi.

3
A.M.

Neměli byste se pokoušet nastavit velikost písma. Pomocí + N můžete označit „zvětšit tuto hodnotu než základní“ (nebo -N snížit). Jakákoli velikost, kterou zadáte, bude za určitých okolností špatná; jedinou proveditelnou možností, která nevyžaduje, aby uživatelé na vašem webu podnikli nápravné kroky, je rozhodnutí prohlížeče.

2
Monica Cellio

Měli byste nikdy používat pixely pro velikost písma. Pokoušíte se číst 14px písma na 12 "obrazovce, která podporuje rozlišení Full HD, vám poskytne text ve výšce 1 až 2 mm (a bolest hlavy za méně než hodinu).

2
JanC

12 pixelů je v pořádku, ale důležité je také to, že uživatelé mají možnost zvětšit velikost písma sami a že váš web není v takovém případě rozbit.

2
Ryan Shripat

V tomto vlákně jsou nějaké liché příspěvky a mylné představy. Zdá se, že mnoho lidí chce ignorovat vědu a dobře prozkoumané aspekty toho, jak čteme a chápeme text. Jak se to stane, právě zkoumám nové standardy v této oblasti, takže zde je trochu současného stavu techniky:

Science of Art

Stávající výzkum definoval, že optimální rychlost čtení pro normálně zrakově postižené osoby s fontem při maximálním kontrastu je x-výška mezi 0,2 ° a 2 ° zorného úhlu. X-height je skutečná vertikální velikost malých písmen x písma. Skutečná velikost písma se bude samozřejmě lišit v závislosti na vzdálenosti pohledu, ale naštěstí referenční pixel CSS - px - je založen na zorném úhlu. Vizuální úhel 0,2 ° je znám jako kritická velikost tisku, protože v tomto bodě je dosaženo maximální rychlosti čtení. (Nad 2 ° klesá zpět.)

Jeden px je 0,0213 stupňů nebo 1,278 minut oblouku. Toto je založeno na zařízení s hustotou pixelů 96 dpi ve vzdálenosti 28 palců. Výrobci zařízení tak mohou použít referenční px k nastavení velikosti na základě zamýšlené/očekávané vizuální vzdálenosti. To je diskutováno o standardech W3C CSS. Výrobci zařízení používají referenční px k nastavení skutečné velikosti rastru na základě zamýšlené vzdálenosti sledování. 16px nemusí být nutně 16 pixelů zařízení. Na iPhone s poměrem pixelů 2: 1 by to bylo například 32 pixelů zařízení.

Kritická velikost tisku pro web je tedy x-výška 9,4px. V závislosti na konkrétním designu písma se to vztahuje na písmo od 17 do 20 pixelů. Výsledkem byly standardy přístupnosti, které ukazují, že minimální velikost písma je 18 pixelů.

Ale počkejte, je toho víc

K dispozici je také kritická úroveň kontrast. Výše uvedené velikosti písma se vztahují k maximálnímu kontrastu. Ale co pro nižší kontrasty? Mnoho designérů vážně ovlivňuje čitelnost svých stránek pomocí barev s nižším kontrastem. Část tohoto je způsobena selháním WCAG 2.0 při určování správných kontrastů vzhledem k prostorové frekvenci. 4.5: 1 je více, než je potřeba pro velký tučný titulek, ale 4,5: 1 je pro malý tenký text nedostačující.

Pro běžně zrakově postižené by kritický kontrast mohl být až 10% u velkých tukových titulků na vrcholu funkce citlivosti na kontrast. Ale při velmi vysokých prostorových frekvencích malých tenkých písem musí být kontrast 20+ krát vyšší. Viz následující diagram, kde je veškerý text ve stejné barvě CSS (a to ani nehovoří o tom, jak antialiasing koriguje kontrast textu nad veškeré rozpoznávání).

contrast sensitivity curve sowing relation to text size

Velikost písma spolu s kontrastem a řadou dalších konstrukčních prvků tedy společně poskytují „nejčitelnější“ text. Bez ohledu na to je velikost písma 12 pixelů, kterou mnoho plakátů v tomto vláknu doporučuje, šokující, příliš malá a tam, kde přišli s touto postavou, se hádá někdo. Dalo by se použít něco jako 12px pro snad oznámení o autorských právech nebo něco, co nechcete, aby někdo četl, ale 12px není v žádném případě vhodnou velikostí pro text obsahu.

Glyfové to mají

Oficiální doporučení je minimální velikost 18 pixelů, nicméně některá písma, jako je Verdana (písmo určené pro použití na webu), mohou fungovat až 16 pixelů. Ale Times New Roman by nikdy neměl být nastaven na méně než 18 pixelů, protože má velmi malou výšku x a obecně špatnou čitelnost (díky společnosti Microsoft, ugh). Pro jiné písmo, které Microsoft rozpadl, zkusme nikdy použít "Courier New", kde Microsoft vzal to, co bylo obecně čitelné monospaced písmo, a pak ho učinil příliš tenkým a lehkým. Co si mysleli?

Pro několik obecných úvah o volbě typu písma pro usnadnění přístupu a čitelnosti, mám tuto předběžnou PDF=) na mém účtu výzkumné brány, kterou si můžete zdarma stáhnout: https: //www.researchgate. net/publishing/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Nejdůležitější závěrečný komentář

Důležitější než to, co nastavíte jako velikost písma, je to, že povolíte uživatelům ZOOM text na libovolnou velikost, aniž by se museli porušovat obsah. Současný standard specifikuje zvětšení 200% bez zlomení, ale to je nedostatečné. 500% je mnohem rozumnější z pohledu uživatele.

ZVÁŽIT:

20/20 je průměrná vize. Velikosti písma, které zmiňuji výše (18 pixelů), jsou založeny na tomto průměrném uživateli 20/20. 20/40 potřebuje dvakrát stejné rozměry pro stejné vnímání. Uživatelé 20/200 potřebují TEN TIMES této velikosti (tj. Mohou chtít přiblížit 1000%). Jako zmínku uvádím minimálně 500%, protože to bere v úvahu důsledky skutečnosti, že stránka obsahuje větší písma a fyzickou velikost zařízení.

Technologie, která právě chybí ve výzkumu, je zvětšení nejmenších písem, ale zvětšení větších písem méně, takže velké titulky se nestanou příliš velkými pro čitelnost.

Mezitím si uvědomte, že velká část lidí, kteří čtou vaše stránky, nemá monitor tak dobrý jako ten váš, a nemá tak dobrý zrak jako ten váš. Pokud chcete a představu o tom, jak by váš web mohl vidět nějaký méně šťastný, získejte levný, veselý, malý monitor s nízkým rozlišením (můžete ho mít v úložišti) a nastavit jej 3 až 4 stopy (tj. Více než metr). Dokážete si přečíst svůj web? Nyní přibližte text - rozbije se váš web kvůli omezením malého monitoru?

Toto je druh problému, který má mnoho uživatelů s mnoha weby. Jen proto, že máte 20/15 vidění a krásný 32 “displej sítnice neznamená, že vaši uživatelé mají téměř tu úroveň vizuálního ubytování.

-Ano

0
Myndex

Souhlasím s Erikem, 16pt se zdá být nejlepším standardem, pokud jde o čitelnost . Více zde: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell