Tipografijos supratimas žiniatinklyje
„Web Design“ tipografijos tema yra svarbi, atsižvelgiant į visas vartotojų patirties sritis. Kiekviena svetainė turi teksto poreikį, ir yra gairių, kurių galite laikytis, jei norite sukurti išskirtinai nuostabius išdėstymus. Turi būti atsižvelgta į tinklelius, raides, šrifto aukštį, teksto tarpą, spalvų schemas ir kitas panašias savybes.
Šiame straipsnyje norėčiau įsilieti į žiniatinklio tipografijos sritį. Mes pažvelgsime į populiarios idėjos kuriant patikimus tinklalapio tekstus. Pakeliui aš pristatysiu keletą naudingos CSS3 savybės kuriuos dizaineriai dažnai pamiršta.
Bandžiau daugiau dėmesio skirti interneto teorijai ir ideologijoms. Tai suteikia daugiau dėmesio skaitmeniniam tekstui apskritai, o jūs, žiniatinklio dizaineris, galite pasirinkti, kokius stilius taikyti tam tikslui. Kontekstas visada yra raktas ir tai turite tinkamai nustatyti kiekvienam projektui, kurį dirbate. Apsvarstykite, kad šis vadovas yra informacinis paketas, kuriame yra daug šiuolaikinių žiniatinklio tendencijų iš tipografinių novatorių visame pasaulyje.
Išmatuokite savo straipsnius
Jums nereikės iškirpti kiemo lazdelės tokiam matavimui. Tiesą sakant, pagal tipografiją susijusi priemonė reiškia bet kurio taško plotį (horizontaliai). Tai ne visuomet aptariama tema, bet tai daro įtaką jūsų turinio skaitymui. Paprastai norėtumėte apriboti bet kurią vieną eilutę apie 75–85 simbolius (nebūtinai tarpai).
Dabar tai gali atrodyti kaip šiek tiek platesnis planas. Ypač jei jūsų dizainas yra skystas ir skirtas prisitaikyti, kai naudotojas iš naujo matuoja naršyklės langą. Visada galite nustatyti CSS maksimalus plotis nuosavybė pagrindiniame turinyje div. Apribojimų ir šrifto dydžių kodavimas mastelio keičiamuose vienetuose (procentais, ems), o ne pikseliuose, leis tokį lankstumą bet kuriame išdėstyme.
Nėra didžiausio matavimo vieneto, kuris būtų atsargus. Kaip rašyti turinį ir formuoti žodžius į sakinius yra daug svarbiau nei kiekvienos linijos plotis. Tačiau reikia nepamiršti, kad ilgesni sakiniai yra daug sunkiau skaitomi, palyginti su trumpesnėmis, glaustomis ataskaitomis.
Paaiškinimas
Projektuojant, kartu su jūsų pastraipos priemone, turėtumėte taip pat apsvarstyti pirmaujantis. Žodis tariamas “ledd-ing”, pvz., švino, naudojamo pieštukuose. Šis pavadinimas kilęs iš senesnių mechaninio sutvarkymo dienų, kai tarp teksto eilučių buvo įdėtos švino juostelės.
Vadovavimas vis dar yra labai svarbi interneto dizaino koncepcija ir eina kartu su pastraipos priemonėmis. Padidėjęs jūsų pastraipos plotis, turėtumėte taikyti vienodą padidėjimą iki vadovaujamos, arba tarpo tarp teksto eilučių. Dėl šios papildomos erdvės skaitymas yra daug lengviau matomas jūsų akyse.
Jei jums teko nugriebti per labai griežtą žaizdos tekstą, gali būti sunku sutelkti dėmesį į vieną eilutę. Jei taip yra, pabandykite padidinti CSS naudojimą linijos aukštis nuosavybė. Jūs visada norite daugiau vietos tarp teksto eilučių nei tarp žodžių. Priešingu atveju jūsų teksto blokai gali pasirodyti kaip laikraščio spausdinimas ir nebus labai patogūs, kad juos būtų galima perskaityti.
Tvirta technika yra taikyti daugiau erdvės, nei reikia iš pradžių ir, jei reikia, ją sumažinti. Ne visi tekstai yra sukurti lygiai, ir jums tikrai reikės skirtingų vidinių formatų, pvz., Drąsių žodžių, ankerinių nuorodų, pabraukimų ir kt..
Naudokite natūralius šrifto dydžius
Vis dar yra keletas svetainių, pasirenkančių laikytis mažesnių nei vidutinių šrifto dydžių. 11px-12px gali būti daug daugiau “standartinis profesionalas” verslo maketams. Tačiau šie dydžiai nepadeda daugumai lankytojų, kurie ieško konkrečios informacijos.
Paprastai žiniatinklio naršyklės pagal nutylėjimą yra 16 pikselių, jei netaikote jokių CSS taisyklių. Net ir tai gali būti laikoma šiek tiek maža, jei turite papildomą kambario erdvę, kad galėtumėte priimti didesnį tekstą. Didesni šrifto dydžiai tiesiog atrodo gražesni ir yra daug lengviau nugriauti santykiniams raktiniams žodžiams. Serif šriftai dažnai nerenkami kaip pastraipos medžiaga, bet vis tiek galite juos išeiti. Siūlome naudoti daug didesnius teksto dydžius serifiniais šriftais, kad pagerintumėte skaitymą ir atkreiptumėte dėmesį.
Atsakykite į vartotojo aplinką
Išbandę įvairias šriftų šeimas ir dydžius, turinio sritis turės atitinkamai prisitaikyti. Standartinis vienetas, su kuriuo aš sulaikau, yra EMS kadangi jie gali lengvai pakeisti dydį pagal turimą erdvę ir ekrano skiriamąją gebą. Tai optimizuoja našumą naudotojo gale, kuri yra svarbiausia.
Bet kai turinys yra toks lankstus, kad jūsų išdėstymas yra linkęs į klaidingą rezultatą. Jūsų poraštės ar šoninės juostos srities turinys kai kuriose naršyklėse gali baigtis nesubalansuotu arba subalansuotu. Arba gali būti, kad jūsų pagrindiniame tekste gali būti sunku susieti vaizdus ar kitas žiniasklaidos formas. Jei norite naudoti fiksuoto stiliaus išdėstymą, yra keletas kitų alternatyvų ems naudojimui, bet pabandykite abu sprendimus, kad pamatytumėte, kuris iš jų jums labiausiai patinka.
Atminkite, kad fiksuoto pločio ir pastraipų dydžiai bus užblokuoti daugelyje jūsų dizaino nustatymų. Tai puikiai tinka turiniui, kuriame yra daug stacionarių estetinių efektų - galvokite apie foninius vaizdus ar daug įrengtų šoninės juostos valdiklių. Taip pat paprastas procesas, kai kairėje stulpelyje yra pastatytas skysčio turinio plotas su fiksuotomis šoninėmis juostomis dešinėje.
Stilius pagrįstas kontekstu
Kai kurie kiti tikrai tvarkingi CSS gudrybės buvo paslėpti nuo pagrindinio dizaino. Konkrečiai egzistuoja tendencijos, nukopijuotos iš spausdinimo darbų, kurias galima taikyti tinkamu kontekstu.
Daugelis interneto dizainerių niekada net nenaudojo teksto įtraukos CSS savybės. Pateikiate vertę, kad būtų įtraukta pirmosios eilutės, kuriai taikoma ši taisyklė, pirmoji eilutė. Vienetai laikosi standartinių teksto parinkčių, pvz., Taškų, taškų, ems, procentų ... Tai tikrai nėra tendencija, kurią rasite daugelyje dienoraščių. Bet tai suteikia gražią puslapio ritmą skaitant didelius teksto blokus.
Yra ir kito tipo CSS selektorius, žinomas kaip a pseudo elementas. Tai gali būti nukreipta į konkrečią bet kurio turinio parinkiklio dalį. CSS3: pirmosios raidės pseudo selektorius puikiai tinka kuriant išgalvotus stilius svarbiose dalyse. Jūs galite džiaugtis kiekvienos pastraipos atidarymo laišku, panašiu į gana pasakos knygą, naudodami drąsų, kursyvų arba netgi keičiant šriftą. Patikrinkite šį gražų lašų dangų pavyzdį, kuriame yra keletas papildomų CSS kodų, kuriuos galite naudoti.
Žaidžia su tarpo tarpais
Aš tikiu, kad daugelis iš mūsų išgirdo terminą „stebėjimas“, kol dar niekada nesuprato, kad tai yra ta pati mintis, kaip ir CSS raidės tarpai. Šios dvi sąvokos yra vienodos, susijusios su spausdinimu ir skaitmenine tipografija. Įrenginys susijęs su tarpu tarp raidžių bet kurioje teksto eilutėje. Tai tikrai tvarkingas efektas, taikomas antraštėms ir net kai kuriems mažesniems turinio blokams jūsų svetainėje.
Svarbu nesupainioti terminų „tarpai tarp raidžių“ ir „kerning“. Abu yra susiję su tipografija ir atstumu tarp raidžių. Tačiau branduolys konkrečiai nurodo atstumą tarp dviejų atskirų raidžių žodžio. Taikomas tarpas tarp raidžių visą elementą teksto, nesvarbu, ar tai būtų žodis ar paragrafas, ar antraštė ar inkaras. Turėkite tai omenyje, kai žaidžiate su naujomis stilių idėjomis.
Dažnai naudojasi keliais pikseliais / taškais tarpai tarp antraščių su visomis sostinėmis. Tai atskiria atskirus simbolius su papildoma erdve ir taip pat atrodo kaip labai apibrėžta “Antraštė” atrodo. Neigiami raidžių atstumai taip pat puikiai veikia teisingame kontekste. Aš paprastai laikytis mažesnių vienetų, galbūt -0.03em arba -0.1em.
Rašmenų derinimas ir suderinimas
Žiniatinklio tipografijos projektavimo koncepcijos, be abejo, yra meno forma, ne tiek daug mokslo. Yra gairių, kurias galite sekti, bet nėra jokių tvirtų taisyklių, su kuriomis jūs ribojate. Tai reiškia, kad turite didžiulę laisvę eksperimentuoti maišydami ir suderindami skirtingus šriftus, prie kurių turite prieigą.
Iki šiol populiariausias šriftų derinys apima serif / sans serif padalijimą antraštės ir pastraipos turiniui. Man patinka perjungti abu, bet dažniau antraštių skyriuose naudosiu serif šriftus. Papildomi ženklai ir kiekvienos raidės smūgiai leidžia jiems atrodyti labiau glostantis kaip dominuojantis puslapio tekstas.
Be to, sans-serif šriftai yra švaresni ir lengviau supjaustomi sakiniais. Tai nereiškia, kad serifiniai šriftai neveiks pastraipose. Iš tiesų yra daug puikių pavyzdžių! Tačiau mažai žinoma sąvoka „x-height“ yra labai svarbi skiriant šrifto sudėtingumą. Žvelgdami į keletą žodžių bazinę liniją, pasieksite, kaip tokie šriftai bus “tikti” tarpusavyje.
Taip pat verta paminėti erdvės svarbą tarp šių skirtingų elementų. Tikriausiai naudosite 2 arba 3 skirtingus antraštės stilius, todėl kiekvienas iš jų bus atvaizduojamas skirtingai. Aš linkiu laikyti savo h2 / h3 elementus šiek tiek arčiau šio straipsnio bloko, nes tai reiškia, kad tarp turinio yra ryšys.
Ši koreliacija ypač naudinga, kai jūs naudojate du visiškai skirtingus šriftus. Aš rekomenduoju ne daugiau kaip 3 skirtingus šriftų šeimus kiekvienam turiniui. Po pernelyg daug pritaikymų jūsų žodžiai rodomi kartu, o visas puslapis pasirodo kaip netinkamų šriftų priėmimas.
Išvada
Aš tikiuosi, kad šios sąvokos šiek tiek apžvelgs sudėtingą skaitmeninio tipografijos temą. Gali būti sunku patekti į darbą kaip dizaineris, ypač jei visa tema yra svetima. Bet tęskite mokymąsi ir būtinai praktikuokite visą krūva!
Kitą savaitę: Būkite sureguliuoti, kaip mes pažvelgsime į kai kuriuos naudingi įrankiai ir ištekliai už geresnę žiniatinklio tipografiją.
Daugiau…
Čia yra daugiau su spausdinimu susijusių įrašų:
- „Web Designs“ su gražia tipografija
- Geresnė šiuolaikinių svetainių tipografija
- Trumpas tipografijos vadovas: išmokti ir įkvėpti
