Tipogrāfijas izpratne tīmeklī
Web dizainā tipogrāfijas temats ir svarīgs, apsverot visas lietotāju pieredzes jomas. Katrai tīmekļa vietnei ir vajadzīgs teksts, un ir vadlīnijas, kuras varat sekot, lai izveidotu ārkārtīgi satriecošus izkārtojumus. Jāņem vērā režģi, burti, burtu augstums, teksta atstatums, krāsu shēmas un citas līdzīgas īpašības.
Šajā rakstā es gribētu ienirt tīmekļa tipogrāfijas sfērā. Mēs izpētīsim populāras idejas par ticamu tīmekļa lapu tekstu izstrādi. Pa ceļam es iepazīstināšu ar dažiem noderīgas CSS3 īpašības ko dizaineri bieži aizmirst.
Es esmu centies vairāk koncentrēties uz teoriju un ideoloģijām tīmeklī. Tas dod plašāku uzmanību uz digitālo tekstu kopumā, un jūs, tīmekļa dizainers, varat izvēlēties, kādus stilus piemērot šim mērķim. Konteksts vienmēr ir galvenais, un tas ir pareizi jānosaka katram projektam, kurā strādājat. Apsveriet šo rokasgrāmatu par atsauces paketi, kas ir pilna ar mūsdienu tīmekļa tendencēm no tipogrāfiskajiem novatoriem visā pasaulē.
Izmēriet savus punktus
Šādam mērījumam nav nepieciešams izvilkt pagalmu nūju. Faktiski pasākums saistībā ar tipogrāfiju attiecas uz jebkura konkrētā punkta platumu (horizontāli) jūsu lapā. Tā nav tēma, kas vienmēr tiek apspriesta, bet tā ietekmē jūsu satura lasāmību. Kā vispārējs īkšķis jūs vēlaties ierobežot nevienu atsevišķu līniju aptuveni 75-85 rakstzīmju garumā (ne vienmēr iekļaujot atstarpes).
Tagad, tas var šķist mazliet stiepšanās dažiem plašākiem izkārtojumiem. Jo īpaši, ja jūsu dizains ir šķidrs un paredzēts pielāgot, kad lietotājs atkal izmēra pārlūkprogrammas logu. Jūs vienmēr varat iestatīt CSS maksimālais platums īpašums jūsu galvenajā saturā div. Ierobežojumu un fontu izmēru kodēšana mērogojamās vienībās (procentos, ems), nevis pikseļos ļaus šādu elastību veikt jebkurā izkārtojumā.
Nav maksimālas mērvienības, kas būtu piesardzīga. Kā jūs rakstāt saturu un veidot vārdus teikumos ir daudz svarīgāks par katras līnijas platumu. Bet paturiet prātā, ka ilgākus sodus ir daudz grūtāk lasīt, salīdzinot ar īsākiem, kodolīgiem paziņojumiem.
Vadošais paskaidrojums
Izstrādājot, kopā ar savu rindkopu, jums jāapsver arī ideja par vadošais. Vārds tiek izrunāts “ledd-ing”, piemēram, svina, ko izmanto zīmuļos. Šis nosaukums ir radies no vecākām dienām, kad tika uzliktas mehāniskas apdrukas, kurās starp teksta rindām ievietoja svina sloksnes.
Vadošais ir joprojām svarīgs web dizaina jēdziens un iet roku rokā ar rindkopu pasākumiem. Tā kā jūsu rindas platums palielinās, jums ir jāpiemēro vienāds palielinājums līdz vadošajam, vai atstarpe starp teksta rindām. Šī papildu telpa padara jūsu acīm daudz vieglāku lasīšanu.
Ja jums bija jāizlīmē ļoti cieši ievainots teksts, jums var būt grūti koncentrēties uz vienu līniju. Ja tas tā ir, mēģiniet palielināt CSS skaitu līnijas augstums īpašums. Jūs vienmēr vēlaties vairāk vietas starp teksta rindām nekā starp vārdiem. Pretējā gadījumā jūsu teksta bloki var parādīties kā avīžu drukāšana un nebūs ļoti lietotājam draudzīgi, lai tos izskalotu.
Cieta tehnika ir pielietot vairāk vietas, nekā sākotnēji bija nepieciešams, un vajadzības gadījumā to samazināt. Ne viss teksts tiek izveidots vienādi, un jums noteikti būs nepieciešami punkti ar atšķirīgu iekšējo formatējumu, piemēram, treknrakstā, enkura saites, pasvītrojumi utt..
Izmantot dabiskos fontus
Joprojām ir dažas vietnes, kas izvēlas pielīmēt mazākus fontu izmērus. 11px-12px var būt daudz vairāk “standarta profesionālis” biznesa izkārtojumiem. Taču šie izmēri nepalīdz vairākumam apmeklētāju, kas meklē konkrētu informāciju.
Parasti tīmekļa pārlūkprogrammas noklusējuma vērtība ir 16px, ja nepiemērojat CSS noteikumus. Pat tas var tikt uzskatīts par mazu mazu, ja jūsu izkārtojumā ir papildu telpa, lai pielāgotu lielāku tekstu. Lielāki fonta izmēri vienkārši izskatās patīkamāki un ir daudz vieglāk novilkt par relatīvajiem atslēgvārdiem. Serif fonti bieži netiek izvēlēti kā rindkopas materiāls, bet jūs joprojām varat tos atbrīvot. Lai uzlabotu lasāmību un pievērstu uzmanību, es ieteiktu izmantot daudz lielākus teksta lielumus serifiem balstītiem fontiem.
Atbildiet uz lietotāja vidi
Izmēģinot dažādas fontu grupas un izmērus, jūsu satura apgabalam būs jāpielāgojas. Standarta vienība, kurai es esmu, ir ems jo tie var viegli mainīt izmēru, pamatojoties uz pieejamo vietu un ekrāna izšķirtspēju. Tas optimizē veiktspēju lietotāja galā, kas ir vissvarīgākais.
Bet, ja jums ir tik elastīgs saturs, tas padara jūsu izkārtojumu pakļautu buggy iznākumam. Jūsu kājenes vai sānjoslas apgabala saturs dažās pārlūkprogrammās var beigties ar vāju vai līdzsvarotu. Vai arī jūsu galvenajā tekstā var būt sarežģīti attēlot attēlus vai citus mediju veidus. Ir nepieciešamas citas alternatīvas ems lietošanai, ja jums ir nepieciešams fiksēta stila izkārtojums - bet izmēģiniet abus risinājumus, lai redzētu, kurš jums patīk vislabāk.
Atcerieties, ka fiksētie platumi un rindu izmēri tiks bloķēti daudzos jūsu dizaina iestatījumos. Tas ir lieliski piemērots saturam, kas ietver daudz stacionāru estētisko efektu - domāju, ka fona attēli vai daudzas uzstādītas sānjoslas logrīki. Tas ir arī vienkāršs process, lai kreisajā kolonnā izveidotu šķidruma satura zonu ar fiksētām sānu joslām pa labi.
Stils, kas balstīts uz kontekstu
Daži citi patiesi gudri CSS triki ir paslēpti no galvenās dizaina. Konkrēti ir tendences, kas tiek kopētas no drukas darbiem, ko var piemērot atbilstošā kontekstā.
Daudzi tīmekļa dizaineri nekad pat nav izmantojuši teksta ievilkuma CSS īpašumu. Jūs sniedzat vērtību, lai ievadītu jebkuras rindkopas pirmo rindu, uz kuru attiecas šis noteikums. Vienības seko standarta teksta opcijām, piemēram, pikseļiem, punktiem, ems, procentiem ... Tas, protams, nav tendence, ko atradīsiet lielākajā daļā emuāru. Bet tas nodrošina skaistu lapas ritmu lasot caur lieliem teksta blokiem.
Ir arī cita veida CSS selektors, kas pazīstams kā a pseidoelements. Tas var attiekties uz konkrētu satura atlasītāja daļu. CSS3: pirmā burta pseido selektors ir ideāls, lai izveidotu iedomātā stilu svarīgos punktos. Jūs varat džeza augšu katras rindkopas atvēršanas vēstulē - līdzīgi kā diezgan stāsts - izmantojot treknrakstu, slīprakstu vai pat mainīt šriftu. Pārbaudiet šo skaisto piemēru pilienu vākiem, kas ietver dažus papildu CSS kodus, kurus varat izmantot.
Spēlējot ar atstarpi starp burtiem
Es esmu pārliecināts, ka daudzi no mums ir dzirdējuši terminu "izsekošana", pirms vēl nekad neesat sapratuši, ka tā ir tāda pati ideja kā CSS burtu atstarpes īpašumam. Šie divi jēdzieni ir vienādi, kas saistīti ar drukas un digitālo tipogrāfiju. Vienība attiecas uz atstarpi starp burtiem jebkurā teksta rindā. Tas ir patiešām veikls efekts, kas attiecas uz galvenēm un pat dažiem mazākiem satura blokiem jūsu vietnē.
Svarīgi nav sajaukt terminus "atstarpes ar burtiem". Abi ir saistīti ar tipogrāfiju un attālumu starp burtiem. Tomēr kerning īpaši atsaucas uz attālumu starp diviem atsevišķiem burtiem ar vārdu. Vēstules atstarpes īpašums attieksies uz viss elements teksta, vai tas ir vārds vai punkts vai galvenes vai enkura saite. Paturiet to prātā, kad spēlējat ar jaunām idejām par stilu.
Es bieži izmantoju dažus pikseļus / punktus no burtu atstarpēm galvenēs ar visiem galvaspilsētām. Tas sadala atsevišķas rakstzīmes ar dažām papildu telpām un arī parādās kā ļoti definēts “pozīcijā” izskatu. Negatīvie burtu atstatumi arī lieliski darbojas pareizajā kontekstā. Es parasti pieturējos pie mazākām vienībām, varbūt -0.03em vai -0.1em.
Tipogrāfiju apvienošana un saskaņošana
Tīmekļa tipogrāfijas dizaina koncepcijas noteikti ir mākslas veids, ne tik daudz zinātnes. Ir vadlīnijas, kuras jūs varat sekot, bet nav nekādu stingru noteikumu, ar kuriem jūs esat ierobežots. Tas nozīmē, ka jums ir milzīga brīvība eksperimentēt sajaukšanai un saskaņot dažādus fontus, kuriem ir piekļuve.
Līdz šim populārākā burtu kombinācija ietver serif / sans-serif sadalījumu galvenes un rindkopu saturam. Man patīk pārslēgties abos, bet biežāk galvenes sadaļās izmantošu serif fontus. Papildu marķējumi un insulti uz katra burta padara tos šķietami glaimojošākus, kā dominējošais lapas teksts.
Turklāt sans-serif fonti ir tīrāki un vieglāk skrūvējami kopā. Tas nozīmē, ka serif fonti nedarbosies punktos. Patiesībā ir daudz lielisku piemēru! Bet maz pazīstama koncepcija ar nosaukumu x-augstums ir ļoti svarīga, lai atšķirtu burtveidojuma sarežģītību. No aplūkojot pāris vārdu bāzes līniju, jūs saņemsiet informāciju par to, kā šādi fonti būs “iederēties” viens ar otru.
Ir arī vērts atzīmēt telpas nozīmīgumu starp šiem dažādajiem elementiem. Iespējams, ka izmantojat 2 vai 3 dažādus galvenes stilus, tāpēc katrs no tiem atdalīsies ar atšķirīgu izskatu. Man ir tendence saglabāt savus h2 / h3 elementus mazliet tuvāk sekojošam punktu blokam, jo tas nozīmē, ka starp saturu ir korelācija.
Šī korelācija ir īpaši noderīga, ja izmantojat divus pilnīgi atšķirīgus šriftus viena otrai blakus. Es ieteiktu ne vairāk kā 3 dažādas fontu grupas katram satura komplektam. Pēc pārāk daudzām pielāgošanām jūsu vārdi parādās sajaukti, un visa lapa iznāk, izskatoties kā nepareizu fonti..
Secinājums
Es ceru, ka šie jēdzieni izskaidros digitālā tipogrāfijas sarežģīto tematu. Patiešām var būt grūti patiešām iekļūt darbā kā dizainers, it īpaši, ja viss temats ir jums svešs. Bet turpiniet mācīties un pārliecinieties, ka jūs praktizējat visu ķekaru!
Nākamnedēļ: Palieciet noregulēts, jo mēs apskatīsim dažus noderīgi rīki un resursi labākai tīmekļa tipogrāfijai.
Vairāk…
Šeit ir vairāk ar tipogrāfiju saistītu ziņu:
- Tīmekļa dizainu izstāde ar skaistu tipogrāfiju
- Labāka tipogrāfija mūsdienu tīmekļa vietnēm
- Īsa pamācība tipogrāfijai: iemācīties un iedvesmot
