Typografiaon keskeinen elementti suunnittelussa, jota usein sivuutetaan. Oikean fontin valinnalla voi olla valtava vaikutus suunnittelusi havaintoihin ja luettavuuteen. Tässä artikkelissa opit, kuinka voit työskennellä tekstien ja typografian kanssa tehokkaasti AdobeXD:ssä. Saat tietää, kuinka löydät ja asennat fontteja ja käytät niitä optimaalisesti projektissasi.

Tärkeimmät havainnot

  • Voit saada fontteja Google Fontsista ja Adobe Fontsista.
  • Adobe XD:ssä on kaksi perus tekstityökalua: pisteteksti ja tekstikehys.
  • Tekstin koko ja riviväli ovat ratkaisevia luettavuuden kannalta.
  • Määritellyillä merkkimuodoilla säästät aikaa ja vaivannäköä tekstin muotoilussa.

Vaiheittainen opas

1. Fonttien löytäminen ja asennus

Ensiksi sinun on selvitettävä, mistä löydät parhaat fontit projektiisi. Loistava lähde on Google Fonts. Siirry sivustolle fonts.google.com. Siellä voit selata monia ilmaisia fonttiperheitä, jotka sopivat sekä verkkoon että printtiin.

Voit ladata fontin valitsemalla fonttiperheen ja napsauttamalla plus-symbolia. Kun olet valinnut haluamasi fontin, voit asentaa sen suoraan järjestelmääsi.

Tehokas tipografia Adobe XD: vaiheittainen opas

Vaihtoehtoisesti voit myös käyttää Adobe Fontsia. Siirry fonts.adobe.comja valitse sieltä fontit. Adobe Fonts on erityisen hyödyllinen, koska voit synkronoida fontit Creative Cloudisi, ilman että sinun tarvitsee asentaa niitä manuaalisesti.

2. Tekstikehysten ja pistetekstin luominen

Adobe XD:llä voit nyt aloittaa tekstin luomisen. Käytä pikanäppäintä T aktivoidaksesi tekstityökalun. Voit joko luoda tekstikentän napsauttamalla tai vetämällä luodaksesi tekstikehyksen.

Muista ero: Jos napsautat pistetekstikenttään, teksti syötetään yhdessä rivissä. Tekstikehyksessä teksti katkeaa automaattisesti seuraavalle riville, kun saatavilla oleva leveys saavutetaan.

Tehokas typografia Adobe XD:ssä - vaiheittainen opas

3. Tekstityylin ja -koon säätäminen

Kun olet jo syöttänyt hieman tekstiä, voit säätää fonttikokoa ja fontin leikkausta Adobe XD:n oikeassa paneelissa. Aseta fonttikoko noin 30 pikseliin ja valitse fontin leikkaus "Medium".

Voit tehdä tekstikentästä suuremman tai pienemmän vetämällä sitä vain suorakulmion kahvasta. Tärkeää on, että tekstikenttä on aina riittävän tilava näyttääksesi syötetyn tekstin.

4. Välimatkojen ja rivikorkeuden säätäminen

Typografinen suunnittelu vaatii tietyn määrän tarkkuutta, erityisesti välimatkojen osalta. Oikeassa paneelissa voit säätää merkkiväliä ja rivikorkeutta. Kokeile näitä arvoja varmistaaksesi, että teksti on hyvin luettavissa ja näyttää miellyttävältä.

Huomaa, että ohuet fontit saattavat vaatia suurempaa fonttikokoa luettavuuden takaamiseksi. Saatat tarvita hieman paksumman fontin, jos käytät pienempiä fonttikokoja.

Tehokas typografia Adobe XD:ssä - askel askeleelta -opas

5. Useita tekstityylejä määrittäminen

Voit määrittää erilaisia tekstityylejä otsikoille, alaotsikoille ja juoksutekstille. Luo esimerkiksi erilaisia tekstikenttiä kokoina 50px, 40px, 30px ja 20px, ja muista valita sopiva fontin leikkaus.

Aseta fontit sitten oikealle puolelle vierekkäin. Näin saat nopean katsauksen määrittämiisi tyyleihin.

6. Merkkiformaattien tallentaminen

Erityisen kätevä ominaisuus Adobe XD:ssä on mahdollisuus tallentaa merkkiformaatteja. Kun olet jo luonut otsikon, voit tallentaa tämän muotoilun ja soveltaa sitä helposti myöhemmin toiseen tekstiin. Nimeä muotoilu niin, että se kuvaa, mitä se on, kuten "Otsikko H1" tai "Kappale", jotta säilytät selkeyden.

Tehokas typografia Adobe XD:ssä - Vaiheittainen opas

7. Tekstimuotoilujen soveltaminen olemassa oleviin teksteihin

Voit soveltaa muotoiluja nopeasti käyttämällä aikaisemmin määritettyä tyyliä uusiin teksteihin merkkiformaatti-valikon kautta. Tämä helpottaa työnkulkuasi merkittävästi, koska sinun ei enää tarvitse tehdä jokaista muutosta manuaalisesti.

Tehokas typografia Adobe XDs - vaiheittainen opas

8. Tekstien muokkaaminen asiakirjassa

Jos teet muutoksia tyyliin, kuten fontin leikkauksen tai koon säätäminen, voit tehdä sen merkkiformaatissa, ja säädöt sovelletaan heti kaikkiin asiakirjassa oleviin teksteihin, jotka käyttävät tätä muotoa.

Yhteenveto – Optimoi teksti ja typografia Adobe XD:ssä

Tässä oppaassaolet oppinut, kuinka tärkeää oikeiden fonttien valinta on. Olet saanut tietoa siitä, miten löytää, asentaa ja käyttää niitä tehokkaasti Adobe XD:ssä. Voit tallentaa merkkiformaatteja pysyäksesi johdonmukaisena ja optimoidaksesi työnkulkuasi. Älä unohda, että typografian on oltava paitsi kaunis myös toimiva, jotta luettavuus taataan.

FAQ

Kuinka löydän hyviä fontteja projektiini?Tarkista alustat kuten Google Fonts ja Adobe Fonts.

Kuinka asennan fontteja järjestelmääni?Lataa fontit ja asenna ne alustasi ohjeiden mukaisesti.

Mitkä ovat erot pistetekstin ja tekstikehyksen välillä?Pisteteksti on yksinkertainen syöttölinja, kun taas tekstikehyksessä teksti katkeaa, kun leveys saavutetaan.

Kuinka voin säätää merkkiväliä Adobe XD:ssä?Tätä varten sinun on yksinkertaisesti muutettava asiaankuuluvaa asetusta oikeassa paneelissa.

Voinko tallentaa tekstityylejä Adobe XD:ssä?Kyllä, voit tallentaa merkkiformaatteja ja soveltaa niitä myöhemmin muihin tekstikenttiin.