Er þetta gerð að hönnunin mín lítur út?

Ekkert getur eyðilagt hönnun eins og leturfræði sem passar ekki. Hvort sem það er of stórt (eða of lítið), er óviðeigandi tegundarskala stórt vandamál.

Það er vandamál fyrir fleiri hönnun en þú gætir hugsað. Of oft ertu að fara á vefsíðu þar sem gerðin er falleg á skjáborði, aðeins til að endurskoða síðar úr símanum og finna erfitt að lesa. Það gerist allan tímann.

Málið er að gerðin var ekki raunverulega minnkuð fyrir hvert tæki. Það er algerlega að forðast vandamál þegar þú telur leturstærð fyrir verkefni.

Hvað er skýringarmynd?

Sjónritunarskala encapsulates stærðir, rúm og hlutföll tegundaþátta miðað við annan í verkefnum. Þetta felur í sér allt frá meginmál texta stíl til fyrirsagnir, undirsagnir, texta og önnur textareikning.

Stærðin hjálpar til við að ákvarða stærð og staðsetningu textaþáttanna í sambandi við hvert annað. Til vefhönnunar, einkum jafngildir mælikvarðinn samsvarar oft merkjum í CSS þínum (eins og h1, h2, h3, p, og svo framvegis).

Tegund mælikvarða hjálpar þér að skapa sátt og takt í hönnuninni. Það heldur þér líka úr stílfræðilegum vandræðum vegna þess að textaþættir eru í samræmi við CSS þætti þannig að hver hluti hönnunarinnar notar sömu þætti og samkvæmni.

Stærðin ætti að byggjast á stærð líkams texta. (Setjið alltaf leturgerð og stærð fyrir það fyrst). Þá byggðu mælikvarða um þennan aðalritgerð. Ekki viss hvar á að byrja? Google hefur solid tilmæli :

1. Notaðu grunn leturstærð 16 CSS punktar. Stilla stærð byggð á eiginleikum letrið sem notað er.
2. Notaðu stærðir miðað við grunnstærðina til að skilgreina leturstærðina.
3. Texti þarf lóðrétt rými milli stafa; Almennar tilmæli er að nota sjálfgefna línuhæð 1,2 einingar á vafranum.
4. Takmarkaðu fjölda leturgagna sem notuð eru og leturstærðina.

Búðu til sátt og takt

A tegund mælikvarða gerir meira en bara hjálpa notendum að fara í gegnum eintakið, það skapar sátt og hrynjandi fyrir flæði texta. Þetta er mikilvægt á hvaða tæki sem er.

Svo hvar byrjar þú?

UX Matters hefur nokkrar af bestu rannsóknum sem til eru um lágmark textastærð eftir tæki . Athugaðu að þetta eru lágmarksstærðir og ef líkamstextastærðir halda áfram að aukast (eins og línubil), ættir þú að hafa í huga að stærri punktastærðir. Steven Hoober mælir með að byrja að minnsta kosti 40 prósent stærri en ráðlagðir lágmarki. Ennfremur geta efnilegir innihaldsstíll farið allt að 80 prósent yfir lágmarki, en þú ættir að vera varkár með einstaklega stóru gerð eins og heilbrigður.

Þegar textastærð líkamans er stillt er hægt að ákvarða hvernig á að stilla stuðning texta þætti. Það er fínn list að því og augnprófið er oft gott staður til að byrja.

Það er nánast ekkert slíkt sem fyrirsögn sem er of stórt. Segðu hvað þú þarft að segja og stærð til að skala orðin í rúminu. Tvö lína fyrirsögn mun líða stærri en ein línu, jafnvel þótt textinn sé nákvæmlega sama stærð.

Auðveldasta leiðin til að hugsa um stigstærð fyrir fyrirsagnir og aðrar stærri prófunarþætti er að vinna í prósentum á grundvelli líkamsins. Þó að hver hönnuður hafi annað upphafspunkt, er 250 prósent stærri en líkaminn textinn góður ballpark fyrir fyrirsögnina; 150 prósent fyrir h2, 75 prósent fyrir h3 og 50 prósent fyrir þætti eins og tilvitnanir í blokkum. (Þetta er ekki regla, bara upphafspunktur.)

Þess vegna eru hæfileikar, fremur en settar stærðir, mikilvægir: Þegar þú hefur stilla stærð líkamstegundarinnar, stilla stigin stærðir í samræmi við það, óháð skjástærðinni. Sérhver tegund þáttur er miðað við líkamsgerðina.

Leiðbeiningar um einkenni og bil

Það eru nokkrar aðrar leiðbeiningar sem hönnuðir líta svo vel á þegar það kemur að því að slá á skjánum. Þegar um bil er að ræða, hefur einn af þumalputtareglum verið að líta á stafi á línu til að tryggja læsileika.

• Skrifborð og stór tæki: 60 til 75 stafir á línu
• Símar og lítil tæki: 35 til 40 stafir á línu

Athugaðu að læsileiki á minni skjái byggist á því að hafa færri stafi (stærri texti).

Sama hugmynd gildir einnig um bilið. Þú þarft meira pláss á milli textalína þegar skjástærðin er takmörkuð til að auðvelda notendum að lesa og skanna efni. Íhugaðu að bæta 25 prósent meira línubil á minni tæki en fyrir skrifborðsritgerð.

Viðbótar stærð og bilun hjálpar til við að létta þetta þéttan eða crunched tilfinningu sem notendur geta fundið þegar þeir reyna að lesa á minni tæki. Vegna þess að striga er lítill, er flæði lesenda og læsileiki mikilvægt að halda notendum að fletta.

Ábendingar til að byrja

Það eru margar leiðir til að búa til leturstærð og tryggja að textinn gerir ekki hönnunina líta vel út. Hvernig þú ferð um það fer líklega á huggunarstig þitt með kóða og þróun í viðbót við hönnunina.

Besta kosturinn er að nota móttækilegan hönnun með fjölmiðlafyrirspurnum. Þetta er hönnuður-verktaki valkostur sem mun veita mesta stjórn á texta upplýsingar. (Nánari upplýsingar eru að finna hér að neðan.)

Önnur leið er að hanna mismunandi útgáfur. Þó þetta sé nokkuð gamaldags hugtak, þá eru enn nokkur svæði með því að nota farsímaslóðir og skrifborðslóð fyrir vefsíður þeirra. Það er ekki mælt með í flestum tilfellum, en fyrir sumar vefsíður þar sem hönnunin er verulega mismunandi eða notendur upplifa mismunandi hluti getur það verið kostur.

The þægilegur kostur er að byrja með þema fyrir vefsíðuna þína. Gakktu úr skugga um að þú veljir fullan móttækilegan valkost. Þegar þú notar hágæða móttækilegt þema er mest af giskunni tekin út af því fyrir þig. Allt sem þú þarft að hugsa um er líkamstextastærðin. Gakktu úr skugga um að athuga allt til að ganga úr skugga um að farsímategundirnar uppfylli staðalinn þinn.

3 verkfæri til að búa til gerð mælikvarða

There ert a tala af verkfærum til að hjálpa þér að sjá nákvæmlega áhrif á sjónrænt leturstærð. Hér eru nokkrar af bestu og notendavæntum valkostum.

• Tegund Skala : Sláðu inn texta og spilaðu með valkostum eins og stærð, skala og letur rétt á skjánum; stigið CSS eða breyttu kóðanum beint frá tækinu;
• Modular Scale : Stærðin virkar eins og regla til að ákvarða stærðir fyrir gerð; þá hlaða niður niðurstöðum sem Sass eða JS tappi eða sjáðu þau á skjánum;
• Golden Ratio Typography Reiknivél : Tækið velur stærð, línuhæð, breidd og stafir á línuna með því að nota gullna hlutfallið

Niðurstaða

Réttur typographic mælikvarði mun halda hönnuninni þínum að horfa á snyrta og svelte. Það er aukið sátt sem notendur geta ekki skilið en stuðlar að heildaráreiðanleika og notagildi.

Það er líklegt að mælikvarðið sé slökkt ef hönnunin lítur bara ekki út. "Óviðeigandi stærð getur verið erfitt að ákvarða en er oft staður til að líta þegar eitthvað um hönnun er ójafnvægið. Spilaðu með nokkrum mismunandi valkostum fyrir mælikvarða áður en þú setur upp á eitthvað, og mundu að stefna núna er fyrir gerð sem er svolítið stærri en áður.

• ← Mæta Man Behind Comic Sans
• WeTransfer afhjúpar nýtt vörumerki og UI →