Nettstedets skrift- Dette er et av hovedutformingsproblemene for nettstedet ditt. Riktig størrelse, farge og type skrift kan løse problemene med lesbarhet, skjønnhet og effektivitet til ressursen som helhet.

TOPP 10 av de beste og mest brukte fontene

Alle fontene nedenfor anses som grunnleggende, så de kan brukes på nettstedet selv uten å laste opp fontfilen (* .ttf) til katalogen med nettstedet

1. Tahoma

2. Verdana

3. Arial / Arial Black / Arial Narrow

4. Times New Roman

5. Palatino Linotype / Palatino

6. innvirkning

7. århundre gotikk

8. Helvetica

9. Georgia

10. Gill sans mt

I tillegg:

11. Courier ny

12. Calibri

13. Trebuchet MS

14. Lucida Sans Unicode

Flere regler for bruk av fonter på siden

1. Grunnlaget for lesbar tekst er overskrifter. De fungerer som en slags fyrtårn som lar leseren fokusere på ønsket del eller passasje, uten å irritere ham med flyten av generell informasjon. Prøv også å fremheve søkeordene dine!

Overskrift

Første ledd

Sekund ledd avsnitt

2. Nettstedet bør ha et generelt konsept, så prøv å ikke bruke mer enn 2-3 fonter per side. Nedenfor er CSS-koden

Brødtekst (font: 14px / 100 % Tahoma, Verdana, sans-serif)
14 piksler skriftstørrelse, 100% innrykk mellom linjer, Tahoma font brukt
3. Etter design skal teksten være lesbar - observer kontrasten (svart tekst på hvit bakgrunn, hvit på blå osv.). Prøv å ikke bruke lyse farger til noen av dem. Det finnes unntak, men det faller ikke inn under standard praksis.

4. Når du designer teksten din, prøv å ikke bruke mer enn 2-3 farger. Merk at de beste designene holder seg til 2-3 farger på det meste. Følg denne regelen og du

5. Teksten skal være lesbar! Prøv å lage avsnitt, innrykk for underavsnitt eller referanseinformasjon.

Teksten i første ledd. Lang og interessant.

Men teksten i andre ledd vil ikke smelte sammen med det andre, siden det vil være et innrykk mellom dem.

Takk for oppmerksomheten! Og lykke til med prosjektdesign!)

Sikkert mange hadde en situasjon da det var nødvendig å bestemme en ukjent font.

Det vil bidra til å løse dette problemet på en ganske enkel og original måte. Du laster ned (fra datamaskinen eller ved å oppgi en lenke) et bilde eller en logo som inneholder teksten, og siden viser en liste over fonter. Filer med en størrelse på ikke mer enn 360 x 275 piksler og følgende formater er egnet for opplasting: GIF, JPEG, TIFF, BMP. Noen ganger kan det være nødvendig å skrive inn de tilsvarende tegnene som vises på bildet, siden systemet selv ikke alltid er i stand til å identifisere dem nøyaktig.

For bedre gjenkjennelse av individuelle karakterer av systemet, anbefaler utviklerne å følge de følgende anbefalingene. Det bør huskes at jo mindre fonten er, desto større er sannsynligheten for feilidentifikasjon av teksten. Optimal for systemet er størrelsen på et enkelt tegn innenfor 100 piksler (en større størrelse øker søketiden for treff). Selvfølgelig, med henvisning til begrensningen av bildet etter bredde, vil bildet bare inneholde 3-4 tegn, men dette er nok til å definere lignende fonter. Tjenesten fungerer vellykket med fargebilder, men høy nøyaktighet kan kun oppnås på svart-hvitt-bilder.

Etter å ha lastet bildet gjenkjenner analysatoren tegnene.

Hvis du fortsatt ikke klarer å bestemme skrifttypen, kan du sende bildet til forumet, hvor de alltid vil hjelpe deg.

Det er en ulempe - det er ingen støtte for kyrilliske skrifter.

Det er en annen flott nettbasert skriftgjenkjenningstjeneste - (Hva font er)

Ved å laste opp et bilde til denne siden kan du finne ut hvilken font som ble brukt til å skrive teksten på. Databasen inneholder et tilstrekkelig antall latinske fonter, men det er ikke mange kyrilliske ennå. Siden tilbyr også å laste ned en rekke fonter gratis.

På Whatfontis-tjenesten er det tre måter å finne ut hva font er:

Vei 1

I det første vinduet laster du inn et grafisk bilde som inneholder inskripsjonen, klikk på Fortsett-knappen. Et vindu vises for å gjenkjenne bildet ditt og et felt for å skrive inn en bokstav som serveren var i stand til å gjenkjenne. Jo flere bokstaver du skriver inn, jo større er sjansen for å finne ønsket font.

Helt på slutten av siden vil det være tre søkealternativer:

• Vis bare gratis skrifter eller gratis alternative skrifter
  (Vis kun gratis skrifter eller alternative gratis skrifter)
• Vis bare kommersielle fonter eller kommersielle alternative fonter
  (Vis kun betalte skrifter eller alternative kommersielle skrifter)
• Vis alle fonter
  (Vis alle fonter)

Vei 2
Du kan ikke laste opp bildet som inneholder teksten med ønsket font, men spesifiser nettadressen til bildet med fonten.

Vei 3
Søk etter navn. Du kan skrive inn navnet på fonten og søke etter motstykker.

Hvis du allerede har lært det grunnleggende om typografi og vet hvor du finner de skriftene som passer for deg, er det på tide å bli kjent med klassifiseringen av fonter og deres typer. I dag er det et ganske stort antall av et bredt utvalg av fonter. De kan være både betalte og gratis.

Grunnleggende skriftgrupper

Det er så mange forskjellige fonter der ute nå. De har alle spesifikke egenskaper, takket være hvilke de kan deles inn i grupper:

Serif (serif)

Slike fonter brukes ofte i utskrift. Grunnen til dette er deres lesbarhet, noe som gjør dem svært populære. Denne typen skrift er attraktiv på grunn av de små linjene i enden av bokstavene. Han fikk sin søknad i bøker, ulike magasiner og aviser. I sin tur vil serif-fonter hjelpe nettstedet ditt til å oppnå en viss eleganse og gjøre utseendet til webdesignet ditt mer sofistikert.

Plateserif (rektangulære seriffer)

Å bruke denne typen fonter vil gi nettstedet ditt et unikt utseende og føles ganske stilig. Rektangulære seriffer er vanskelige å lese og anbefales derfor ikke for bruk i teksten du fyller ut i brødteksten på nettstedet. De brukes best når du styler overskrifter, noe som vil gi dem et mer interessant utseende og visuelt skille dem fra hoveddelen av teksten.

Manus

Disse skrifttypene brukes best for å komplementere de dekorative elementene i designene dine. Når du bruker fonter i ord, vær ekstra forsiktig når du bruker dem i overskriftene dine så vel som i brødteksten på nettstedet, siden de er ganske vanskelige for besøkende å lese.

Blackletter (gotisk)

Denne skriften har en dekorativ følelse. Hvis du vil legge til noe vintage til webdesignet ditt, er dette fonten du bør bruke. Disse skriftene brukes ofte av ulike restauranter på skiltene deres.

Sans serif (sans serif)

Bokstavene vil ikke ha seriffer. De er ganske like serif-fonter og vil se bra ut i teksten på ethvert nettsted eller i overskrifter. Vanligvis brukes de på en datamaskin, fordi de er mye mer praktiske å lese når skriften er liten. Disse fontene kan bidra til å gjøre prosjektet ditt enklere og mer minimalistisk i design. San serif er den desidert mest populære fonten som designere bruker for teksten til artikler som er lagt ut på nettsidene deres.

Håndskrift (håndskrevet skrift)

Med denne typen font vil teksten din se ut som om noen skrev den med egne hender. Det kan tjene som et godt dekorativt tillegg til et nettprosjekt, som igjen vil gjøre det unikt og uforlignelig. Det er best å bruke skrifttypen kun for å fremheve informasjonen du ønsker å trekke leserens oppmerksomhet til.

Dekorativ (dekorativ)

Disse skriftene inkluderer alle typer morsomme karakterer der ute og er ganske originale. En liten ulempe er at de er svært vanskelige å lese. Hvis du vil at nettprosjektet ditt skal ha en uvanlig tekstdesign, kan du trygt bruke dem.

Valg og justering av fonter

Variasjonen av skrifttyper er enorm, noe som betyr at det er enda flere kombinasjoner av kombinasjonene deres. Derfor tar det veldig lang tid å velge riktige skrifttyper. Dette er en ganske komplisert prosess der du alltid bør være basert på stilen til internettprosjektet ditt og preferansene til de besøkende.

For det første, i begynnelsen av denne prosessen, må du bestemme deg for valget av skrifttypen du vil bruke i teksten til brødteksten på nettstedet, den vil også bli den viktigste for hele prosjektet ditt. Ofte velger de en skrifttype med eller uten seriffer. Dette vil gi deg tillit til at nettstedet ditt vil være lesbart, og derfor bør søk etter fonter gjøres direkte i disse to gruppene.

Vær oppmerksom på at skriften du velger har en rekke stiler. Dette vil tillate deg å være mer fleksibel når du bruker dem i nettprosjektet ditt. En god måte å forstå om en bestemt skrift er riktig for deg, er å teste den på store blokker som overskrifter, avsnitt osv.

For det andre må du definitivt definere en annen font som du vil bruke i noen av overskriftene dine. Det er ingen klare regler for et slikt valg, men erfarne designere anbefaler å velge en skrifttype som vil avvike fra den du bruker for hoveddelen av nettstedet. På denne måten kan du gjøre titlene på nettstedet ditt mer attraktive for brukere. Det er bedre å bruke en litt modifisert skrift for brødteksten på nettstedet, for eksempel, for å gjøre den fet.

En god måte å style teksten på er å blande og matche en gruppe serif-overskriftsfonter med nettstedets hovedtekst, som vil være sans serif. Gjør dette eksperimentet, og du vil se at disse to gruppene samarbeider veldig harmonisk for å lage vakre typografidesign.

For det tredje, hvis du vil trekke oppmerksomheten til brukerne dine til noen spesifikke elementer i teksten og gjøre dem mer synlige, bør du legge til en annen font til designet. Hvis dette er tilfellet, eksperimenter med håndskrevne og dekorative fonter, siden det er disse som fanger oppmerksomheten til nettstedets besøkende.

Hvordan blande og bruke fonter i tekst

La oss ta en titt på flere prinsipper for å kombinere fonter som lar deg oppnå en vakker tekstdesign.

Siden må være lesbar

Når du velger en font for teksten til brødteksten på nettstedet eller overskriften, husk at det skal være lett å lese for brukeren. Selvfølgelig avhenger lesbarheten til noen fonter direkte av deres riktige innstillinger: du må sørge for at riktig skriftstørrelse, linjehøyde, farge er valgt. Før du bruker noen fonter i webdesignet ditt, test hvordan de vil se ut i forskjellige farger. Dermed kan du forstå om en bestemt farge passer for deg.

Det er et par unntak fra denne regelen som du alltid bør huske på. La oss for eksempel si at du utvikler et webdesign for et barns internettprosjekt, og at du kanskje vil bruke en dekorativ skrift som barna vil elske. I dette tilfellet, prøv å holde deg til en serif- og sans-serif-skrifttype. Denne regelen må følges fordi forskning har vist at disse skriftene er mye lettere å lese, så å velge dekorative skrifter ville ikke være det beste alternativet i dette tilfellet.

Ikke bruk mange forskjellige fonter

Når du designer et prosjekt, prøv å ikke bruke et stort antall fonter. Den optimale mengden å bruke er tre fonter. Det er flere grunner til dette:

Når du bruker skrifttjenester, vil hver skrift du legger til bidra til å øke nettstedets sidelasthastighet.

Tilstedeværelsen av flere skrifttyper på sidene på nettstedet distraherer besøkende, noe som gjør det vanskeligere for dem å fokusere oppmerksomheten på å lese innholdet.

Ved å ikke bruke mer enn tre fonter sparer du tid, men nettsiden ser flott ut.

Ikke bruk upassende kombinasjoner

Å kombinere flere fonter når du skriver sideoverskrifter eller kombinere mange forskjellige fonter er en veldig dårlig idé. Disse kombinasjonene er risikable og kan få deg i mye trøbbel.

Ved å se på skriftene på Typekit-netttjenesten kan du stille inn filtrene du trenger for å hjelpe deg med å finne ut hvilke fonter som er best for overskrifter eller avsnitt, noe som vil være et veldig nyttig verktøy under designutvikling.

Eksempler på å kombinere fonter

Som et eksempel kan du vurdere sidene til flere nettsteder der skriftene er velvalgte.

Overskrifter:
Sentinel (serif plate)

Avsnitt:
Gotham smal (sans-serif)

I disse eksemplene kan vi observere at overskriftene og underoverskriftene er i serif-skrift. Den fungerer som en kontrast til kroppen på nettstedet og er en enkel og lettlest skrifttype. Dette designet er konsekvent. Du kan oppnå mye av det bare ved å endre fargen og stilen.

Overskrifter og avsnitt:
Freight Text Pro (serif)

Hvile:
Freight Sans Pro (san-serif)

I dette eksemplet kan vi se hvordan bare én font brukes for overskrifter og avsnitt. Det ser ganske kult ut fordi overskriftene er fete og større.

Her kan vi også se én sans-serif-font, som forfatteren bruker på knappene på nettstedet og informasjon om meldinger.

Overskrifter:
PMN Caecilia (plateserif).

Avsnitt:
Gill Sans (sans-serif)

Designerne av dette nettstedet har laget et veldig sofistikert og vakkert design for nettressursen deres. Det er ingen irriterende og fet skrift her. De valgte en tynn skrift for overskriftene og en enkel skrift for brødteksten til nettstedet.

Begge skriftfamiliene som er tilstede på denne ressursen har en utmerket kombinasjon, som lar besøkende lese all teksten med letthet.

Overskrifter og avsnitt:
Skolar (serif)

Designerne av dette nettstedet bruker kun én serif-font. Men til tross for en slik ekstraordinær beslutning fra spesialister, har overskrifter og avsnitt en synlig forskjell mellom seg. Alt dette skyldes det faktum at spesifikke stiler, farger og skriftstørrelser brukes her.

Hei, Habr!

Det er allerede skrevet fjell med artikler som beskriver ulike aspekter ved å jobbe med nettfonter, mange arbeidseksempler har blitt samlet inn, men hver dag møter vi fortsatt en elementær misforståelse av hva nettfonter er. Ikke alle har tid til å google materiale om dette emnet, så jeg prøvde å gi svar på ofte stilte spørsmål. Dette materialet vil først og fremst være av interesse for de som ennå ikke har fordypet seg i vanskelighetene med skriftteknologi.

01. Hvorfor trenger vi i det hele tatt nettfonter, hvorfor ikke bruke standard?

Det første som kommer til tankene er at standardfonter er fryktelig kjedelige, og med deres hjelp er det vanskelig å gjøre noe originalt. Som regel bringer de fleste av dem tristhet og motløshet ikke bare til brukere, men også til webdesignere. I dette tilfellet er ikke-standard fonter mer uttrykksfulle, og dessuten er det en størrelsesorden flere av dem, så det er mye å velge mellom. Og også, skriften er en integrert del av merkevaren, så hvert selskap streber etter å bruke den mer aktivt, siden en slik teknisk mulighet har dukket opp.

Og det ville være mulig å fullstendig forlate standardfonter, spesielt siden mange mobile operativsystemer ikke støtter dem (for eksempel Arial, Taһoma, Verdana og Georgia). Men dessverre viste industrien, som har justert for 96 DPI-skjermer og Georgia Verdans i mange år, seg å ikke være helt klar for raske endringer, og på gamle Windows-operativsystemer er det fortsatt problemer med å vise ikke-standard fonter pga. til særegenhetene ved rasteriseringsmekanismen.

02. Hvordan velger jeg en god nettskrift?

Et skriftsnitt er ikke bare et digitalisert sett med bokstaver laget med en pensel på papir eller i en illustratør, det er også 98 % av etterbehandling og polering, hinting og testing på ulike medier og i forskjellige størrelser. En slik skrift ser bra ut, stilen er perfeksjonert, det vil ikke være noen problemer med den verken på skriveren eller på skjermen, den utstråler god kvalitet.

Men når du velger en font, er det ikke engang dette som betyr mye mer, men skriftens hensiktsmessighet og samsvar med bruksmåten og oppgavene som er tildelt den. Hvis du jobber med fonter, du må forstå hvordan det hele fungerer hvilke teknologier som brukes. Dette vil hjelpe deg å ikke ha i hodet en haug med uforståelige huskeregler, fanget i napp. For eksempel vet enhver skriver med respekt for seg selv hvorfor det er uønsket å bruke TrueType-fonter i offsettrykk, hvilke fonter som kan brukes som tekstfonter, og hvilke kun for overskrifter eller indekser. Hvis han ikke vet dette, må han trykke et stort opplag på nytt, og på jobb vil han møte konstante overraskelser og problemer. Det er utrolig hvorfor ingen stiller noen krav til webdesignere.

03. Hvordan gjengir nettlesere fonter?

Ganske ofte hørte jeg at nettlesere gjengir fonter selv, så de ser forskjellige ut overalt. Men faktisk er et spesielt grafikkundersystem til operativsystemet involvert i gjengivelse av fonter: i Windows er det GDI eller DirectWrite, og på OS X og iOS - Kjernetekst(og tidligere QuickDraw). Totalt er det 3 vanlige fontrasteriseringsmekanismer (gjengivelse): tofarget (svart og hvit) piksel, monokrom piksel (det kalles også ofte antialiasing eller vanlig anti-aliasing) og subpiksel. Subpixel bruker en funksjon på LCD- og plasmaskjermer der hver piksel er delt inn i 3 deler (rød, grønn og blå) for å øke den horisontale oppløsningen til det gjengitte bildet og forbedre klarheten.

Imidlertid velger nettlesere sin egen gjengivelsesmetode fra de som leveres av OS. For eksempel har GDI 3 gjengivelsesalternativer: svart/hvitt, vanlig kantutjevnelse og underpiksel Cleartype... Det særegne ved sistnevnte er at anti-aliasing bare skjer horisontalt, i samsvar med plasseringen av underpikslene. Dette er grunnen til at vi ofte ser fryktelige jager i horisontale og diagonale strøk når vi bruker den. Heldigvis begynte Microsoft sakte å forbedre mekanismen, og DirectWrite-teknologien erstattet GDI, der vertikal kantutjevnelse dukket opp. Sammenligne:

04. TTF eller OTF?

TrueType og PostScript var opprinnelig forskjellige skriftformater. TrueType bruker kvadratiske Bézier-kurver, mens PostScript bruker kubiske kurver, kjent for designere som jobber i Illustrator og Photoshop. I dag brukes begge metodene for å beskrive kurver som en del av det samme OpenType-formatet, med den eneste forskjellen at filer med TrueType har TTF-utvidelsen, og med PostScript-filer - OTF. Hver av teknologiene har sine egne antydningsegenskaper og spesifikke applikasjoner.

Se på bildet. Hvis en TrueType-font er mye mer lesbar i liten størrelse, men i stor størrelse ser vi karakteristiske tenner, så for en PostScript-font er alt det motsatte. Dette er fordi nettlesere velger forskjellige rasteriseringsmetoder for PS og TT. For PS brukte nettleseren den vanlige monokrome anti-aliasing, og TT ble behandlet av ClearType. Så det viser seg at TrueType er å foretrekke for tekstfonter, og PostScript er bedre for overskrifter og store etiketter.

Vi ser også at ikke alle nettlesere bruker DirectWrite ennå. Så det er fortsatt ikke i Google Chrome.

05. Hva annet påvirker skjermen?

Noen ganger er det bedre å angi rasteriseringsmetoden manuelt. For eksempel, i nettlesere med Webkit-motoren, kan du bruke CSS-egenskapen - webkit-font-smoothing og manuelt aktivere normal kantutjevnelse i stedet for utjevning av underpiksler, og omvendt. Det er også ikke-trivielle måter å få nettleseren til å endre rasteriseringsmetoden; Habré foreslo en gang å bruke et hack med tekstskygge.

Ikke glem skriftstørrelsen. Kontrastform, strekkontrast og lesbarhet kan variere mye fra størrelse til størrelse. Legg grafikkredigeringsprogrammet til side og se hvordan en nettfont ser ut i en nettleser, under kampforhold.

En annen måte å stryke ut ufullkommenhetene ved kantutjevnelse er med farge- og kontrastbehandling. For å redusere den kromatiske kontureffekten (gule og magenta konturer vises rundt kantene når du bruker ClearType), kan du prøve å redusere tonekontrasten ved å bringe bakgrunnsfargen nærmere tekstfargen. Ikke la deg rive med for mye, husk de synshemmede brukerne.

06. Trenger webfonter hint?

Hinting er spesielle instruksjoner som tett binder abstrakte skriftkurver til piksler på skjermen. De aller fleste fonter (inkludert kommersielle) er ikke antydet, fordi dette er en ganske tidkrevende og komplisert prosedyre. Hint gjøres annerledes for TrueType og PostScript. Hvis du tar en billig font, er OTF-formatet sikrere, fordi i TT har prosedyren holdt seg uendret siden svart-hvitt-rasteriseringens dager og er ikke helt tilstrekkelig, men for PS er prosedyren enklere, og forfatteren har mulighet til å gjøre automatisk hinting.

Skrift uten hint blir uskarpt når det rasteriseres, og høyden på bokstaver kan hoppe.

På den ene siden er antydende skrifttype ganske tydelig, kontrasterende og jevn, og på den andre siden er bokstavformene forvrengt avhengig av størrelsen, og avstanden kan avvike fra ekte. Bokstavene følger pikslene strengt.

I Windows ser vi kanskje den mest radikale tilnærmingen: slike populære fonter som Tahoma, Verdana, Arial og Georgia ble antydet spesifikt for GDI ClearType, og da DirectWrite dukket opp, måtte hovedskriftene i OS-settet antydes på nytt og oppdateres.

I motsetning til Microsoft, følger Apple den motsatte tilnærmingen, derfor bruker operativsystemene algoritmer som tillater mer eller mindre høykvalitets utdata av enhver skrift, og hinting tas ikke i betraktning i det hele tatt.

Svarer på spørsmålet: æraen med 300 DPI-skjermer nærmer seg raskt, og et stort antall mobile enheter har allerede en slik oppløsning, og det vil snart ikke være behov for antydninger i det hele tatt. Men siden Windows fortsatt er hintingavhengig og fokusert på skjermer med lav oppløsning, prøv å velge høykvalitets hinting eller standardfonter som tekstfonter, ellers blir teksten uleselig og vanskelig å lese.

07. @ font-face eller Cufon?

Hvor rart det enn kan høres ut, er det fortsatt folk som stiller seg dette spørsmålet. Det ser ut til at etter at nettlesere begynte å støtte @ font-face-attributtet, ser det ut til at alle andre font-innbyggingsteknologier (Cufon, sIFR, Flash) har blitt irrelevante. Men det gjenstår fortsatt en viss mening, for eksempel en måte å erstatte fonten med et bilde, når det ikke vises vektorkurver på nettstedet, men bare en utskrift, hvordan en skriver skriver den ut på et ark eller Photoshop viser en uredigerbar JPG. Dette er tillatt av mange vanlige (skrivebords) fontlisenser. Noen fontprodusenter (f.eks. Adobe) tillater å bygge inn (i programmer og på serveren) en skrivebordsfont hvis den forblir beskyttet og ikke kan lastes ned. Hvis du ikke har mulighet til å kjøpe en egen nettlisens, kan du bruke en passende sIFR når fonten er innebygd ved hjelp av flash-objekter. Ulempen er at det brukes Flash, som ikke støttes av alle enheter. Du kan også bruke Cufon-teknologi (Canvas brukes), hvis lisensen tillater det. Selvfølgelig vil manuset i dette tilfellet være tungvint, og tekstvalg fungerer ikke, men i en håpløs situasjon vil det gjøre det.

Men det er best å bruke @ font-face, det er både mer teknologisk avansert og mer praktisk, i tillegg er det samlet nok erfaring til å jobbe med det. Den eneste ulempen er at ikke alle produsenter tillater at skriftene deres brukes på nettet.

08. Hvilke formater skal skriftfilene være i?

Skrifter som er forberedt for innebygging (@font-face) på et nettsted i dag, bør være i flere formater samtidig:

TTF eller OTF- en fontfil som er kjent for oss, men lastet ned fra serveren mens du surfer på nettstedet;
WOFF- ubeskyttet kildearkiv OTF eller TTF, kanskje det viktigste formatet som de fleste populære nettlesere støtter, og filer i WOFF er vanligvis 2-2,5 ganger lettere enn originalen;
EOT- det implementerte TT OpenType-arkivet med beskyttelsesmekanismer er nødvendig for å støtte gamle Internet Explorer-nettlesere (fra IE8, i tillegg til TrueType-kurver, støttes også PostScript);
SVG- for å støtte Safari-nettleseren.

09. Er det mulig å konvertere webfonter?

Uansett hva du blir fortalt, kan du ikke bare konvertere filen og beholde den opprinnelige kvaliteten på skriften, spesielt hvis den opprinnelig var i OpenType-format. I prosessen er det en sjanse for å miste noen data som er innebygd i fontfilen (kompilerte instruksjoner, tilleggstegn, beregninger). Du vil legge merke til dette når filen er uventet "tynn" ved konvertering, spesielt ikke-kosher konvertering av TrueType til PostScript og omvendt.

I tillegg er konverteringsprosessen nesten alltid i strid med vilkårene i en lisens som forbyr modifikasjon. Enkelt sagt - dette er det samme tyveriet. Når du laster opp filer til konverteren, vær sikker på at den ikke går glipp av dem og vil gi en advarsel, fordi filen inneholder produsentens digitale signaturer og tilsvarende forbud mot modifikasjon.

10. Hvor mye bør webfonter veie?

Før du viser siden, må nettleseren laste ned skriftfilene fullstendig. Du har kanskje sett "font flash" (eller FOUT)-effekten, når standardskriftene til systemet blinker et kort øyeblikk i stedet for eksotiske fonter. Det er greit hvis TTF (OTF) passer i 100 kb, og WOFF (EOT) passer i 50 kb. Vurder alltid om du trenger å bruke ikke-standard fonter i det hele tatt, selv om du bruker det i 1 kort tittel, må du fortsatt laste ned hele fontfilen i sin helhet.
Jo mer perfeksjonisme i designet, jo mindre kan skriftfilene veie, og prøv å velge enkle former. I denne forstand er den ideelle formen en åpen geometrisk sans serif med liten kontrast. For å øke hastigheten på innlastingen av en skrift, kan det også være nyttig å inkludere den i stilarket ved hjelp av data: uri.

11. Hvor mange skrifttyper kan du bruke på nettet?

Fra en designers synspunkt er mange stiler kule. Faktisk, for overskriften - Fet, og der borte, for innlegget - ExtraLight, vil vi vanligvis presse unødvendige tekster og trykke dem inn i Kondensert Fet. Her er det - ekte rikdom og stilistisk mangfold. Men når all denne "rikdommen" begynner å bli overført til nettstedet, viser det seg at alt er fryktelig sakte. Og det er bedre å ikke en gang prøve å åpne et slikt nettsted fra en mobilenhet. Og ikke glem at hver skrifttype koster separate penger, og det er sannsynlig at kunden vil be deg om enten å finne et fontsynonym, eller å redusere antall stiler, bare for ikke å kjøpe hele den dyre skrifttypen. Det er normalt å bruke maksimalt 2-3 stiler av samme eller forskjellige skrifttyper.

12. Må jeg begrense tegnsettet?

Svaret på dette spørsmålet avhenger av hva slags nettsted det er og hvordan det vil bli brukt. Begrensninger kan være nyttige fordi det er mulig å redusere størrelsen på filene betydelig. Noen ganger, på grunn av uvitenhet, laster utviklere opp tunge skriftfiler med hele sett med tegn til nettstedet, og det er bra hvis det ikke er hieroglyfer der (merk at Arial Unicode-fonten som inneholder de fleste tegnene fra Unicode-tabellen veier 22 mb) .

For de som gjør engelskspråklige nettsteder den enkleste måten, trenger de ikke laste inn flere tegn i det hele tatt, de som er på Basic Latin (eller ASCII) er nok. Hvis du bare bruker en skrift for overskrifter på russisk + ispedd engelsk, vil ASCII-settene (Basic Latin) og 64 tegn i det russiske alfabetet være nok for deg, det er slett ikke nødvendig å laste inn det kyrilliske utvidede settet med 420 tegn. Det er en helt annen historie, hvis nettstedet ditt er flerspråklig, i dette tilfellet, for å unngå feil visning av tegn, bør du prøve å dekke alle språkene som brukes.

13. Kan fontkloner brukes?

Det hender at det enten er for dyrt eller umulig å kjøpe en original font, da vil det være hensiktsmessig å velge et fontsynonym (klone). Selvfølgelig bør man ikke forvente fantastisk kvalitet fra dem, selv om de er laget for eksempel av et anerkjent russisk selskap. Det er alt ille når du kommer over opuset til en litterær anonym forfatter som bestemte seg for å teste seg selv i et nytt felt, pass deg for slike fonter. Her er eksempler på kloner (originalen er vist i parentes): FreeSet (Frutiger), Pragmatica og Helios (Helvetica). Vær oppmerksom på at formen på bokstavene kan variere. Et stort antall kloner er i Paratype-fontsynonymkatalogen.

14. Hvordan tester jeg en font?

Designere, ikke bli vant til å se fonter bare gjennom Photoshop-vinduer, bilderedigerere bruker sine egne anti-aliasing-teknikker, og du kan bli lurt av et vakkert bilde. Det er mye mer nyttig å lære å teste og se dem i nettlesere. Hvis du har en demoside, sørg for å sørge for at alle slags artefakter og pigger ikke kommer ut under gjengivelsen. Det finnes også et slikt verktøy som Typecast, hvor du kan sjekke mange fonter, og deretter vise siden til klienten. For de som velger en ny font for et ferdiglagd nettsted - den uunnværlige tjenesten for deg Web Fonts Previewer, kan du teste hvilken som helst font på et live fungerende nettsted, som om du allerede har implementert det.

15. Jeg har en font på datamaskinen min, kan jeg bruke den på siden?

Først litt om tyveri. Jeg kjenner mange designere som har tusenvis av fonter på datamaskinene sine hvis opprinnelse er ukjent. Som regel lastet de bare ned fra Internett. Men av en eller annen grunn er det ingen som tror at å lage gode fonter tar måneder, og noen ganger år med seriøst arbeid! Men ikke bare av denne grunn kan du ikke bruke falske, det er ikke klart hvor skriftene er hentet fra, men fordi du kan møte alvorlige vanskeligheter på utviklingsstadiet.

Hvis du ønsker å bygge inn en font som følger med operativsystemet på siden, kan du bare gjøre dette ved å rastre eller bruke den i bilder. Hvis du virkelig trenger å bygge inn, må du kjøpe en separat lisens, akkurat som vanlige fonter (både Georgia og Tahoma er kommersielt tilgjengelig).

16. Hvordan kjøper jeg en webfont?

Når du "kjøper en font" er det nærmest å kjøpe programvare, når du får en lisens til å bruke den, ikke rettighetene til selve programfilen. Det viser seg at den lovlig kompilerte fontfilen er et program. Endringer og modifikasjoner, hvis det ikke er tillatt av lisensen, anses som brudd på opphavsretten.

En praktisk måte å kjøpe fonter på er gjennom fontkataloger (Fonts.com, MyFonts, Ascender, Typekit). Du kan se, sammenligne og velge en av de tilgjengelige brukstilfellene, betale med kort. For bedrifter vil det være enklest å kontakte produksjonsstudioet direkte eller sørge for kjøp av fonter til kunden.

Eller kanskje det er bedre å ikke bruke penger på type i det hele tatt? Det er tonnevis av flotte gratis fonter der ute som er like gode som de betalte!

17. Hva er lisensene?

Det finnes ulike typer skriftlisenser, og med inntoget av nettfonter har variasjonen bare økt. I det virkelige liv setter hvert selskap reglene for spillet selv, og en fontlisens kan inneholde funksjoner fra forskjellige andre. Vi vil være interessert i det typiske.

Den generelle kommersielle lisensen begrenser bruken på et spesifikt antall enheter og tillater distribusjon av verk laget ved hjelp av fonten. Dette kan være magasiner, aviser, brosjyrer, visittkort, rasterbilder av fonten – alt sammen kan du kalle dem utskrifter. Denne lisensen er ikke egnet for film, TV, web og innebygging i applikasjoner og programmer, slike rettigheter må løses inn separat.

Det finnes også spesifikke lisenser, for eksempel: en eksklusiv lisens. I dette tilfellet kjøper selskapet alle rettighetene fra fontdesignerne, og selv forfatteren av fonten har ikke rett til å bruke den hvor som helst. Det er spesielt overraskende når slike fonter er på torrenter, eller når noen tredjepartsdesignere bruker dem.

Gratis lisenser (offentlig domene) - forfatteren av skriften tillater gratis distribusjon, med betingelsen om å spesifisere navnet hans (Creative Commons) eller uten det (for eksempel OFL, GPL, Apache 2.0). Denne typen lisens tillater til og med kommersiell bruk annet enn salg og betalt distribusjon. Eksempler: PT Sans, Opensans, Droid. Fontmodifikasjon (GPL) er noen ganger tillatt, men modifikasjonen du oppretter vil automatisk arve den samme lisensen (det vil si at du også kan bli fork). Freedom forutsetter at den kan brukes på alle medier, inkl. og web.
Gratis for ikke-kommersiell bruk – det vil si at du kan bruke det når du ikke tjener penger på det. La oss si for trening, hobbyer og samfunnsprosjekter. Noen ganger tillater produsenter bruk av det for designere i håp om at designerens fornøyde klient da vil kjøpe en kommersiell versjon av fonten.

18. Hva er forskjellen mellom nettfontlisenser?

Nettlisensene er våre favoritter, de er enten et tillegg til hovedlisensen eller gis separat. Regulerer et spesielt tilfelle - bruken av fonter på nettsteder. Vanligvis er den viktigste begrensningen på antall sidevisninger. For eksempel 10 tusen per måned, 100 tusen eller 1 mill. Det vil si at jo flere som besøker siden din, jo mer betaler du for en lisens. Det er også ubegrensede muligheter når du betaler for en skrift 1 gang, men de er mange ganger dyrere. Sannsynligvis lurte du på om noen ser på antall visninger? Oftere enn ikke, nei. Men ikke glem at et stort antall tellere sporer trafikken til nettstedet ditt, og du kan miste lisensen, noe som vekker selgerens mistanke.

Den frittstående nettlisensen tillater heller ikke bruk på vanlige datamaskiner. Noen ganger utstedes en nettlisens gratis, det vil si at sammen med kjøp av en stasjonær font får du rett til å bruke nettversjonen. Men dette er fortsatt en sjeldenhet, de aller fleste produsenter krever en ekstra avgift.

Etter kjøpet mottar du spesielle filer som du legger inn på nettstedet (TTF, OTF, WOFF, EOT), og noen fonter tillater ikke å plassere disse filene på nettstedet i en ubeskyttet form, siden tredjeparter teoretisk sett kan få skriftfilene selv. Det tredje alternativet er å bruke en dedikert nettjeneste fra en fontprodusent, for eksempel Adobes Typekit, og betale en abonnementsavgift.

19. Hvor kan jeg få tak i gode nettfonter?

Google gratis fontkatalog
Fontsquirrel er en kjent webfontkonvertering og -katalog
Myfonts er en enorm fontbutikk med et praktisk betalingssystem
Fonts.com er hovedkonkurrenten til MyFonts
Typekit - en tjeneste for leie av fonter fra Adobe
Typecast er den nevnte butikken med en testtjeneste
P.S. En annen nyttig ressurs som Ilyaerin rådet til, WebFont.ru Funksjonalitet er viktigere enn form: design for leseren
Maria Doreuli. Lisensering. For å gjøre det klart
Tim Brown. Skriv gjengivelse på nettet
Tim Brown. CSS-egenskaper som påvirker typegjengivelse
Tim Brown. Typegjengivelse: operativsystemer
Tim Ahrens. En nærmere titt på skriftgjengivelse
Tim Ahrens (Typekit). En nærmere titt på TrueType-hint
Fordelene med OpenType / CFF fremfor TrueType

Ildar Kinyabulatov, webdesigner ADV / web-engineering

Fonten er viktig. Som luft som du ikke legger merke til mens alt er i orden. De fleste har ingen anelse om hva fonter heter eller hvordan de skiller seg (noe som er greit), men de har en umiskjennelig følelse av at noe er galt med nettstedet ditt hvis fonten du bruker ikke passer til prosjektet ditt.

Hva er skriftvekt

Skriftlesbarhet

Uansett hvilken skrift du velger, bør den lese godt. Spesielt hvis du bruker et bakgrunnsbilde. Hvis du setter en tynn skrifttype på et bilde med små detaljer, vil teksten ikke være lesbar. Vær alltid oppmerksom på dette.

Hva kan bli gjort? Bruk først et bilde som passer for bakgrunnen: med store, ensartede elementer. For det andre, demp bildet med et filter, det vil bli jevnere og teksten leses bedre. For det tredje er det mulig å øke metningen til en bestemt blokk ved å bruke "inline stilen". Dette betyr at du ikke setter innstillingene for hele siden, men kun for en del av teksten. Du må velge teksten og angi parameterne gjennom redigeringsprogrammet.

En stil som brukes på denne måten, på toppen av de globale innstillingene, vil alltid ha forrang. Derfor, hvis du plutselig endrer parametrene i nettstedinnstillingene, og endringene ikke er synlige, brukes "inline stilen" på dette stedet. For å fjerne den, må du velge teksten og klikke på "slett"-ikonet.

Eksempel 1: Teksten er lite lesbar

Eksempel 2: Teksten leser godt

Hvis emnet for valg av font interesserer deg, finn gode nettsteder i nærheten av prosjektet ditt og se hvilke fonter de bruker. What Font-nettleserutvidelsen vil hjelpe med å bestemme dette.

Du kan også sjekke ut Independent Typography Archive på http://fontsinuse.com/, en ressurs som samler inn og sorterer eksempler på nettsteder og trykte medier etter type font som brukes.