Bilder av text

Vad det kräver

När samma visuella presentation kan uppnås med riktig text och CSS ska riktig text användas. Bilder av text zoomar inte rent, kan inte markeras, kan inte översättas av webbläsaren, kan inte anpassas med användar-CSS och pixlar vid hög zoom. Undantag: logotyper, väsentliga bilder (en skärmdump som visar hur ett gränssnitt ser ut) och bilder av text som användaren kan anpassa.

Hur du uppfyller det

• Rendera rubriker, banners och reklamtext som HTML-text med webbtypsnitt, inte som exporterade PNG-filer.
• För marknadsföringsetiketter (“Nyhet”, “Rea”, “30% rabatt”) — använd ett <span> stylt med CSS i stället för en sprite-bild.
• Om en designer levererar en hjältebild med inbakad text, begär att texten läggs som ett separat lager att rendera ovanpå bilden med CSS.
• För citatbilder i sociala medier-stil som genereras server-side — rendera dem som SVG med <text>-element när möjligt; SVG-text skalas rent och är markerbar.
• Använd @font-face för att läsa in anpassade display-typsnitt i stället för att rastra dekorativ text.

Vanliga fel

• Bannerannonser med all text (“Begränsat erbjudande! Handla nu!”) renderad som en JPEG som blir suddig vid 200 % zoom.
• Priskort där “99 kr/mån” ingår i kortets bild i stället för som HTML-text.
• Avdelningsseparatorer med stiliserad text (“Våra tjänster”) levererad som PNG i stället för en styld <h2>.
• Handlingsuppmaningar som är helt bildbaserade, med alternativtexten som upprepar den visuella texten.
• E-post-liknande skärmdumpar på marknadsföringssidor där marknadsföringstexten lika gärna kunde vara riktig text.

Varför det spelar roll

Bilder av text är dessutom ett misslyckande ur översättnings- och SEO-perspektiv — Google kan inte indexera dem, Chrome kan inte översätta dem och användare med skärmförstoring ser dem pixlade. Åtgärden är oftast trivial: ersätt exporten med HTML. Friktionen ligger i arbetsflödet — designers levererar JPEG-filer eftersom de är snabbare att producera i Figma än att specfa.