Responsiv text, avstavning och mjuka bindestreck för långa ord

Liggande och stående iPad ger olika avstavningSvenskan är ett språk som till mindre utsträckning än exempelvis engelskan är lämpad för design som riskerar att ge smala kolumner med text. Våra ord är långa då de är sammansatta och man i få fall ska särskriva. Enligt den lilla mängd typografi jag lärt mig bör en kolumn med text vara mellan 45-75 tecken vilket inte är något man har full kontroll över vid responsiv designs flytande kolumnbredd.

De som jobbar professionellt med text gör detta hela tiden i redigeringen inför publicering eller tryck, men vilken webbredaktör som helst borde lära sig att använda mjuka bindestreck. Se bilden ovan där ordet “Optimeringstester” avstavas med bindestreck om kolumnen blir smal – som exempelvis på en stående iPad.

Det är inte direkt raketkirurgi att själv styra var avstavningen ska göras, ovan exempel ser ut så här i HTML-koden:

<h2>Optimerings&shy;tester</h2> 

Sidnamn kan behöva avstavas i ditt publiceringssystemDet är &shy; som sätter det mjuka bindestrecket, ett bindestreck som bara dyker upp när det behövs. Som du ser i nedan bild kan det behöva skrivas in i vanliga textfält som sidnamn i ditt publiceringssystem men tänk på att om innehållet är i en WYSIWYG-editor (som ytan nederst på nedan bild) så måste denna magiska följd av tecken skrivas in i HTML-läget, annars funkar det inte. Det kan också vara så att publiceringssystemet du använder inte accepterar Unicode eller annat än ren text, men testa så ser du om det funkar och risken att något går sönder är nog obefintlig.

Responsiv webbdesign är, som många börjat upptäcka, inte lösningen på hur bra innehållet fungerar i alla tänkbara enheter besökarna använder. Karen McGrane har skrivit en mycket bra bok på ämnet – Content Strategy for Mobile – som jag absolut kan rekommendera. Vill man hellre lyssna på lite av henne som poddavsnitt finns ett med henne och Shoptalk.

Mer om responsiv typografi

Leave a Reply

Your email address will not be published. Required fields are marked *