Kā izvēlēties pareizos fontus maziem ekrāniem

Pievilcīga un efektīva tipogrāfija ir veiksmīgas vietnes dizaina galvenā sastāvdaļa. Tas jo īpaši attiecas uz mobilajām ierīcēm, kur kļūdu rezerve ir tik maza, cik ekrāni tiek izmantoti šo vietņu apskatei.

kā padarīt mājās gatavotu audeklu

Ja jūsu fontu izvēle labi darbojas galddatorā, vai ir droši domāt, ka tas būs piemērots mobilajām ierīcēm? Daudzi tipogrāfijas stili un prakse, kas ir pilnīgi pieņemama lielākiem ekrāniem, sabojājas un rada problēmas mazākos mobilajos ekrānos.



Tas nozīmē, ka, lai mobilajiem apmeklētājiem sniegtu vislabāko iespējamo pieredzi, mums jāņem vērā vietnes mobilā tipogrāfija un jānodrošina, lai neatkarīgi no tā, kādu ierīci cilvēki izmanto, lai apmeklētu mūsu vietni, viņiem tiek parādīts pievilcīgs dizains, kuru ir viegli izmantot un patīkami Lasīt.



Īsāk sakot, tipogrāfija jāuzskata par svarīgu elementu, lai vietne būtu atsaucīga. Lai to paveiktu, mums vajadzētu labāk saprast, kā cilvēki lasa mobilajās ierīcēs, ievērojot mobilās tipogrāfijas paraugpraksi.

Kā lietotāji lasa mobilajā ierīcē

Pirksti rakstot klēpjdatorā un mobilajā ierīcē



Cilvēkiem ir daudz ciešākas attiecības ar mobilajām ierīcēm nekā ar biroja vai mājas datoru

Dodieties uz vietējo kafejnīcu vai restorānu vai gandrīz visur, kur bieži apmeklē ļoti dažādi cilvēki, izmantojot mobilās ierīces un klēpjdatorus. Novērojiet tos darbībā. Jūs pamanīsit ievērojamu attāluma atšķirību starp lietotāju un ierīci abos veidos.

Skatoties nedaudz tuvāk, viena no pirmajām lietām, ko pamanīsit, novērojot mobilos lasītājus, ir viņu tuvums ekrānam. Cilvēkiem ir daudz ciešākas attiecības ar mobilajām ierīcēm nekā ar biroja vai mājas datoru - attiecības, kas notiek plkst 12,6 collas nevis 20 līdz 23 collas no ekrāna .

Tā kā mobilās ierīces ekrāns ir mazāks, tas ir jātur tuvāk, lai efektīvi lasītu vārdus šajā ekrānā. Tas nozīmē, ka mobilo ierīču lietotāji fiziski tuvojas savai ierīcei un jūsu vietnes dizainam. Mobilās tipogrāfijas atslēga ir lasāmība - ja lietotājs to nevar lasīt, jūsu dizains nedarbojas.



Apgaismojums un kustība

Vēl viens faktors, kas jums jāievēro, skatoties, kā cilvēki lasa mobilajā ierīcē, ir ārējie apstākļi, kādos viņi to dara. Apgaismojums, kustība un interneta savienojums ir visi mainīgie. Apgaismojums ir īpaši grūts mainīgais, un tas tieši attiecas uz to, cik viegli skatītājs spēj nolasīt ekrānu.

Runājot par kustību, padomājiet par braukšanu pa šoseju un aiziešanu gar reklāmas stendiem. A, kaut arī jūs pārvietojaties un tipogrāfija joprojām ir, jēdziens ir tāds pats: piesaistiet un piesaistiet lasītāja uzmanību.

Interesantāk ir ņemt vērā vienādojumu fiziskās barjeras, ar kurām cilvēkiem jācīnās, lietojot mobilo ierīci, proti, rokas un paša ekrāna malas. Kad cilvēki izmanto galddatoru tiešsaistes satura lasīšanai, viņi pārvietojas, izmantojot peli vai ritināšanas paliktni. Mobilajos skārienekrānos pirksts darbojas kā navigācija, kas noteikti bloķē ekrāna daļu.

Slēpts no skata

Papildus navigācijai, pat veids, kā lietotāji tur ierīci, ir tendence aptvert galveno nekustamo īpašumu no viņu skatījuma. Runājot par šī ekrāna skatu, jo tas ir tik mazs, ka tajā vienlaikus var parādīt tikai tik daudz satura.

Tas nozīmē, ka lieli satura bloki, kurus varētu ērti parādīt lielākās pārbaudītās ierīcēs, mobilajā ierīcē tiek nogriezti, parādoties ārpus ierīces ekrāna robežām.

Runājot par lasīšanu mobilajās ierīcēs, netrūkst problēmu, ar kurām lasītājiem jācīnās. Šo izaicinājumu ņemšana vērā mūsu dizaina darbā ir pirmais solis labākai mobilajai tipogrāfijai.

Reaģējošās tīmekļa tipogrāfijas pamati

Vietne monitorā un mobilajās ierīcēs

Varat iestatīt vietni lielākiem ekrāniem izmantot vienu tipogrāfisko stilu komplektu un pēc tam pielāgot šos stilus mazākiem ekrāniem

Vietnes tipogrāfijai nav jābūt situācijai, kas piemērota visiem, pateicoties atsaucīgs tīmekļa dizains . Izmantojot atsaucīgu vietni, CSS multivides vaicājumus var izmantot, lai mainītu tīmekļa lapas vizuālos stilus, pamatojoties uz apmeklētāja ekrāna izmēru. Tas nozīmē, ka jūs varat iestatīt vietni lielākiem ekrāniem izmantot vienu tipogrāfisko stilu komplektu un pēc tam pielāgot šos stilus mazākiem ekrāniem.

Atšķirībā no drukātiem vai galddatoriem paredzētiem burtveidoliem, mobilā un atsaucīgā tipogrāfija netiek mērīta, izmantojot punktu sistēmu, drīzāk veidota, izmantojot pikseļus, emus vai remus. Kāpēc? Tā kā šīs vienības ir elastīgākas ar uz procentiem balstītu struktūru un vairāk pielāgojamas lietošanai vairākās ierīcēs. Mērķis šeit nav radīt konsekventu izskatu visos ekrāna izmēros, bet gan izveidot vienmērīgi pozitīvu lasīšanas pieredzi neatkarīgi no ekrāna izmēra.

Izstrādājot atsaucīgu tīmekļa tipogrāfiju, ir jāņem vērā dažas galvenās jomas, lai nodrošinātu lasāmību:

  • Burtveidols
  • CSS stili (izlīdzināšana, izmērs, līnijas garums utt.)
  • Ielādes laiks

Vēlamie mobilie burtveidoli

Fontiem, kurus izmantojat dizainā, būs svarīga loma cik viegli šī vietne būs lasāma mobilajās ierīcēs .

Pārāk sarežģītas un plānas burtu formas ir ne tikai grūti lasāmas, īpaši tām, kurām ir disleksija vai redzes traucējumi, bet arī mēdz sadalīties mazākos izmēros. Tas nozīmē, ka tad, kad fonti tiek mērogoti mobilajiem ekrāniem, rodas lasāmības problēmas, īpaši ierīcēs bez Retina ekrāniem.

Lai izvairītos no šīs problēmas, daudzi dizaineri mobilajām vietnēm un lietojumprogrammām ir izvēlējušies izmantot sans-serif fontus. Vienkāršas, tiešas sans-serifu burtu formas mēdz labāk mērogot un padarīt lasāmāku izklāstu plašākā ekrāna izmēru un izšķirtspējas diapazonā.

Dažādi fonti dažādiem ekrāniem?

Izlemjot par jūsu vietnē izmantojamajiem fontiem, apsveriet, vai vēlaties, lai jūsu vietne visos ekrāna izmēros izmantotu vienādus fontus, vai arī vēlaties mainīt fontu dažādiem ekrāniem.

Ja vēlaties izmantot tos pašus fontus, jums vajadzētu meklēt tos, kas mērogo gan lielus, gan mazus.

Ja vēlaties pēc vajadzības pielāgot fontu izvēli, lielākiem displejiem varat izmantot serifus vai vairāk iesaistītos fontus un pēc tam mainīt tos uz vienkāršākiem fontiem mazākiem ekrāniem (vienmēr pārbaudiet savu izvēli ar reāliem lietotājiem).

Tipogrāfiskie stili

Burts a uz monitora un mobilajām ierīcēm

Divi kritiskākie fontu apsvērumi ir lielums un platība

Izmantojot dažas CSS rindiņas, varat dramatiski mainīt vietnes teksta satura kopējo izskatu, tostarp izmēru, līnijas augstumu, līnijas garumu un daudz ko citu. Visiem šiem stiliem ir nozīme vietnes lasāmībā un tie ir svarīgi mobilo ierīču ekrāniem.

Tas nozīmē, ka divi viskritiskākie apsvērumi, izvēloties pareizo mobilo burtu, ir lielums un platība.

Izmērs

Tā kā dažādi fonti tiek atveidoti dažādos izmēros, mobilajiem ekrāniem nav jāizmanto noklusējuma fonta lielums Jebkurš mazāks par 16 pikseļiem kļūst grūti lasāms jebkuram ekrānam , nemaz nerunājot, radīs neskaidrības par to, kur atrodas teksta rindu sākums un beigas.

No otras puses, pārāk liels teksts radīs neveiklus pārtraukumus (tas pats attiecas arī uz defisēm, kuras mēs, tīmekļa dizaineri, reti izmantojam.) Mobilo izkārtojumu fontu lielumi parasti tiek iestatīti EM, nevis pikseļi lai fonta lielums būtu relatīvs, gatavs reaģēt uz dažādiem ekrāna parametriem

Kosmoss

Runājot par mazākiem ekrāniem - it īpaši vertikālām ierīcēm - telpa ir ārkārtīgi svarīga. Padomājiet par ievadā minētajiem apstākļiem, ar kuriem lietotāji cīnās: apgaismojums, ekrāna aizsegšana ar pirkstiem vai korpusiem utt. Ir ārkārtīgi svarīgi pievienot papildu atstarpi starp tekstu un ap to.

Mazie mobilo ierīču ekrāni jau apgrūtina pārāk cieši iestatītu teksta rindu nolasīšanu. Faktiski līnijas augstums, kas darbojas darbvirsmas ekrānos, var būt daudz grūtāk lasāms mobilajām ierīcēm.

Laba iesākuma vieta varētu būt diapazonā no 10 līdz 20 procentiem, taču kaut kas līdzīgs šim ir ļoti dinamisks, jo dažādiem fontiem būs nepieciešami atšķirīgi iestatījumi. Līnijas augstums vismaz 1,5 ir laba vieta, kur sākt, jo tas lasītājiem ļaus uztvert gaisīgu, tomēr lasāmu tekstu

Izkārtojums

Ne tikai izmērs un vieta, bet arī izkārtojums var ļoti ietekmēt vispārējo lasīšanas pieredzi mobilajās ierīcēs. Mobilo ierīču uzdevums attiecībā uz līnijas garumu ir pārāk īsas līnijas. Teksts ar ļoti mazu līniju garumu izslēdz normālu lasīšanas plūsmu.

Ideālā gadījumā līnijas garumam lielākiem ekrāniem jābūt aptuveni 65 vārdiem . Maza ekrāna ierīcēm šim skaitlim jābūt daudz mazākam. Laikraksti jau sen cenšas, lai šauras satura slejas būtu aptuveni 39 vārdu garas. Šis ir labs ceļvedis šaurām vietņu kolonnām mobilajās ierīcēs.

Izlīdzināšana

Lorem ipsum uz monitora un mobilajām ierīcēm

Mobilo ierīču ekrāniem bieži vien labākā izvēle ir šī noklusētā kreisā puse

Pēc noklusējuma tīmekļa lapas teksts ir izlīdzināts pa kreisi. Daudziem dizaineriem patīk pielāgot šo izlīdzinājumu, lai tas būtu pamatots vai pat pilnībā pamatots noteiktām to dizaina daļām. Dažos gadījumos šie stili var darboties ļoti labi, taču tie bieži sadalās mobilajā ierīcē.

Mobilo ierīču ekrāniem bieži vien labākā izvēle ir šī noklusētā kreisā puse. Kreisais pamatotais teksts - izņemot vispārējo virzienu, kurā cilvēki lasa - atvieglo sekošanu, jo teksta kreisā puse vienmēr ir konsekventa un viegli izsekojama.

Arī attaisnots teksts nav lieliska iespēja. Kreisā puse var būt konsekventa, taču, tā kā lielākajā daļā mobilo ierīču teksta kolonnu ir mazs platums, pilnībā pamatots teksts var radīt neparastas satura nepilnības vai upes, jo lapa cenšas ievietot garus vārdus teksta rindiņās.

Pat ja izmantojat dažādus pamatojumus lielākiem displejiem, iespējams, vēlēsities atgriezties kreisajā pusē, lai mobilo ierīču ekrāni būtu labāk lasāmi.

Veiktspēja un funkcionalitāte

Pēdējais faktors, kas jāņem vērā jūsu vietnes mobilajā tipogrāfijā, ir šīs vietnes vispārējā veiktspēja un funkcionalitāte, tas nozīmē cik ātri tas tiek ielādēts apmeklētājiem un kā tas faktiski darbojas .

Attiecībā uz veiktspēju mobilo ierīču lietotājiem tīklos ar neuzticamiem savienojumiem ielādes laiks būs lēnāks nekā kādam, kurš sēž mājās ar īpašu, liela joslas platuma interneta savienojumu. Ja jūsu vietnē tiek izmantots daudz tīmekļa fontu ar @ font-face, iespējams, ka esat negatīvi ietekmējot šīs vietnes lejupielādes veiktspēju .

Neatkarīgi no tā, vai jūs pievienojat fontu failus kopā ar citiem vietnes failiem vai arī izmantojat trešās puses tīmekļa fontu pakalpojumu, rezultāts ir tāds pats; fontus nepieciešams lejupielādēt, lai tos varētu izmantot vietnē.

Tīmekļa drošie fonti

Kontrastējiet to ar “tīmekļa drošajiem fontiem”, kas tiek ielādēti tieši no lietotāja ierīces un kuri tiek ielādēti nekavējoties.

Tīmeklim droši fonti, iespējams, nav tik seksīgi kā daudzas no mūsdienu pieejamajām fontu izvēlēm, taču veiktspējas uzlabojumus, ko šīs fontu izvēles var mums dot, nevajadzētu atlaist, īpaši attiecībā uz vietnēm mobilajām ierīcēm.

Ņemot vērā funkcionalitāti, padomājiet par visām iespējām, ko var veikt teksts mobilajā ierīcē un kuras nav pieejamas darbvirsmā: zvanīšana, saite, pirkšana, teksts utt. Ir svarīgi ņemt vērā īpašus apsvērumus, piemēram, teksta palielināšanu vai atdalīšanu, kad vārdu izstrāde noteiktu funkciju veikšanai.

Līdzņemšana: dizains, lai pieskartos

Daudzi no labas tipogrāfijas principiem, kas attiecas uz visiem dizaina nesējiem, attiecas arī uz mobilo tipogrāfiju. Jebkurā ekrānā obligāti jāizmanto burtveidoli, kurus ir viegli nolasīt ar pareizu atstarpi un skaidru burtu formu. Izmantojot mobilās vietnes, jums jāņem vērā arī šo ierīču unikālās īpašības, tas, kā cilvēki ar tām mijiedarbojas, un daudzveidīgā vide, kurā tās tiek izmantotas.

komandu dublēt slāni Photoshop

Apsverot tipogrāfiju mobilajā ierīcē, ņemiet vērā, ka lietotāji pieskaras šim tekstam ar pirkstiem, nevis atrodas rokas stiepiena attālumā no ekrāna. Vēl viens praktisks padoms būtu izņemt savus dizainus no Photoshop un redzēt, kā jūsu tipogrāfija iztur vairākus skatus.

Turklāt lielākā daļa tīmekļa platformu dizaineriem, piemēram, Webydo vai Abobe Muse , dodiet lietotājiem iespēju reaģēt uz pārtraukuma punktiem un atbilstošiem priekšskatījumiem, lai pārliecinātos, ka tipogrāfija satur vienu faktisko ierīci. Galu galā dizaina apskatei dažādās mobilajās ierīcēs nav īsta aizstājēja, lai lasītu un redzētu, kā tas reaģē uz mazāku ekrānu reālās pasaules apstākļos. Tādējādi vecmodīgs izskata un izskata jēdziens varētu būt tikai labākais rādītājs veiksmīgai mobilās tipogrāfijas noteikšanai.

Vārdi: Nurit Bahat

Nurit Bahat ir dizainers ar vairāk nekā 10 gadu pieredzi tīmekļa dizaina jomā. Kā Webydo Mākslas vadītājs Nurit izstrādāja platformas lietotāja saskarni / UX. Viņa ir Webydo vizuālās ietekmes būtība un vienmēr meklē iedvesmu, lai Webydo kopienā ienestu pārsteidzošas jaunas tēmas.

Patika tas? Izmēģiniet šos ...