Dokonalý sprievodca HTML písmami a ako ich správne používať

Ak existuje niečo, čo môže zmeniť alebo narušiť dizajn webovej stránky, sú to HTML fonty. Výber správneho písma je rozhodujúci pre úspech a nie je to len estetická voľba, pretože výber písma, ktoré je ťažko čitateľné, môže návštevníkov vystrašiť.

Písmo ako také musí byť ľahko pripravené, musí mať správnu veľkosť a musí mať farbu, ktorá nesplýva s pozadím. Aj keď to môže znieť ako základ, veľa webových stránok to stále nechápe správne a je pravdepodobné, že ste pravdepodobne narazili na webovú stránku alebo dve, ktoré sa ťažko čítajú.

Dnes sa budem venovať všetkému, čo potrebujete vedieť o HTML fontoch vo WordPress.

Čo sú fonty HTML?

Písmo HTML alebo webové písmo je štýl textu zobrazovaného na webových stránkach, ktorý je napísaný v CSS. Vo väčšine prípadov bude mať platforma, na ktorej vytvoríte svoj web, len obmedzený výber písiem, no v skutočnosti sú k dispozícii stovky.

Ich používanie však prináša dosť veľký kompromis. Nemusia byť uložené na serveroch, s ktorými komunikujete.

Alebo inými slovami, ak používate nezvyčajné písmo, načítanie vašej stránky môže trvať dlhšie, pretože server a webové prehliadače musia nájsť písmo, ktoré používate, a potom ho nainštalovať, kým sa stránka načíta.

To je dôvod, prečo väčšina webových stránok skutočne používa veľmi podobné písmo.

Ďalším aspektom HTML fontov je ich schopnosť prispôsobiť sa rôznym veľkostiam obrazovky. Alebo inými slovami, schopnosť reagovať.

Je tiež dôležité spomenúť, že každé písmo je prispôsobiteľné, pokiaľ ide o jeho veľkosť a farbu, ktorú si vyberiete. Existujú aj ďalšie štandardné prispôsobenia, ako je tučné písmo a kurzíva, ktoré môžete použiť. Tieto možnosti sú dostupné pre takmer každé písmo.

Ako zmením písma vo WordPress?

Písma, ktoré máte k dispozícii, závisia od témy, ktorú používate. Každá téma zvyčajne ponúka niekoľko štandardných písiem, z ktorých si môžete vybrať. To znamená, že ako väčšina vecí vo WordPress, môžete pridať ďalšie pomocou doplnkov.

Poďme sa pozrieť na to, ako si vybrať písmo vo WordPresse.

Metóda 1: Prispôsobovač tém

Pred WordPress 5.9 vám prakticky všetky témy v rámci WordPress umožňovali meniť písmo pomocou nástroja na prispôsobenie tém. To vám umožní zmeniť písmo v ktorejkoľvek oblasti na vašom webe. A je to naozaj jednoduché.

Jediným problémom je, že niektoré témy nemajú k dispozícii rovnaké možnosti. Ak teda nevidíte možnosť typografie, preskočte na metódu 2.

Na správcovskom paneli WordPress kliknite na Vzhľad a vyberte možnosť Prispôsobiť.

Ako som už povedal, pre každú tému je to iné. Niekedy sa možnosť typografie zobrazí v možnostiach najvyššej úrovne. Inokedy je pochovaný na inom mieste.

V mojom prípade používam tému Astra. Najprv musím kliknúť na Globálne, aby som mohol vybrať možnosť typografie.

Dostupné možnosti závisia od témy, ale zvyčajne budete mať možnosti na zmenu medzier, okrajov, veľkosti písma a podobne. Pomocou selektora písma si môžete vybrať z predvolených nastavení, ktoré vaša téma ponúka. Niektoré ponúkajú viac ako iné.

Môžete vidieť, ako vyzerá písmo v oblastiach, ktoré sa mení. Niekedy sú to globálne možnosti a niekedy sú určené pre konkrétne sekcie.

Metóda 2: Kód

Nie všetky motívy ponúkajú typografiu ako možnosť, namiesto toho musíte skutočne kódovať písma do šablóny so štýlmi. Dobrou správou je, že to znie oveľa ťažšie, ako to v skutočnosti je.

Prejdite na koncovú časť svojho webu a nájdite šablónu so štýlmi CSS svojej témy. Ak chcete na svojej webovej lokalite použiť jedno písmo, pridajte nasledujúci riadok kódu do hornej časti hárka:

* {font-family:”Názov písma”}

Musíte nahradiť „názov písma“ skutočným názvom písma (napríklad Arial). Uložte zmeny a to je vaše nové písmo. Písmo musí byť štandardné písmo HTML, inak si musíte písmo stiahnuť, aby ste ho mohli použiť.

V takýchto prípadoch môžete niekedy vložiť riadok kódu do oblasti hlavičky. Skvelým príkladom sú fonty Google.

Metóda 3: Editor stránok (WordPress 5.9)

Editor stránok je novým prírastkom do WordPress od najnovšej aktualizácie 5.9. Nie je k dispozícii pre väčšinu tém a tie, ktorými je, sú stále vo verzii beta. V budúcnosti to však pomaly, ale isto nahradí prispôsobovač tém.

V nadchádzajúcich mesiacoch budú témy uvoľnené výhradne s týmto editorom a existujúce témy ich pridajú ako náhradu alebo v spojení s prispôsobovačom tém z metódy 1.

TL;DR: Editor lokality je tu na vás a umožňuje vám vykonávať zmeny na celej lokalite naraz. A áno, zahŕňa to aj možnosti typografie.

Kliknite na Vzhľad a vyberte možnosť Editor.

Prvá vec, ktorú by ste mali vidieť, je možnosť Typografia na pravej strane. Kliknite naň.

Potom budete vyzvaní, aby ste si vybrali medzi Text a Odkazy. Odkazy odkazujú na hypertextové odkazy, ktoré vytvoríte, zatiaľ čo text odkazuje na všetko ostatné. Vyberte možnosť Text.

Pomocou rozbaľovacieho poľa Rodina písiem vyberte, ktoré písmo sa má použiť. Podobne ako predtým, možnosti, ktoré máte k dispozícii, závisia od témy.

A to je všetko. Tento editor bude určite rozšírený v budúcich aktualizáciách, takže v budúcnosti bude určite viac možností, ktoré môžete využiť.

A čo pluginy?

WordPress má obrovský výber doplnkov, ktoré môžete použiť na pridávanie vlastných písiem, ale vlastné písma sa nevzťahujú na štandardné písma HTML. Ide o jedinečné písma, ku ktorým máte bezplatný prístup.

Teraz to môže znieť lákavo, ale väčšinou je s používaním týchto písiem obrovský problém. Spomaľujú váš web.

Spomenul som to už skôr, ale aby sa stránka načítala, webový prehliadač, ktorý návštevník používa, musí stiahnuť dané písmo zo servera, ktorý je uložený. Toto je ďalší krok a čím viac vlastných písiem použijete, tým dlhšie to bude trvať.

To je veľký dôvod, prečo sú HTML fonty široko používané. Sú štandardné a dajú sa nájsť kdekoľvek. A to je tiež dôvod, prečo sa väčšina stránok usadila na jednom fonte. Čím viac pridáte, tým dlhšie bude načítanie trvať.

Dobrou správou je, že Google pracuje na rozšírení výberu písiem, ktoré máte k dispozícii s Google Fonts.

Čo sú písma Google?

Google Fonts sú vlastné písma dostupné priamo od spoločnosti Google. A ponúkajú viac ako 1000 fontov, z ktorých si môžete vybrať. A čo je najdôležitejšie, vyhýbajú sa problémom, s ktorými sa stretávajú vlastné písma, pretože sú uložené priamo na serveroch Google.

Potom doručí písmo všetkým používateľom tým najoptimálnejším možným spôsobom. Konečným výsledkom je, že vaše webové stránky sa načítajú rýchlejšie, ako keby ste použili súbor tretej strany.

Keďže Google Fonts nie sú stredobodom tejto príručky, nechám to tak, ale ak máte záujem, už máme návod, ako ich umiestniť lokálne vo WordPress.

Tipy na to, aby bolo písmo HTML čitateľné

Jedným z najväčších problémov začiatočníkov je čitateľnosť. Polovicu času si ani neuvedomujú, že je to problém. Ak návštevníci nemôžu čítať váš obsah, už sa viac nevrátia. A bude menej pravdepodobné, že to budú zdieľať.

Pozrime sa na hlavné úvahy, ktoré by všetky webové stránky mali zvážiť pri výbere písma.

1. Nepoužívajte kurzívny štýl

Existuje veľa písiem, z ktorých si môžete vybrať, a mnohé z nich používajú kurzívu ako štýl. Aj keď to môže byť vhodné pre niektoré webové stránky, napríklad tie, ktoré sa zameriavajú na históriu, nie je to najlepšia voľba pre dostupnosť.

Po prvé, je dôležité vyriešiť hlavnú chybu tohto výberu dizajnu, veľa ľudí nevie čítať kurzívou.

V skutočnosti mnohé školy v Amerike skutočne zrušili kurzívy, takže táto skupina bude len rásť. A je pravdepodobné, že váš web si nebudú prezerať len Američania.

Jednotlivci, ktorí sa učia angličtinu ako druhý jazyk, majú tiež problémy s čítaním kurzív.

Možno si myslíte, že je to štýlové, ale môžem vás ubezpečiť, že mnohých to odradí od obsahu.

2. Vyberte správnu farbu

Jednou z najväčších chýb, ktoré začiatočníci robia, je zmena farby písma. To môže ľahko spôsobiť, že text bude pre bežných návštevníkov veľmi ťažko viditeľný a pre ľudí so zrakovým postihnutím znemožnený.

Predovšetkým by ste mali mať na pamäti, že existuje farbosleposť. Len v Amerike, koniec 12 miliónov ľudí má nejakú formu farbosleposti.

Tu sa však nemusíte obávať len textu, ale aj farby pozadia. Napríklad čierny text je skvelou voľbou pre väčšinu stránok, ale nie na čiernom alebo tmavom pozadí. Namiesto toho funguje biely text lepšie.

Farba je jednoducho jedným z najväčších faktorov, ktoré sťažujú čitateľnosť webového obsahu.

3. Nerobte text príliš malým

Teraz už viem, čo si myslíte, ľudia môžu jednoducho použiť funkciu priblíženia, aby bol text čitateľný? Aj keď je to veľmi pravda, koľko ľudí si skutočne nájde čas na úpravu úrovní priblíženia? Koľko ľudí to vlastne vie?

Pravdou je, že ak sa niekomu zdá text príliš malý, jednoducho odíde.

Odporúčaná veľkosť textu na blogu je 16 až 20 px. Je dôležité nebrať do úvahy iba používateľov počítačov, pretože používatelia mobilných zariadení sú oveľa náchylnejší na malý text. Opäť, aj keď je ľahké priblížiť, väčšina nebude alebo nevie, že existuje.

Správna veľkosť textu je rozhodujúca pre úspech.

FAQ

Aká veľká je rodina písiem HTML?

Aj keď je na výber veľa písiem, skutočný zoznam rodiny písiem HTML pozostáva iba z piatich členov:

1. Serif
2. Bezpätkové
3. Kurzíva
4. Fantázia
5. Monospace

Rodiny označujú špecifický štýl, ktorý dodržiavajú všetky fonty v rámci, aspoň z väčšej časti. Existuje niekoľko odľahlých hodnôt, ale môžete očakávať, že rodina kurzív bude vytvárať písma, ktoré vyzerajú dobre kurzívou.

V rámci každej rodiny písiem sú na výber stovky písiem a zoznam sa každým rokom rozrastá. Väčšina z nich však nie je bezpečná pre web.

Čo sú webové bezpečné písma?

Webové bezpečné fonty sú najpoužívanejšie fonty na internete. Sú bezpečné na webe, pretože všetky zariadenia a prehliadače sú na ich používanie zvyknuté.

Celkový počet webových bezpečných písiem je ťažké určiť, ale je ich asi 20. Zoznam sa rozrastá, pretože čoraz viac webových stránok sa rozhoduje pre písma s rôznymi štýlmi.

Výsledkom je, že viac webových prehliadačov bude natívne podporovať najpopulárnejšie fonty, a preto tento zoznam rastie.

Tu sú niektoré z najpoužívanejších písiem na internete a rodiny, z ktorých pochádzajú:

• Arial (sans-serif)
• Times New Roman (pätka)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Náraz (bezpätkové)
• Didot (pätka)
• Gruzínsko (pätka)
• Americký písací stroj (pätkový)

Je písmo písmo?

Podľa definície sú písmom písmená, čísla a znaky, ktoré majú rovnaký dizajn. Zatiaľ čo písmo je špecifický štýl, ktorý bude typ písma používať so špecifickou šírkou, veľkosťou a hmotnosťou.

To môže byť stále mätúce, preto uvediem príklad. Zvážte Times New Roman; je to typ písma podľa definície. Keď mu však dáte konkrétnu veľkosť, povedzme 20px, a urobíte ho tučným písmom, stane sa z neho písmo.

Tieto dva sú veľmi podobné a často sa používajú zameniteľne, ale v skutočnosti to nie je to isté.

Je tučné písmo?

Je to celkom bežné použitie Tučné, Kurzívaalebo Tučná kurzíva pomôcť kľúčovým slovám alebo frázam vyniknúť. Tučné písmo však v skutočnosti nie je.

Namiesto toho je to modifikátor pre samotné písmo. Môže to výrazne pomôcť tomu, aby bol váš obsah čitateľnejší, najmä keď viac používateľov začne stránky len prezerať, aby našli konkrétnu frázu alebo výraz. A v tomto smere je vysoko efektívny.

Nie je to však náhrada za skutočnú hlavičku.

Aký je rozdiel medzi webovým a desktopovým písmom?

Písmo pracovnej plochy je nainštalované na vašom počítači s úmyslom použiť ho v špecifickej aplikácii. Predstavte si napríklad inštaláciu písma, ktoré chcete použiť v programe Microsoft Word alebo Photoshop.

Webové písmo je špeciálne vytvorené pre webové stránky a používa CSS na zobrazenie na webových stránkach. Mnoho písiem môže v skutočnosti existovať ako webové aj desktopové písmo, napríklad Times New Roman alebo Arial, ale v skutočnosti sa navzájom veľmi líšia z hľadiska kódu.

Čiara medzi nimi sa postupom času stiera.

Mám použiť značku HTML Font?

HTML tag font som nespomenul, pretože klasický editor je ďaleko za nami. Ak ho však stále používate, potom môžete na manipuláciu s písmom použiť editor HTML. Toto je však zbytočné, keďže vizuálny editor existuje.

Pre zvedavých je značka písma „“ a môžete ju použiť na manipuláciu s písmom na príspevku alebo stránke. Používa sa dodnes, ale toto číslo sa znižuje.