Verkkofonttien yhdistäminen @font-facen avulla. Lakiasia kirjasimien käytöstä

Lihavoitu teksti

Lihavoitu teksti

Tavallista enemmän

Tavallista vähemmän

Kursivointi

Kursivointi

Alaviivalla

Yliviivattu

Tyylimääritteiden ominaisuudet

Kuvattujen tunnisteiden lisäksi on olemassa useita muita tapoja muuttaa fonttia html:ssä. Yksi niistä on käyttää yleistä tyylimääritettä. Sen ominaisuuksien arvojen avulla voit asettaa fonttien näyttötyylin:

1) font-family – ominaisuus määrittää kirjasinperheen. On mahdollista luetella useita arvoja.
Html-fontin vaihtaminen seuraavaan arvoon tapahtuu, jos edellistä perhettä ei ole asennettu käyttäjän käyttöjärjestelmään.

Kirjoitussyntaksi:

kirjasinperhe: kirjasimen nimi [, fontin nimi[, ...]]

2) font-size – koko on 1-7. Tämä on yksi tärkeimmistä tavoista lisätä fonttia HTML:ssä.
Kirjoitussyntaksi:

font-size: absoluuttinen koko | suhteellinen koko | merkitys | korko | periä

Voit myös asettaa fontin koon:

• pikseleinä;
• Absoluuttisesti ( xx-pieni, x-pieni, pieni, keskikokoinen, suuri);
• Prosentteina;
• Pisteitä (pt).

Fonttikoko: 7

Fonttikoko: 24px

Fonttikoko: x-large

Fonttikoko: 200 %

Fonttikoko: 24 pt

font-tyyli: normaali | kursivoitu | vino | periä

Arvot:

• normaali – normaali kirjoitusasu;
• kursivoitu – kursivoitu;
• vino – kirjasin vinossa oikealle;
• inherit – perii pääelementin oikeinkirjoituksen.

Esimerkki fontin vaihtamisesta html:ssä tällä ominaisuudella:

font-style: inherit

font-style: kursivoitu

font-style:normaali

font-style:oblique

font-variant: normaali | pienet kirjaimet | periä

Esimerkki fontin vaihtamisesta html:ssä tällä ominaisuudella:

font-variant: inherit

font-variant:normal

font-variant:small-caps

fontin paino: lihavoitu|lihavoitumpi|kevyempi|normaali|100|200|300|400|500|600|700|800|900

Arvot:

• lihavoitu – asettaa html-fontin lihavoiduksi;
• rohkeampi – rohkeampi verrattuna normaaliin;
• kevyempi - vähemmän kylläinen verrattuna normaaliin;
• normaali – normaali kirjoitusasu;
• 100-900 – asettaa kirjasimen paksuuden numeerisena ekvivalenttina.

font-weight:bold

font-weight:bolder

font-weight: kevyempi

font-weight:normal

fontin paino: 900

fontin paino: 100

html-fontin ominaisuus ja fontin väri

Fontti on toinen säilön ominaisuus. Itsensä sisällä se yhdisti useiden fonttien vaihtamiseen tarkoitettujen ominaisuuksien arvot. fontin syntaksi:

font: font-size font-family | periä

Arvo voidaan asettaa myös järjestelmän käyttämille kirjasimille eri säätimien tarroissa:

• kuvateksti – painikkeille;
• kuvake – kuvakkeille;
• menu - valikko;
• viestilaatikko – valintaikkunoita varten;
• pieni kuvateksti – pienille säätimille;
• status-bar – tilapalkin fontti.

Tässä artikkelin opetusohjelmassa kerron sinulle, kuinka voit luoda oman fontin verkkosivustolle käyttämällä itse luomiasi kuvakkeita. Tarvitsemme tähän vain ohjelman vektorigrafiikan luomiseen (Adobe Illustrator tai Inkspcape) ja Internet-yhteyden. Voit ladata kaikki tähän käytetyt kuvat, kuvakkeet ja css-fontin artikkelin lopusta.

Tätä opetusohjelmaa varten teemme jotain yksinkertaista. Ensimmäiselle kuvakkeelle piirrämme tavallisen tähden. Toiselle kuvakkeelle - kotka, jonka sisällä on kirjain W. Se on melko helppo piirtää ja voit luoda mitä tahansa muotoja ja yhdistelmiä. Näihin tarkoituksiin käytin kuvittajaa.

Kun olet valmis luovan osan, luomuksesi on tallennettava SVG-muodossa. Napsauta "Tallenna nimellä" ja valitse tiedostotyypiksi SVG. Nyt voit jatkaa suoraan fontin luomiseen.

Näihin tarkoituksiin käytämme suosittua ja ilmaista IcoMoon-palvelua.

Ensimmäinen asia on luoda uusi projekti, joten napsauta vasemmassa yläkulmassa olevaa valikkoa ja napsauta "Uusi projekti". Seuraavaksi lataamme valmiit svg-tiedostomme napsautettuaan "Tuo kuvakkeet" -painiketta. Kun olet suorittanut nämä vaiheet, sinun pitäisi nähdä seuraavanlainen kuva näytölläsi:

Nyt meillä on mahdollisuus muuttaa jokaisen kuvakkeen koodia (tapauksessamme se on e600 ja e601), fonttimme nimeä, CSS-etuliitettä ja niin edelleen. Kaikki tämä tehdään "Asetukset" -kohdassa. Näemme myös fontin toiminnassa napsauttamalla "Ota käyttöön pikakäyttö" -linkkiä - jonka avulla voimme saada väliaikaisen linkin kirjasimeemme sekä mahdollisuuden tarkastella koodia CodePenissä.

Kun olet määrittänyt kaiken, napsauta sivun alareunassa olevaa "Lataa" -painiketta ja lataa arkisto. Tästä arkistosta löydät fonttisi ttf-, eot-, svg- ja woff-muodoissa sekä esittelysivun fontilla.

Sivuston kuvakkeiden käyttäminen

Nyt meidän tarvitsee vain sisällyttää CSS-fontti @font-face-komennolla ja määrittää muut parametrit (ne kaikki on kirjoitettu lataamasi arkiston css-tiedostoon.

@font-face ( font-family: "wdm-eagle"; src: url("//websitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; puhu: none font-style: normaali rivinkorkeus: 1 -tasoitus: harmaasävy; .wdm-star:before ( sisältö: "\e600"; ) .wdm-eagle:before (sisältö: "\e601"; )

Nyt voimme käyttää fonttiamme HTML-koodissa seuraavasti:

Luokan nimen määrittäminen tagille saamme kuvakkeen.

Esittelemme sinulle valikoiman ilmaisia ​​palveluita suunnittelijoille. Tämä on ensimmäinen vaihtoehto, aiomme laajentaa sitä tulevaisuudessa lisäämällä uusia osioita ja työkaluja.

Fontit

• Google Fonts on kaikkien suosikkikirjasinkirjasto. Voit valita ja ladata erilaisia ​​fontteja kaikkiin tilanteisiin.
• 1001 ilmaista fonttia - kirjasinkirjasto. Siinä on helppo navigointi - fontit lajitellaan sekä aakkosjärjestyksessä että tyypin mukaan. Siellä on osa venäläisiä fontteja.
• Fontstruct on online-kirjasinten suunnittelija. Erittäin yksinkertainen työkalu, jonka avulla voit luoda oman fontin. Voit piirtää ei vain tavallisilla neliöillä, vaan myös muilla muodoilla - pisteillä, pyöristetyillä kulmilla jne. Aloittelijalle se on ihanteellinen työkalu kokeilla ja nähdä typografia toiminnassa.
• Font Squirrel on yksi suurimmista kirjasinkirjastoista. Lisäksi voit ladata kuvan ja saada siinä käytettyjen fonttien nimet. Siellä on fonttikauppa ja jopa vaatekauppa logoilla.
• Type light on monipuolinen fonttieditori. Voit luoda, muokata ja muuntaa OpenType-, TrueType- ja PostScript-fontteja. On ladattava ja asennettava. Ilmaisversiossa on rajoitettu toiminnallisuus verrattuna ilmaiseen versioon. Mutta se riittää yksinkertaisen fontin luomiseen.
• What Font is on online-palvelu verkkosivustojen fonttien valitsemiseen. Lataamme fonttitiedoston, ilmoitamme sivuston URL-osoitteen ja katsomme, miltä ladattu fontti näyttää sivustolla. Kätevä palvelu.
• 1001 fonttia – kirjasimien kirjasto (yli 15 000). Helppo navigointi – fontti voidaan valita koon, tyypin, teeman, suunnittelun jne. mukaan. Valikon avulla voit mukauttaa tulostetta, mikä mahdollistaa kunkin fontin näkemisen eri vaihtoehdoissa: koko, tyyli jne.
• Font Flame on verkkopalvelu yhteensopivien fonttien valitsemiseen. Se toimii hyvin yksinkertaisesti - pääsivulla on arkki, jossa on kaksi eri fontilla tehtyä kirjoitusta. Jos pidit siitä, napsauta "Rakasta"; jos et, napsauta "Vihaa". Sen jälkeen voit tarkastella valitut uudelleen. Napsauttamalla kirjasimen nimeä avautuu Google Fonts.
• Typecast – fontin valitseminen prototyypille. Voit nähdä, miltä fontti näyttää millä tahansa laitteella. On tarpeen tunnistaa erityyppiset tekstit - otsikot, lainausmerkit jne. Voit valita kirjasintyypin, koon, tyylin ja sisennykset. Näet tulevan sivusi asentamillasi fonteilla. Iso plussa on asettelun valinta (yksi sarake tai useampia, erilaiset lohkojärjestelyt).
• Sanamerkki - voit valita käyttäjän tietokoneeseen asennetun fontin tekstiä, logoa tai otsikkoa varten. Kun kirjoitat tekstiä kenttään, se näyttää sen eri kirjasimilla. Voit valita koon, rekisteröinnin, näyttää mustavalkoisena tai päinvastoin. Haluamasi vaihtoehdot julkaistaan ​​Twitterissä tai Facebookissa - käyttäjän valinnan mukaan. Voidaan lähettää sähköpostilla.

Arkistokuvat

• Unsplash on jatkuvasti päivittyvä kuvasto. Kokoelmat on jaettu teemoihin. Löydät mitä tahansa "afrikkalais-amerikkalaisesta" "luontoon". Jokaisella valokuvalla on oma arvosanansa, näet parhaat tai uudet.
• FoodiesFeed – ruokakuvia. Kuvat on jaettu kategorioihin. Voit valita parhaat, eksklusiiviset, kuvakkeet, mallit jne.
• Ilmaiset referenssikuvat - valtava luettelo "todellisen elämän" kuvista. Pääasiassa maisema- ja luontokuvaus. Epämukava navigointi, kaikki pääsivun valokuvat tulevat näkyviin vierittäessä.
• Little Visuals – laadukkaita kuvia maisemista ja rakennuksista. Voit ladata arkiston viikon aikana julkaistuista parhaista kuvista. Valokuvat on merkitty hashtageilla, mutta niitä ei luokitella.
• Gratisography on valtava kirjasto ilmaisia ​​kuvia. Kaikki kuvat on jaettu kuuteen teemaan: ihmiset, irvistykset, kaupungit, esineet, luonto ja eläimet. Voit etsiä sanoilla.
• Death to the Arkistokuva – arkistokuvia. Et voi vain katsoa ja valita. He tekevät valinnan kuukautta etukäteen ja antavat sinun ladata sen sähköpostisi kirjoittamisen jälkeen. Arkisto painaa noin 11 MB. Parhaat kuvat ja latauslinkki lähetetään sähköpostitse.
• Superfamous – suuri kokoelma valokuvia epätavallisesta kuvakulmasta. Sarja on pieni mutta mielenkiintoinen.
• Kuviokirjasto - kuvioita ja tekstuureja. Sarja on melko suuri, mallit ovat epätavallisia. Ne korvataan vierittämällä ja vähitellen. Voit nähdä, miltä malli näyttää koko näytöllä tai osassa sitä.
• New Old Stock – vintage-kuvia arkistosta. Ilmaisia ​​kuvia on vähän, mutta uusia tulee säännöllisesti.
• Pexels – suuri määrä valokuvia kaikkiin tilanteisiin. Ne on jaettu aiheittain, erittäin helppo etsiä.
• Jay Mantri - suuri joukko valokuvia. Sellaista luokitusta ei ole, voit tarkastella sitä kuukausittain.

Varastografiikka

• Brusheezy – ilmaiset siveltimet, mallit, tekstuurit ja paljon muuta Photoshopille. 12 luokkaa, joista jokaisessa on alaluokat. Valinta on valtava.
• Iconfinder – kuvakkeet, sekä maksulliset että ilmaiset. Voit ladata ICO-, PNG-, ICNS- ja SVG-muodoissa.
• Brushez on suuri kokoelma siveltimiä Photoshopille. Niiden lisäksi on myös vektoriprimitiivejä, lomakkeita, malleja, tyylejä. Jokainen osa on jaettu alaosiin. Esimerkiksi siveltimille on yli 20 luokkaa.
• Vecteezy on vektorigrafiikkakirjasto, joka sisältää kuvia ja piirroksia. Suuri määrä luokkia ja valtava määrä grafiikkaa.
• Iconbird on venäjänkielinen kuvakkeiden hakupalvelu. Voit kirjoittaa aiheen ja saada joukon kuvakkeita tai selata luokkien mukaan.
• Icons8 on venäjänkielinen palvelu, joka tarjoaa yli 42 000 kuvaketta eri aiheista.

Infografiikka

• Vizualize on online-palvelu "About Me" -infografioiden luomiseen. Pohjimmiltaan luo graafisen ansioluettelon.
• Canva on yksinkertainen työkalu minkä tahansa mallin luomiseen. Voit suunnitella esityksen, julisteen, postauksen sosiaalisiin verkostoihin, kirjoja, kirjeitä, materiaaleja ja paljon muuta. Kaikki tehdään mallien pohjalta, teksti muuttuu. Mutta on olemassa monia malleja, joista valita.
• Helposti – infografioiden luominen malleihin perustuen. Sisäänrakennetun online-editorin avulla voit muuttaa suunnittelua, sijoittaa lisäelementtejä ja muuttaa tekstiä.
• Infogram on online-palvelu infografioiden ja interaktiivisten kaavioiden luomiseen. Kaikki toiminnot eivät ole käytettävissä, sinun on ostettava tili.
• Visage on yksinkertainen työkalu minkä tahansa visuaalisen sisällön luomiseen (kaaviot, infografiat, blogikuvat jne.). Paljon malleja, yksinkertainen editori. Jotkut ominaisuudet ovat maksullisia.
• Gliffy on verkkopalvelu kaavioiden luomiseen. Editori toimii Microsoft Vision periaatteella.
• Visme on online-työkalu esitysten ja infografioiden luomiseen. Yli 1000 mallia. Editorin avulla voit lisätä tekstiä (otsikoita, luetteloita, lainausmerkkejä ja tavallista), animoitua tekstiä ja widgetejä. Ilmaisella tilillä voit ladata sen JPG-tiedostona.
• Piktochart - Luo korkealaatuista grafiikkaa - esityksiä, infografioita tai painettuja materiaaleja. Lataa erikokoisia PNG-, JPG-tiedostoja.
• Drawio on kätevä verkkopalvelu kaavioiden luomiseen. Voit tallentaa dropboxiin ja vastaaviin palveluihin tai levylle.
• Venngage – helppo luoda infografioita, julisteita, raportteja, materiaaleja sosiaalisiin verkostoihin jne. Ilmaisessa versiossa se sisältää vain linkin julkaisuun. Sinun on maksettava lataamisesta.
• Cacoo on verkkopalvelu kaavioiden ja sivustokarttojen piirtämiseen. Ehkä paras ominaisuuksiltaan. Suuri määrä työkaluja ja malleja. Voit viedä PNG-, PDF-, SVG-, PPT- jne.
• Creately on online-kaaviopalvelu. Saatavilla vain julkaistavaksi. Lataus on maksullinen.
• Lucidchart on verkkopalvelu kaavioiden ja piirustusten luomiseen. On mahdollista tuoda Microsoft Visio -kaavio. Vienti PDF-, PNG- ja JPG-muotoon. Maksullisia toimintoja saatavilla.

värit

• Color Hunt – valikoima väriyhdistelmiä. Voit valita enintään neljä väriä. Valittavana on valmiita ratkaisuja.
• TinEye – analysoi sivuston ja näyttää luettelon resursseista, jotka käyttävät sivuston kuvaa.
• ColorZilla – voit luoda värejä ja liukuvärejä. Näyttää niille css-ominaisuudet.
• Adobe Color CC – luo väriteemoja.
• Colicious – paina välilyöntiä ja luo uusi väri.
• Colorscheme - värimallien valinta. Siitä on versio englanniksi ja venäjäksi. Voit valita sivuston värit. Siinä on hienosäätö ja värikoodi. Viime kädessä sen avulla voit tarkastella sivua valitussa värimaailmassa. Suurin etu on värien havaitseminen poikkeaman näkökulmasta. Sen avulla voit myös valita eri värimalleja. Tallentaa palettiin Gimp, CSS, PNG jne. Siinä on värinmuunnin värimallin muuntamista varten.
• Paletton on työkalu väriyhdistelmien luomiseen. Ei eroa Colorschemesta.
• Pictaculous – Analysoi PNG-, JPG- tai GIF-kuvan palettia. Lataa kuva ja hanki sarja kaikista siinä esiintyvistä väreistä.
• Hex Color Tool – värinvalintatyökalu. Säädä väriä liukusäätimillä ja voit valita kirkkauden. Valittu väri tallennetaan sitten. Voit valita paletin.
• (Un)clrd on selainlaajennus, joka poistaa kaikki värit ja jättää sivuston mustavalkoiseksi.
• BrandColors - suurin kokoelma virallisia merkkivärikoodeja. Valitse tuotemerkki ja lataa sen värien nimet, mukaan lukien css-tiedosto.
• Colortyper - värivalikoima epätavallisesta kulmasta. Näytöllä näkyy monivärisiä symboleja, jotka leikkaavat toisiaan. Risteyksen tulos on uusi väri. Näyttää mielenkiintoiselta.

Inspiraatiota

• Dribbble – suurin suunnittelijayhteisö. Työ, yhteisö, viestintä - täältä löytyy mitä tahansa.
• Freebble - Dribbblen malleja ja malleja. Jotkut asiat voidaan ladata ilmaiseksi, jotkut voidaan ostaa. Löydät malleja CMS:lle, suunnittelijoille, kuvakkeille, malleille, suunniteltuja verkkosivustomalleja ja paljon muuta.
• Muzli - Inspiraatiota päivittäiseen suunnitteluun. Resurssi suunnittelijoille, jossa on esimerkkejä epätavallisimmista teoksista.
• Awwwards - suunnittelijoiden paras kehitys. Järjestetty yhteisöäänestyssivustoksi. Päivän, kuukauden, vuoden jne. sivusto on valittu Suuri määrä malleja, videoita, kehitystä.
• Design You Trust on suunnittelijoiden yhteisö, joka jakaa uusimmat trendit, uutiset, portfoliot, mallit ja luovat ilmoitukset.
• Todella hyvät sähköpostit – Valtava kokoelma hyvin suunniteltuja sähköposteja. Valitse malli ja hanki sen html-, css- ja js-koodi. Voit muuttaa tekstiä, kuvia jne.
• Fubiz – julkaisuja muotoilun ja luovuuden alalta. Löydät valokuvia, kuvioita, grafiikkaa, videoita jne. Kaikki on jaettu luokkiin.
• Designspiration on kokoelma Pinterest-tyylisiä malleja. Valtava määrä ideoita ja esimerkkejä - typografia, logot, kirjaimet ja paljon muuta.
• Behance on kokoelma ammattilaisten portfolioita. Voit jättää työpaikan tai ansioluettelon.
• Mobile-patterns – iOS- ja Android-kuvakaappauskirjasto. Kaikki on jaettu osiin. Voit löytää monia ideoita.
• One Page Love on galleria parhaista web-sivumalleista. Voit ostaa malleja ja teemoja. Ilmaisiakin löytyy.
• Uispace on resurssi suunnittelijoille. Voit ladata psd:n, luonnoksen, fontit, mallit jne. ilmaiseksi.

Graafiset editorit

• DAZ 3D - 3D-mallinnus. Rekisteröidy ja lataa työpöytäsovellus.
• Gimp on Photoshopin ilmainen analogi. Voit mukauttaa modulaarista ruudukkoa, luoda oppaita, työskennellä tasojen kanssa, lisätä tehosteita jne. Se on hyvä ilmainen korvaava Photoshop. Se on laajennettavissa - voit ladata lisälaajennuksia.
• Blender - 3D-mallinnus, animaatio, renderöinti, ääni, video. Voit luoda pelejä. Nopeasti kasvava editori, erittäin suosittu.
• Aviary on online-valokuvien muokkauspalvelu. Monet vaihtoehdot, kuten punasilmäisyyden tehoste, koon muuttaminen jne.
• Pixlr on online-valokuvaeditori ja erillinen grafiikkaeditori. Viimeinen näyttää Photoshopilta. Tallentaa levylle.
• BeFunky on online-valokuvien muokkauspalvelu. Tehosteet, kehykset, grafiikat, retusointi ja paljon muuta. Siellä on venäjänkielinen käyttöliittymä.
• Inkscape on täydellinen avoimen lähdekoodin vektorigrafiikkaeditori. Tukee SVG-muodon ominaisuuksia - muotojen, ääriviivojen, tekstin, rasterigrafiikan vektorisoinnin jne. työskentelyä. Vektorikuvien käsittelyn lisäksi sen avulla voit luoda verkkosivustomallin ja leikata sen - modulaarinen ruudukko on läsnä. Voit piirtää taustoja, bannereita, vektorilogoja jne.
• IconEdit2 on hyvin yksinkertainen ohjelma kuvakkeiden piirtämiseen. On suodattimet. Voit viedä kuvan Androidille ja Applelle. Voit säätää värisyvyyttä, kiertää ja säätää kuvaketta. Tukee läpikuultavuutta, useita kuvia ICO-tiedostoa kohden ja antialiasointia kaikissa piirustustyökaluissa.
• Falco GIF Animator on ohjelma kehys-animaatioiden ja animoitujen kuvakkeiden luomiseen. Voit ladata resurssista monia erilaisia ​​ohjelmia.
• Krita on ammattimainen avoimen lähdekoodin työpöytäeditori. Saatavilla eri käyttöjärjestelmille.
• Boxy-SVG on vektorigrafiikkaeditori, joka on samanlainen kuin Adobe Illustrator, Sketch ja Inkscape.
• Photopos on monikäyttöinen ohjelma, jossa on valokuvaeditorin, graafisen editorin ja tietokonegrafiikan luomiseen tarkoitettu sovellus.
• 5Dfly on ilmainen eränkäsittelysovellus. Osaa luoda diaesityksiä PowerPointin avulla. Voit ladata PDF-muuntimen erikseen.
• PaintStar on ilmainen kuvankäsittelyohjelma. Käyttöliittymä on hyvin samanlainen kuin Paint, mutta siinä on enemmän vaihtoehtoja. Esimerkiksi kerrokset.
• PhotoScape on yksinkertainen kuvankäsittelyohjelma. Siinä on toimintoja kirkkauden ja värin säätämiseen, valkotasapainoon, taustavalon korjaukseen, kehyksiin, ilmapalloihin, mosaiikkitilaan, tekstin lisäämiseen, kuvien piirtämiseen, rajaamiseen, suodattimiin, punasilmäisyyden poistoon, väritykseen, siveltimeen, kloonileimaan, tehostesiveltimeen jne.

Hei kaikki! Tänään, osana web-suunnittelua, haluan puhua fonteista, joita tulisi käyttää web-sivustoa kehitettäessä.

Yleensä kaikki eivät ajattele, mitä fontteja sivuston sisältöosassa tulisi käyttää. Kauniiden fonttien valitseminen verkkosivustolle on suunnittelun kehittämisen tärkein osa. Koska sivuston tietojen luettavuus riippuu tästä osasta, ja kuten tiedämme, tämä on tärkein asia sivustolla. Tästä syystä tämä asia on otettava erittäin vakavasti.

Mutta voit käyttää verkkosivuston suunnittelussa vain fontteja, jotka ovat tulevien sivuston vierailijoiden käytettävissä. Tällä varmistetaan, että sivut näkyvät oikein kaikille käyttäjille eri käyttöjärjestelmillä ja selaimilla. Muuten, jos käytät epätyypillisiä kirjasimia, useimmat kävijät näkevät kaiken eri tavalla ja useimmissa tapauksissa rumaalla tavalla. Tästä syystä on suositeltavaa käyttää alla lueteltuja vakiofontteja. Fonttiluettelo sisältää kirjasimet, jotka on asennettu käyttöjärjestelmään Windows XP tai uudempi.

Tässä artikkelissa en ota huomioon muiden käyttöjärjestelmien kirjasimia. Kokeneen taittosuunnittelijan tulee osata fonttien vertailua eri käyttöjärjestelmissä, ja taiton aikana hän kirjoittaa tämän kohdan CSS-tyyleillä.

Periaatteessa suunnittelun sisältöosaa kehitettäessä käytetään kahdenlaisia ​​fontteja:

• serif-fontit
• sans serif -fontit

Serif-fontit- (englanniksi serif - serif) fontit, joiden tyyli alkaa ja päättyy viivoin. Esimerkiksi Times New Roman.

Sans serif fontit(katkotut fontit) - (englanniksi sans-serif - sans serif) fontit tiukoilla, suorilla viivoilla ilman serifejä. Esimerkiksi Arial.

Alla näet kuvakaappauksen serif- ja sans serif -fonteista.

Fontit web-suunnitteluun:

• Arial
• Arial musta
• Arial Kapea
• Kirja Antiqua
• Vuosisadan gootti
• Comic Sans MS
• Kuriiri Uusi
• Franklin Gothic Medium
• Georgia
• Vaikutus
• Lucida konsoli
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotyyppi
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Nauhat (erilaiset symbolit ja merkit)
• Siivet (eri symbolit ja merkit)

Haluaisin myös huomauttaa, että useissa kirjasimissa ei ole kursiivia, ne käyttävät vinoa, mikä tekee tekstistä vaikeasti luettavan.

Windowsin vakiofonteista, joissa ei ole kursiivia:

• Arial musta
• Comic Sans MS
• Franklin Gothic Medium
• Vaikutus
• Lucida konsoli
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Koska mainitsin fontit, joissa ei ole kursivoitua, haluaisin myös huomauttaa, että on olemassa fontteja, jotka ovat aluksi lihavoituja. Näistä syistä ei ole mitään järkeä käyttää tyylejä, jotka osoittavat lihavoitun fontin, koska tulos ei ole sitä mitä tarvitsemme.

On olemassa lukuisia tapoja löytää oikea fontti verkkosivustollesi. Voit esimerkiksi käyttää palveluita, joissa on valtavia kirjasinkirjastoja, jotka vaativat maksullisen tilauksen.

Jos sinulla on budjetti tai kokeilet pientä projektia, voit käyttää ilmaisia ​​verkkokirjasimia, jotka ovat julkisesti saatavilla. Oikean web-fontin löytäminen verkkosivustollesi voi olla aikaa vievää, joten esittelemme sinulle valikoiman niistä parhaita.

1. Montserrat

Typografian kehittyessä se poistuu vanhoista kaupunkijulisteista ja kylteistä. Tämän fontin luoja yritti säilyttää Buenos Airesin kaduilla näkemiensa kaupunkijulisteiden typografian kauneuden.

2. Abril Fatface

Abril Fatface on osa suurta kirjasinperhettä, joka sisältää 18 eri tarkoituksiin luotua tyyliä. Tällä kirjasimella on vahva ja tyylikäs läsnäolo, mikä tekee siitä loistavan ratkaisun katseenvangitsevien otsikoiden luomiseen. Se yhdistetään useimmiten Laton, Open Sansin ja Droid Sansin kanssa.

3. Playfair-näyttö

Merkittävä x-korkeus ja kirjainten pienet alaindeksit huomioon ottaen Playfair Display sopii myös otsikon kirjoittamiseen, varsinkin jos tilaa on vähän. Se sopii hyvin Georgian kanssa ja sitä käytetään usein Oswaldin, Laton ja Arvon kanssa.

4. GT Walsheim

Nykyään monissa blogeissa käytetty GT Walsheim edustaa geometristä sans serifs -järjestelmää ja kuuluu Grilli Type -perheeseen. Sinun on maksettava täydestä kirjasimesta, mutta Grilli Type tarjoaa ilmaisen GT Walsheimin kokeiluversion.

5. Merriweather

Jos näytöllä luettavuus on projektisi prioriteetti, tutustu Merriweatheriin, joka on luotu tätä tarkoitusta varten. Lisäksi tätä fonttia parannetaan jatkuvasti.

6. Josephine Sans

Josefin Sans on saanut inspiraationsa ruotsalaisesta vintage-suunnittelusta, ja siinä on elegantti, geometrinen estetiikka.

7. Gravitas One

Gravitas One perustuu "UK fat face", rohkeaan mainosfonttiin, joka ilmestyi teollisen vallankumouksen aikana Englannissa. Tämä fontti näyttää hyvältä keskikokoisessa ja suuressa mittakaavassa ja sopii otsikoille, otsikoille ja välilehdille.

8. Jura

Tämän fontin kirjaimet toistavat Kaya-li-kirjaimen muotoja. Se sisältää myös kyrillisiä ja kreikkalaisia ​​aakkosia. Sitä on saatavana kevyenä, normaalina, keskikokoisena ja lihavoituna.

9. Liiga Gothic

Alun perin Morris Fuller Bentonin American Type Founders Companylle vuonna 1903 suunnittelema League Gothic löysi uuden käytön päivityksen ja uusien merkkien lisäämisen myötä.

10. Vuono

Fjord on alun perin painetuille kirjoille luotu serif-fontti, joka sopii erityisen hyvin pitkän tekstin sovittamiseen pienimuotoiseen muotoon. Sillä voidaan luoda sivustolle suuri määrä tekstisisältöä, sillä fontilla on selkeä rakenne, näkyvät serifit ja pitkät, tyylikkäät päät ja jalat.

11. Amarantti

Amaranth-kirjasinperheessä on ei-viisto kursiivimuotoilu, jossa on vähän kontrastia ja havaittavia käyriä. Kaikki kolme Amaranth-tyyliä sopivat hyvin lähes minkä tahansa muun fontin kanssa. Voit pelata tällä fontilla - kokeile ja valitse paras.

12. Poly

Tämä keskikontrastinen fontti luotiin alun perin alkuperäiskansan Wayuunaiki-kielelle, joka vaatii leveitä kuvioita. Siinä on pienet varret ja suuri x-korkeus, mikä tekee siitä erityisen hyödyllisen pienissä koossa.

13. Gentium Basic

Tämä fontti luotiin monikieliseksi fontiksi, joka sisältää latinalaisia ​​ja kreikkalaisia ​​kirjaimia sekä kyrillistä ja edistyksellistä tukea Gentium Plus -versiossa. Gentium Basic ja Gentium Book Basic ovat saatavilla ilmaisena verkkoversiona, mutta ne on rajoitettu vain latinalaisiin aakkosiin.

14. Avaa Sans

Open Sans on humanistisen groteskin edustaja. Tämä fontti on erittäin luettava ja mukautuu sekä verkko- että mobiilikäyttöliittymiin. Se on vino fontti yksinkertaisella kirjaimetyylillä, jolle on ominaista neutraali, mutta riittävän miellyttävä ulkonäkö, jotta sitä voidaan käyttää moneen tarkoitukseen.

15. Ledger Säännöllinen

Se on monikäyttöinen fontti, jolla on suuri x-korkeus, voimakas värikontrasti ja hyvin määritellyt serifit, jotka parantavat tekstin luettavuutta. Tämä fontti näyttää hyvältä sekä painettuna että matalaresoluutioisella näytöllä.

16. Signika

Tämä ilmainen web-fontti edustaa sanaa sans serif. Matala kontrasti ja korkea x-korkeus antavat Signikalle hyvän näkyvyyden näytöllä. Laaja valikoima kuvakkeita sisältää symboleja, kuvakkeita ja nuolia.

17. Josefin Slab

Josefin Slab on luotu 1930-luvulle tyypillisen geometrisen kirjasimen kaanonien mukaan ja siihen on lisätty skandinaavisia piirteitä. Josefin Slab on laattakirjasimen ominaisuudet ja se muistuttaa kirjoituskonefonttia. Mielenkiintoista on, että sen x-korkeus on puolet ison kirjaimen korkeudesta.

18. Foorumi

Kuten nimestä voi päätellä, tämä on roomalainen fontti, joka sopii hyvin caps lock -otsikoille, mutta sopii myös tekstin näyttämiseen. Tämän fontin tyylikkäät mittasuhteet muistuttavat klassista arkkitehtuuria puolipyöreine kaareineen, vaakasuuntaisine reunuksineen ja pystypyoleineen.

Tikal Sans on nimetty yhdestä kuuluisimmista mayakaupungeista, ja siinä on piirteitä kuvioista, joita käytettiin Etelä-Amerikan sivilisaation kirjoittamisessa. Sen luoja valitsi suuren x-korkeuden, joka antaa fontille modernin ilmeen ja vaikuttaa suotuisasti sen luettavuuteen, ja laaja tyylivalikoima mahdollistaa sen käytön moniin eri tarkoituksiin.

20. Arvo

Tämä geometrinen laattafontti sopii sekä printtiin että verkkoon, ja se on saatavilla roomalaisella, kursivoitulla, roomalaisella lihavoitulla ja lihavoitu kursiivilla. Arvon alhainen kontrasti parantaa sen luettavuutta näytöllä.

21. Bevan

Bevan luotiin 1930-luvun perinteisen laattafontin perusteella. Kirjeet digitoitiin, niille annettiin uusi muoto ja optimoitiin verkkoversiota varten. Tämä on yksi harvoista erittäin lihavoituista fonteista, jotka sopivat verkkosivustoille.

22. Vanha standardi TT

Old Standard TT perustui Modern serif fonttiin, joka oli suosittu 1800-luvun lopulla ja 1900-luvun alussa ja sitten unohdettu pitkäksi aikaa. Tämä fontti sopii tyylin lisäämiseen tietyntyyppiseen sisältöön, kuten tieteelliseen tutkimukseen tai kreikaksi tai kyrilliseen tekstiin.

23. Creon

Ihanteellinen uutissivustoille ja blogeille, tämä serif-fontti jakaa myös levyfontin ominaisuudet, mutta sen tasapaino ja alhainen kontrasti tekevät Kreonista huomattavasti henkilökohtaisemman.

24. Droid Sans

Droid Sans on optimoitu maksimaalista luettavuutta varten jopa pienissä käyttöliittymissä, kuten matkapuhelimen näyttöjen valikoissa. Tämä on neutraali, ei-viisto fontti yksinkertaisilla, avoimilla kirjainmuodoilla.

25. Italiana

Tämän fontin luoja on saanut inspiraationsa klassisesta italialaisesta kalligrafiasta, joten kirjasin on erittäin hyödyllinen projekteissa, joissa sinun on lisättävä eleganssia. Italiana sopii myös uutisotsikoiden kirjoittamiseen sekä painetussa että sähköisessä muodossa.

26. Vollkorn

Tämä yksityiskohtainen, monipuolinen serif-fontti on erittäin suosittu. Sen selkeys ja lujuus välittävät luottamusta ja energiaa, mikä tekee fontista yhtä tehokkaan isommissa otsikoissa ja otsikoissa sekä suurissa määrissä tekstiä pienemmässä muodossa.

27. Näyttelijä

Tällä fontilla on erityisen suuri x-korkeus, joka vaatii melko paljon tilaa. Näyttelijällä on myös vanhanaikainen tyyli joillekin hahmoille, kuten numeroille 6 ja 9.

Humanistisen kirjasintyypin Garamond juuret juontavat juurensa 1500-luvulle, ja siitä on tullut todellinen typografinen ikoni, joka toimii usein perustana nykyaikaisten kirjasimien luomiselle, mukaan lukien EB Garamond.

31. Ubuntu

Ubuntu Grotesque luotiin web-tekstin mukauttamiseen sekä pöytäkoneilla että mobiililaitteilla. Käyttäjiä rohkaistaan ​​kokeilemaan tätä fonttia, muokkaamaan ja parantamaan sitä parhaaksi katsomallaan tavalla.

32. Rosario

Rosario on klassinen humanistinen sans serif, joka sopii täydellisesti tekstikappaleiden tyylittelyyn.

33. Roboto Slab

Roboto Slab on yksi Roboto-perheen fonteista. Lohkoversio on erityisen silmäänpistävä geometrisilla muodoillaan ja avoimilla kaarevilla. Se sopii yhtä lailla gadget-näytöille kuin tekstien painetuille versioille.

34. Oswald

Fontti on uusittu versio klassisesta Alternate Gothic sans serifistä. Oswald päivitettiin äskettäin useilla painoilla, laajennetulla merkistöllä ja paremmalla kerningillä.

35. umpikuja

Stalemate on tyylikäs käsinkirjoitettu fontti, jossa on vintage-tyyliä. Se sopii aksenttien luomiseen ja verkkosivustosi personointiin.

36. Crimson teksti

Tätä huolellisesti suunniteltua klassista suhteellista fonttia voidaan käyttää sekä suurten tekstimäärien näyttämiseen että otsikoiden kirjoittamiseen.