Vytvorenie vlastného písma pre vývoj webu. Ako urobiť krásne písmo v html: veľkosti, farby, značky html písma

Ahojte všetci! Dnes, v rámci sekcie webdizajnu, chcem hovoriť o fontoch, ktoré by sa mali používať pri vývoji webovej stránky.

Nie každý sa spravidla zamýšľa nad tým, aké fonty použiť pre obsahovú časť webu. Výber krásnych písiem pre webovú stránku je najdôležitejšou súčasťou vývoja dizajnu. Keďže čitateľnosť informácií na stránke závisí od tejto časti, a ako vieme, tá je na stránke najdôležitejšia. Z tohto dôvodu by sa tento problém mal brať veľmi vážne.

V dizajne webových stránok však môžete použiť iba také písma, ktoré sú dostupné pre budúcich návštevníkov stránky. Toto sa robí s cieľom zabezpečiť, aby sa stránky zobrazovali správne pre všetkých používateľov s rôznymi operačnými systémami a prehliadačmi. V opačnom prípade, ak použijete neštandardné fonty, väčšina návštevníkov uvidí všetko inak a vo väčšine prípadov nepekne. Z tohto dôvodu sa odporúča používať štandardné fonty uvedené nižšie. Zoznam fontov obsahuje fonty, ktoré sú nainštalované v operačnom systéme Windows XP a novšom.

V tomto článku neuvažujem o fontoch z iných operačných systémov. Skúsený návrhár layoutu by mal poznať porovnanie fontov v rôznych operačných systémoch a pri layoute si tento bod zapíše do CSS štýlov.

Pri vývoji obsahovej časti dizajnu sa v zásade používajú dva typy písma:

• pätkové písma
• bezpätkové písma

Serifové písma- (anglicky serif - serif) písma, ktorých štýl začína a končí ťahmi. Napríklad Times New Roman.

Bezpätkové písma(sekané písma) - (anglicky sans-serif - sans serif) písma s prísnymi, rovnými čiarami bez pätiek. Napríklad Arial.

Nižšie môžete vidieť snímku obrazovky pätkového a bezpätkového písma.

Fonty pre web dizajn:

• Arial
• Arial Black
• Arial Narrow
• Kniha Antiqua
• Gotika storočia
• Comic Sans MS
• Kuriér Nový
• Franklin Gothic Medium
• Gruzínsko
• Vplyv
• Konzola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino linotyp
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet čs
• Verdana
• Webdings (rôzne symboly a značky)
• Wingdings (rôzne symboly a znaky)

Chcel by som tiež poznamenať taký bod, ako je absencia kurzívy v mnohých typoch písma, namiesto kurzívy používajú šikmé, čo sťažuje čítanie textu.

Zo štandardných písiem v systéme Windows, ktoré nemajú kurzívu:

• Arial Black
• Comic Sans MS
• Franklin Gothic Medium
• Vplyv
• Konzola Lucida
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Keďže som spomenul písma, ktoré nemajú kurzívu, rád by som poznamenal aj to, že existujú písma, ktoré sú spočiatku tučné. Z týchto dôvodov nemá zmysel používať štýly, ktoré označujú tučné písmo, pretože výsledok nebude taký, aký potrebujeme.

V tomto článku vám poviem, ako vytvoriť vlastné písmo pre webovú stránku pomocou ikon, ktoré ste sami vytvorili. Všetko, čo k tomu potrebujeme, je program na vytváranie vektorovej grafiky (Adobe Illustrator alebo Inkspcape) a prístup na internet Takže, začnime! Všetky obrázky, ikony a css písmo, ktoré sa na to používa, si môžete stiahnuť na konci článku.

Pre tento tutoriál urobíme niečo jednoduché. Pre prvú ikonu nakreslíme pravidelnú hviezdu. Pre druhú ikonu - orol s písmenom W vo vnútri. Kreslenie je celkom jednoduché a môžete vytvárať ľubovoľné tvary a kombinácie. Na tieto účely som použil ilustrátor.

Po dokončení kreatívnej časti musí byť váš výtvor uložený vo formáte SVG. Kliknite na „Uložiť ako“ a vyberte typ súboru ako SVG. Teraz môžete prejsť priamo k vytvoreniu písma.

Na tieto účely využívame populárnu a bezplatnú službu IcoMoon.

Prvá vec, ktorú musíte urobiť, je vytvoriť nový projekt, takže kliknite na ponuku v ľavom hornom rohu a kliknite na „Nový projekt“. Ďalej načítame naše hotové súbory svg po kliknutí na tlačidlo „Importovať ikony“. Po dokončení týchto krokov by ste mali na monitore vidieť takýto obrázok:

Teraz máme možnosť zmeniť kód pre každú ikonu (v našom prípade to bude e600 a e601), názov nášho písma, predponu CSS atď. To všetko sa vykonáva v časti „Predvoľby“. Písmo môžeme vidieť aj v akcii kliknutím na odkaz „Povoliť rýchle použitie“ – čo nám umožní získať dočasný odkaz na naše písmo, ako aj možnosť zobraziť kód v CodePen.

Po nakonfigurovaní všetkého kliknite na tlačidlo „Stiahnuť“ v dolnej časti stránky a stiahnite si archív. V tomto archíve nájdete svoj font vo formátoch ttf, eot, svg a woff + ukážkovú stránku s fontom.

Používanie ikon na stránke

Teraz všetko, čo potrebujeme, je zahrnúť písmo CSS pomocou @font-face a špecifikovať ďalšie parametre (všetky sú napísané v súbore css v archíve, ktorý ste si stiahli.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; hovoriť: žiadny; font-variant: normal; /* Lepšie vykresľovanie písma -vyhladenie: odtiene sivej ) .wdm-star:before (obsah: "\e600"; ) .wdm-eagle:before (obsah: "\e601"; )

Teraz môžeme použiť naše písmo v kóde HTML takto:

Zadanie názvu triedy pre značku dostaneme našu ikonu.

Dlho som nič nenapísal, ale dobre.
Momentálne sa venujem web developmentu a vyvstala otázka na krásne menu. S animáciou, ale bez JS alebo Flash. To všetko sa samozrejme robí pomocou CSS3 a navyše nebudeme používať obrázky. Vôbec.

Spustíme to, vidíme okno

Otvorte "Text > SVG Font Editor...", vpravo sa zobrazí panel

Kliknite na písmo 1, zmeňte ho na názov svojho písma, napríklad MySomeFont, a vymažte pole *Typ* vpravo.

Teraz otvorte kartu *Glyfy* všetko na našom paneli *Editor fontov SVG*. Ako vidíme, glyfy anglického rozloženia nám už pribudli. Ak vám všetko prekáža, môžete naň kliknúť pravým tlačidlom myši. Môžete tiež upraviť názov glyfu a symbol, ktorý identifikuje

Začnime pridávať samotné obrázky.

Importujte „Súbor > Importovať...“ (Ctrl+I) obrázok, ktorý chceme zahrnúť do písma. Ak ide o rastrovú grafiku, po jej pridaní musíte urobiť "Outline > Vectorize Raster" (Alt + Shift + B). Osobne som sa nehrabal v možnostiach, stačí kliknúť na *OK* a vektorový obrázok je vytvorený.

Rastrový vymažeme (Select it a stlačte kláves Delete) - dole v riadku pri výbere objektu sa napíše, či je rastrový (Image) alebo vektorový (Outline).

Ďalej natiahnite obrys do pracovnej oblasti (v hornom paneli sú vstupné oblasti - x: 0, y: 0; Š: 1000 a V: 1000). Obrys nechám vybratý, prejdem na náš obľúbený panel *Editor fontov SVG* na karte *Glyfy*. Teraz vyberte glyf, ktorý chceme priradiť k nášmu obrysu. Nech je to glyf so symbolom *a*. Potom jednoducho kliknite na tlačidlo *Získať krivky z výberu*. Ak chcete skontrolovať, či sme urobili všetko správne, jednoducho zadajte pridaný symbol do poľa *Text* nižšie a náš obrázok by sa mal zobraziť. Po kontrole je možné kontúru presunúť za pracovnú oblasť alebo ju už nie je potrebné vymazať.

Všetky nepoužívané znaky v písme môžeme tiež priradiť k akémukoľvek obrysu pomocou *Take from Selection* s textom *Chýbajúci glyf* na karte *Glyfy*. Operácia prebieha tak, ako je opísané vyššie.

Vo všeobecnosti sme k našim symbolom pridali všetky obrysy. Teraz musíme trochu upraviť samotný XML súbor. Otvorte *XML Editor* (Shift+Ctrl+X) – tlačidlo je na hlavnom paneli – štvrté sprava. A musíme zmeniť atribút *id* položky *

@font-face (
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}

Vo všeobecnosti je to všetko.

Existuje obrovské množstvo spôsobov, ako nájsť to správne písmo pre váš web. Môžete napríklad využívať služby s obrovskými knižnicami písiem, ktoré vyžadujú platené predplatné.

Ak máte obmedzený rozpočet alebo experimentujete s malým projektom, môžete použiť bezplatné webové písma, ktoré sú verejne dostupné. Nájdenie správneho webového písma pre váš web môže byť časovo náročné, preto vám predstavujeme výber toho najlepšieho z nich.

1. Montserrat

Ako sa typografia vyvíja, vzďaľuje sa od historických mestských plagátov a nápisov. Tvorca tohto písma sa snažil zachovať krásu typografie mestských plagátov, ktoré videla v uliciach Buenos Aires.

2. Abril Fatface

Abril Fatface je súčasťou veľkej rodiny písiem, ktorá sa dodáva v 18 štýloch vytvorených na rôzne účely. Toto písmo má výrazný a elegantný vzhľad, vďaka čomu je skvelým riešením na vytváranie pútavých nadpisov. Najčastejšie sa kombinuje s Lato, Open Sans a Droid Sans.

3. Displej Playfair

Vzhľadom na značnú výšku x a malé dolné indexy písmen je Playfair Display vhodný aj na písanie nadpisu, najmä ak je priestor obmedzený. Dobre sa páruje s Gruzínskom a často sa používa s Oswaldom, Latom a Arvom.

4. GT Walsheim

GT Walsheim, ktorý sa dnes používa na mnohých blogoch, je predstaviteľom geometrických bezpätkových pätiek a je súčasťou rodiny Grilli Type. Musíte zaplatiť za celú sadu písiem, ale Grilli Type ponúka bezplatnú skúšobnú verziu GT Walsheim.

5. Merriweather

Ak je pre váš projekt prioritou čitateľnosť na obrazovke, pozrite si Merriweather, ktorý bol vytvorený na tento účel. Toto písmo sa navyše neustále vylepšuje.

6. Josephine Sans

Josefin Sans je inšpirovaný vintage švédskym dizajnom a vyznačuje sa elegantnou, geometrickou estetikou.

7. Gravitas One

Gravitas One je založený na „UK fat face“, výraznom reklamnom fonte, ktorý sa objavil počas priemyselnej revolúcie v Anglicku. Toto písmo vyzerá skvele v strednej až veľkej mierke a je vhodné pre nadpisy, nadpisy a karty.

8. Jura

Písmená tohto písma opakujú tvary písmena Kaya-li. Obsahuje aj glyfy cyriliky a gréckej abecedy. Je k dispozícii v ľahkej, normálnej, strednej a tučnej hmotnosti.

9.Legová gotika

Pôvodne navrhnutý Morrisom Fullerom Bentonom pre American Type Founders Company v roku 1903, League Gothic našiel nové využitie s aktualizáciou a pridaním nových glyfov.

10. Fjord

Fjord je pätkové písmo pôvodne vytvorené pre tlačené knihy a je obzvlášť vhodné na prispôsobenie dlhého textu do malého formátu tlače. Môže sa použiť na vytvorenie veľkého množstva textového obsahu na stránke, pretože písmo má jasnú štruktúru, výrazné pätky a dlhé elegantné hlavy a pätky.

11. Amarant

Rodina písiem Amaranth sa vyznačuje nešikmým kurzívou s malým kontrastom a výraznými krivkami. Všetky tri štýly Amaranth sa dobre spájajú s takmer akýmkoľvek iným písmom. S týmto písmom sa môžete pohrať – experimentovať a vybrať to najlepšie.

12. Poly

Toto stredne kontrastné písmo bolo pôvodne vytvorené pre pôvodný jazyk Wayuunaiki, ktorý vyžaduje široké glyfy. Má malé stonky a veľkú výšku x, vďaka čomu je obzvlášť užitočný v malých veľkostiach.

13. Gentium Basic

Toto písmo bolo vytvorené ako viacjazyčné písmo vrátane latinských a gréckych písmen, ako aj cyriliky a rozšírenej podpory vo verzii Gentium Plus. Gentium Basic a Gentium Book Basic sú dostupné v bezplatnej webovej verzii, ale sú obmedzené len na latinku.

14. Otvorte Sans

Open Sans je predstaviteľom humanistickej grotesky. Toto písmo je dobre čitateľné a prispôsobuje sa webovým aj mobilným rozhraniam. Ide o nešikmé písmo s jednoduchým štýlom písmen, ktoré sa vyznačuje neutrálnym, no dostatočne príjemným vzhľadom, že ho možno použiť na rôzne účely.

15. Normálna účtovná kniha

Ide o multifunkčné písmo s veľkou výškou x, silným farebným kontrastom a dobre definovanými pätkami, ktoré prispievajú k čitateľnosti textu. Toto písmo vyzerá dobre v tlači aj na obrazovke s nízkym rozlíšením.

16. Signika

Toto bezplatné webové písmo predstavuje bezpätkové písmo. Nízky kontrast a vysoká x-výška umožňujú Signike dobré zobrazenie na obrazovke. Široký výber ikon zahŕňa symboly, piktogramy a šípky.

17. Josefín Slab

Josefin Slab, vytvorený podľa kánonov geometrického písma typického pre 30. roky 20. storočia, s pridanými škandinávskymi črtami, má vlastnosti doskového písma a pripomína písmo písacieho stroja. Zaujímavosťou je, že jeho výška x je polovica výšky veľkého písmena.

18. fórum

Ako už názov napovedá, ide o rímsky font, ktorý je vhodný pre nadpisy veľkých písmen, ale je vhodný aj na zobrazovanie textu. Elegantné proporcie tohto písma pripomínajú klasickú architektúru s polkruhovými oblúkmi, horizontálnymi rímsami a vertikálnymi stĺpmi.

Tikal Sans, pomenovaný po jednom z najznámejších mayských miest, má znaky glyfov, ktoré sa používali pri písaní juhoamerickej civilizácie. Jeho tvorca zvolil veľkú výšku x, ktorá dodáva písmu moderný vzhľad a blahodarne pôsobí na jeho čitateľnosť a veľký výber štýlov umožňuje jeho využitie na najrôznejšie účely.

20. Arvo

Toto geometrické plošné písmo je vhodné pre tlač aj web a je dostupné v rímskych, italických, rímskych tučných a tučných kurzívach. Nízky kontrast Arvo zvyšuje jeho čitateľnosť na obrazovke.

21. Bevan

Bevan bol vytvorený na základe tradičného doskového písma z 30. rokov 20. storočia. Písmená boli zdigitalizované, dostali nový tvar a optimalizované pre webovú verziu. Toto je jedno z mála super tučných fontov, ktoré sú vhodné pre webové stránky.

22. Starý štandardný TT

Old Standard TT vychádzal z moderného pätkového písma, ktoré bolo populárne koncom 19. a začiatkom 20. storočia a potom sa na dlhý čas zabudlo. Toto písmo je vhodné na pridanie štýlu do konkrétneho typu obsahu, ako je napríklad vedecký výskum alebo texty v gréčtine alebo azbuke.

23. Creon

Toto pätkové písmo, ideálne pre spravodajské weby a blogy, tiež zdieľa charakteristiky slabých fontov, ale jeho vyváženie a nízky kontrast robia Kreon výrazne osobnejším.

24. Droid Sans

Droid Sans bol optimalizovaný pre maximálnu čitateľnosť aj v malých rozhraniach, ako sú ponuky na obrazovkách mobilných telefónov. Toto je neutrálne, nie šikmé písmo s jednoduchými, otvorenými formami písmen.

25. Italiana

Tvorca tohto písma sa inšpiroval klasickou talianskou kaligrafiou, takže písmo bude veľmi užitočné pri projektoch, kde potrebujete dodať eleganciu. Italiana je vhodná aj na písanie titulkov správ v tlačenom aj elektronickom formáte.

26. Vollkorn

Toto detailné a na funkcie bohaté pätkové písmo je veľmi obľúbené. Jeho jasnosť a pevnosť vyjadruje dôveru a energiu, vďaka čomu je písmo rovnako efektívne vo väčších veľkostiach pre nadpisy a nadpisy, ako aj pri veľkom množstve textu v menších formátoch.

27. herec

Toto písmo má obzvlášť veľkú výšku x, ktorá vyžaduje pomerne veľa miesta. Herec má tiež staromódny štýl pre niektoré postavy, ako napríklad čísla 6 a 9.

Humanistické písmo Garamond, ktorého korene siahajú až do 16. storočia, sa stalo skutočnou typografickou ikonou, ktorá často slúži ako základ pre tvorbu moderných typov písma, vrátane EB Garamonda.

31. Ubuntu

Ubuntu Grotesque bol vytvorený na prispôsobenie webového textu na stolných počítačoch aj mobilných zariadeniach. Používateľom odporúčame experimentovať s týmto písmom, upravovať ho a vylepšovať podľa vlastného uváženia.

32. Rosario

Rosario je klasický humanistický bezpätkový, ktorý je ideálny na štylizáciu odsekov textu.

33. Roboto Slab

Roboto Slab je jedným z fontov z rodiny Roboto. Bloková verzia upúta najmä svojimi geometrickými tvarmi a otvorenými krivkami. Je rovnako vhodný pre obrazovky gadgetov a tlačené verzie textov.

34. Oswald

Písmo je prepracovanou verziou klasického alternatívneho gotického bezpätkového písma. Oswald bol nedávno aktualizovaný, aby prišiel v rôznych závažiach, rozšírenej znakovej sade a lepšom kerningu.

35. Patová situácia

Stalemate je elegantné ručne písané písmo s nádychom vintage. Je vhodný na vytváranie akcentov a prispôsobenie vašej webovej stránky.

36. Crimson Text

Toto starostlivo navrhnuté klasické proporcionálne písmo možno použiť na zobrazovanie veľkého množstva textu aj na písanie nadpisov.

V html hrá veľkosť písma dôležitú úlohu. Umožňuje vám upozorniť používateľa na dôležité informácie zverejnené na stránke lokality. Aj keď nie je dôležitá len veľkosť písmen, ale aj ich farba, hrúbka a dokonca aj rodina.

Značky a atribúty pri práci s html písmami

Hypertextový jazyk má širokú škálu nástrojov na prácu s fontmi. Koniec koncov, formátovanie textu je hlavnou úlohou html.

Dôvodom vzniku jazyka HTML bol problém zobrazovania pravidiel formátovania textu v prehliadačoch.