# Somejulkaisun tekstiasettelu: otsikko, tieto ja toimintakehotus [Canonical HTML page](https://gradiently.design/fi/guide/text-hierarchy-social) Useimmissa sekavilta tuntuvissa julkaisuissa oikeat sanat ovat väärässä järjestyksessä ja väärän kokoisina. Kolme tasoa, muutama sijoittelusääntö ja käsivarren mitan päässä pidetty puhelin korjaavat lähes kaiken. ## The short version - Selkeässä somejulkaisun tekstiasettelussa on kolme tasoa: otsikko, lisätietorivi ja toimintakehotus. - 1080 pikseliä leveässä julkaisussa 90:stä 140 pikseliin ulottuva otsikkokoko, 48:sta 64 pikseliin ulottuva lisätietokoko ja noin 40 pikselin toimintakehotus ovat luettavia puhelimella. - Jokaisen tason pitää olla selvästi edellistä pienempi, noin puolet tai kaksi kolmasosaa sen koosta, jotta järjestys näkyy yhdellä silmäyksellä. - Pidä otsikko noin kahdeksassa sanassa ja sijoita se katseen ensimmäiseen kohteeseen, yleensä ylä- tai keskikolmannekseen. - Toimintakehotus on julkaisun hillityin teksti, koska kuvateksti ja alustan omat painikkeet kutsuvat jo seuraavaan vaiheeseen. Paras **somejulkaisun tekstiasettelu** käyttää kolmea tasoa, ei enempää: **otsikkoa**, joka kertoo yhden pääasian, **lisätietoriviä**, joka vastaa ilmeiseen jatkokysymykseen, ja pientä **toimintakehotusta**, joka kertoo seuraavan teon. Jokainen taso on selvästi edellistä pienempi ja ennakoitavassa paikassa. Selaaja antaa julkaisulle hetken, ja kolme tasoa on suunnilleen se, mitä hetkeen mahtuu. ## Esimerkki: julkaisun tekstien tärkeysjärjestys Kukkakauppa haluaa ilmoittaa äitienpäivätilauksista. Ensimmäisessä luonnoksessa kaikki on suunnilleen saman kokoista: kaupan nimi, ”Äitienpäivä lähestyy”, ”Tilaa kimput verkosta nyt”, ”Toimitus koko kaupunkiin”, ”Tilaa torstaihin mennessä” ja verkko-osoite. Kuusi kilpailevaa riviä tarkoittaa, ettei mitään lueta. Järjestettynä sisältö on: otsikko *Tilaa torstaihin mennessä.* (asia, johon pitää reagoida), lisätieto *Käsin sidotut kimput, toimitus sunnuntaina* (mitä ja milloin), toimintakehotus *Linkki biossa* (missä). Kaupan nimi siirtyy pieneksi merkinnäksi tai poistuu, sillä profiili näyttää sen jo. Kukkakaupan julkaisu, jossa nimi, ilmoitus ja useat lisätiedot kilpailevat lähes saman kokoisina Ennen: jokainen rivi kilpailee huomiosta ja määräaika hautautuu. Sama kukkakaupan julkaisu, jossa suuri otsikko on Tilaa torstaihin mennessä ja pienempi rivi kertoo sunnuntaitoimituksesta Jälkeen: yksi otsikko ja yksi lisätietorivi, toimintakehotus kuvatekstissä. ## Otsikon, lisätiedon ja toimintakehotuksen fonttikoot Alla olevat koot sopivat 1080 pikseliä leveään julkaisuun eli Instagramin pysty-, neliö- ja tarinamuotoihin. Taustalla oleva sääntö on numeroita hyödyllisempi: jokaisen tason pitäisi olla noin puolet tai kaksi kolmasosaa edellisen koosta, muuten silmä ei erota niitä. | Taso | Tehtävä | Koko 1080 px:n leveydessä | Pituus | | --- | --- | --- | --- | | Yläteksti (valinnainen) | Tausta: kategoria, päivämäärä tai sarjan nimi | 28:sta 32 pikseliin, versaalit, väljä kirjainväli | Yhdestä neljään sanaa | | Otsikko | Yksi asia, jonka haluat jäävän mieleen | 90:stä 140 pikseliin, lihavoitu tai puolilihava | Enintään noin kahdeksan sanaa | | Lisätieto | Jatkotieto: milloin, missä, paljonko, kenelle | 48:sta 64 pikseliin, normaalipaino | Yksi rivi, enintään kaksi | | Toimintakehotus | Seuraava teko | 40:stä 44 pikseliin, keskipaksu | Kahdesta neljään sanaa | Yläteksti on ylimääräinen neljäs taso. Käytä sitä taustatietoon, älä toiseksi otsikoksi. Lihavuus auttaa yhtä paljon kuin koko. Lihavoitu otsikko ja normaalipainoinen lisätietorivi erottuvat selvästi, vaikka koot olisivat lähempänä toisiaan kuin haluaisit. Puhelimen mitoista kertoo [somen fonttikoko](https://gradiently.design/fi/guide/font-size-for-social-media), ja yleistä teoriaa käsittelee [visuaalinen hierarkia](https://gradiently.design/fi/guide/visual-hierarchy). ## Mihin kukin taso sijoitetaan Ihmiset lukevat julkaisua kuten sivua: ylhäältä alas, rivin alusta loppuun. Otsikko kuuluu siis ylös tai keskelle, lisätieto suoraan sen alle ja toimintakehotus viimeiseksi lähelle alareunaa. Pidä kolme tasoa lähellä toisiaan yhtenä ryhmänä. Kulmiin levittäminen saa katseen etsimään. - Pystyjulkaisu 1080×1350: 1080 × 1350 - Neliöjulkaisu 1080×1080: 1080 × 1080 - Tarina 1080×1920: 1080 × 1920 - LinkedIn-julkaisu 1200×1200: 1200 × 1200 Neljä yleistä muotoa. Pidä tarinassa kaikki kolme tasoa noin 250 px:n päässä yläreunasta ja 250 px:n päässä alareunasta, joissa käyttöliittymä sijaitsee. - **Pystyjulkaisu 1080×1350**: otsikko yläkolmannekseen tai keskelle, lisätieto alle, toimintakehotus lähelle alareunaa vähintään 80 px:n marginaalilla. - **Neliö 1080×1080**: keskitä ryhmä tai tasaa yhdelle puolelle. Profiiliruudukko näyttää jokaisesta julkaisusta rajatun esikatselun, joten pidä otsikko erossa ylä- ja alareunasta. - **Tarina 1080×1920**: otsikko juuri ylimmän turvarajan alle, toimintakehotus vastauskentän yläpuolelle. [Somen turva-alueet](https://gradiently.design/fi/guide/social-media-safe-zones) näyttää kartan. - **Karusellin ensimmäinen dia**: vain otsikko sekä pieni nuoli tai ”Pyyhkäise”-vihje. Lisätiedot toiselle dialle. [Instagram-karusellin suunnittelu](https://gradiently.design/fi/guide/instagram-carousel-design) kertoo loput. ## Yleiset tekstiasettelun virheet somejulkaisuissa ### Vältä - Otsikko ja lisätieto lähes saman kokoisina - Brändin nimi suurimpana tekstinä - Otsikkoa voimakkaampi toimintakehotus - Kulmiin ja reunoihin työnnetty teksti - Viisi tai useampia leipätekstirivejä yhdellä dialla - Pitkien kappaleiden keskittäminen ### Tee näin - Selkeä kokoero tasojen välillä - Viesti suurimpana tekstinä, logo pienenä - Hillitty toimintakehotus lähellä lisätietoa - Reilut marginaalit, noin 80:stä 100 pikseliin - Pitkä sisältö jaettuna karusellin dioille - Vasen tasaus yli kahden rivin tekstille Toimintakehotus ansaitsee huomion. Instagramissa kuvateksti sekä tykkäys-, kommentti- ja jakopainikkeet ovat heti kuvan alla, ja kaikki ymmärtävät ”linkki biossa”. Kuvan oma toimintakehotus voi siis olla pieni. Tee siitä voimakas vain, kun toiminta on koko viestin tarkoitus, kuten alennuksen määräaika. ## Somejulkaisun tekstiasettelu viidessä vaiheessa 1. **Kirjoita kaikki ylös ja aseta tärkeysjärjestykseen** Laita pääasia ensin. Kaikki muu on lisätietoa, toimintakehotusta tai kuvatekstiä. 2. **Lyhennä otsikko enintään kahdeksaan sanaan** Jos se ei mahdu 90 px:n koossa kolmelle riville, se on liian pitkä. Tukeva [otsikkofontti](https://gradiently.design/fi/guide/headline-fonts) tekee lyhyestä rivistä iskevämmän. 3. **Aseta koot portaittain** Otsikko, sitten noin puolet sen koosta lisätiedolle ja vielä pienempi koko toimintakehotukselle. 4. **Ryhmittele ja sijoita** Pinoa kolme tasoa yhteen yhtenäisin välein, tasattuna samaan reunaan tai keskelle. 5. **Testaa puhelimen koossa** Loitonna pohjaa, kunnes julkaisu on käsivarren mitan päässä pidetyn puhelimen levyinen. Jos järjestys ei ole selvä, suurenna kokoeroja. Pystysuuntainen alejulkaisu, jossa 40% alennusta on erittäin suurena, Vain viikonlopun pienenä ylätekstinä ja kynttilät lisätietorivillä Kun numero on uutinen, siitä tulee otsikko ja sanoista lisätieto. ## Pidä jokainen taso luettavana vilkkaalla taustalla Hierarkia toimii vain, jos kaikki kolme tasoa voi lukea. Otsikko on yleensä kunnossa, koska se on suuri. Lisätiedossa ja toimintakehotuksessa kontrasti pettää helpommin, etenkin liukuvärin tai kuvan päällä. Sijoita ryhmä rauhallisimmalle alueelle ja tarkista pienin rivi ensin. [Teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) käsittelee tekniikat. Gradientlyssä suunnitelman takana oleva Mark tietää tekstin sijainnin. Sen rauhallisin alue siirtyy tekstin taakse ja Automaattinen muste valitsee vaalean tai tumman tekstin jokaiselle riville. Siten pieni toimintakehotus pysyy yhtä luettavana kuin otsikko. Aseta hierarkia kerran ja tee tarina- tai LinkedIn-versio samasta suunnitelmasta uudelleen rakentamisen sijaan. ## FAQ ### Kuinka paljon tekstiä Instagram-julkaisussa pitäisi olla? Enintään noin kahdeksan sanan otsikko ja yksi lisätietorivi on ihanteellinen. Pidemmät selitykset kuuluvat kuvatekstiin tai karusellin lisädioille. ### Minkä kokoinen fontti sopii somejulkaisun otsikkoon? 1080 pikseliä leveässä julkaisussa otsikolle 90:stä 140 pikseliin, lisätietoriville 48:sta 64 pikseliin ja toimintakehotukselle noin 40 px. ### Mihin toimintakehotus kuuluu somejulkaisussa? Lähelle alareunaa ja lisätietoriviä turva-alueen sisään. Pidä se tarinassa vastauskentän yläpuolella. ### Pitäisikö somejulkaisujen teksti keskittää vai tasata vasemmalle? Keskitä lyhyet, yhdestä kolmeen riviä pitkät otsikot. Tasaa pidempi teksti vasemmalle, sillä epätasaiset keskitetyt rivit ovat vaikeampia lukea.