Hur man justerar textegenskaper i Adobe XD

När du har text i ditt Adobe XD-projekt kan du börja ändra textegenskaperna. Dessa egenskaper inkluderar teckensnittsfamilj, teckenstorlek, teckensnittsvikt, justering, teckenavstånd (kerning och spårning), linjeavstånd (ledande), fyllning, kant (linje), skugga (skugga) och bakgrundsoskärpa. Så låt oss se över hur dessa egenskaper tillämpas.

Om läsbarhet och teckensnittsval

Valet av typsnitt är av avgörande betydelse. Du kan ha många teckensnittsval i ditt system, men bara ett fåtal utvalda kommer att klippa det som ett framgångsrikt val för läsning på skärmen. Några egenskaper att leta efter i ditt teckensnittsval inkluderar följande:

• Serif eller icke-serif? Nedan ser du en teckensnittsfamilj i serif-stil på toppen och en i sans serif på botten. Seriffer har en liten projektion som avslutar ett streck av en bokstav. Sans serif, å andra sidan, har inte den där lilla projektionen. Sans serif-typsnitt tenderar att se modernare ut och är ett populärt val för interaktiva applikationer och webbplatser. Förr trodde man att typsnittsfamiljer med seriffer var lättare att läsa när det var mycket text. Tester utförda med eyetracking-enheter har visat att det inte finns någon större skillnad i läsbarhet mellan serif eller sans-serif, så välj gärna någon av stilarna så länge du är uppmärksam på några av de andra teckensnittsegenskaperna som följer.

  Ett serif-typsnitt på toppen, sans-serif på botten.

• Raka, jämna linjebredder: Eftersom din typ kommer att skapas av pixlar är det bäst att inte ha mycket variation i bredden på din text. Du kan se skillnaden, i en pixelförhandsgranskning, mellan ett teckensnittsval med variation i bredden (överst) och ett teckensnitt som är konsekvent i sin bredd.

  Det översta typsnittet har variation i de tjocka och tunna linjerna som skapar typsnittet; det nedre teckensnittet är konsekvent och lättare att läsa på skärmen.

• Starka räknare: Räknare är hålen som du ser i bokstäver som "O", "B" och "R." Var uppmärksam på hur stora dessa räknare är eftersom de också kan orsaka läsbarhetsproblem om de närmar sig när de visas som pixlar på en skärm. En pixelvy av två olika teckensnittsfamiljer visas; se hur räknarna ser ut i var och en i jämförelse med varandra.

  Leta efter starka öppna diskar i ditt val av typsnittsfamilj.

• Nedstigningar och lockhöjd: Korta nedstigningar och låga lockhöjder är viktiga för läsbarheten på skärmen. Längst upp ser du en typsnittsfamilj med korta nedstigningar och låga caphöjder; längst ner ett typsnitt med långa nedstigningar och höga lockhöjder.

  En teckensnittsfamilj med korta nedstigningar och en låg höjd på taket är vanligtvis lättare att läsa på skärmen.

Välj din teckensnittsfamilj

Nu när du vet vad som gör ett bättre val av typsnitt för läsbarhet, använd panelen Egenskaper för att välja ett. Saker att titta efter när du gör ditt val inkluderar följande:

• Teckensnittsfamilj: När du har angett någon typ på skärmen kan du välja den och välja rullgardinsmenyn Teckensnittsfamilj i textavsnittet på panelen Egenskaper. Om du känner till typsnittet du vill ha, börja helt enkelt skriva teckensnittets namn i textrutan Font Family, och om det finns i ditt system kommer det att hittas i din lista.

  Glöm inte att du har teckensnitt tillgängliga för dig via Adobe TypeKit.

• Teckensnittsvikt: När du har valt en teckensnittsfamilj kan du välja en vikt från rullgardinsmenyn Teckensnittsvikt. Beroende på typsnitten som du har i ditt system kommer du att ha olika teckensnittsviktsval.

  Välj en teckensnittsfamilj och teckensnittsvikt.

• Teckenstorlek: Du kan helt enkelt skriva en teckenstorlek i textrutan Teckenstorlek, men om du inte är säker på vilken storlek som fungerar bäst kan du placera markören under textrutan Teckenstorlek och klicka och dra. Leta efter den dubbelhövdade pilen innan du drar. Att dra uppåt minskar storleken; ner ökar storleken.

  Klicka och dra för att visuellt ändra teckenstorleken.

• Justering: Du kan ändra din markerade text till Vänsterjustera, Centrera eller Höger med hjälp av justeringsknapparna i textavsnittet på egenskapspanelen.
• Teckenavstånd: Teckenavstånd hänvisar till mellanrummet mellan tecken. Detta är känt som spårning . Här ser du resultatet av att öka avståndet mellan tecken.

  Tecken med normalt avstånd, ställ in på 0 (noll) och ställ sedan in på 150.

Observera att du kan använda samma klicka-och-dra-teknik som är tillgänglig i textrutan Teckenstorlek för att visuellt ändra teckenavståndet.

Du kan också visuellt ändra storleken på teckenavståndet genom att klicka och dra.

• Radhöjd: Radhöjden är ledande , mellanrummet mellan textraderna. Detta kan spela en viktig roll i informationsdesign, så se till att du använder detta konsekvent genom hela din design. Du kan också placera markören under textrutan Linjehöjd och klicka och dra uppåt eller nedåt för att minska och öka din linjehöjd.
• Färg: Ändra fyllningsfärgen genom att klicka på rutan bredvid Fyllningsfärg på panelen Egenskaper. Du utför denna uppgift på samma sätt som du skulle göra med vilken form som helst. Välj rutan Fyll och välj en färg från färgväljaren. Du kan också välja genomskinlighet för din text från genomskinlighetsbilden till höger om färgväljaren.
• Ram: Genom att lägga till en ram placeras en linje runt texten. Detta rekommenderas inte eftersom det kan orsaka läsbarhetsproblem. Använd den sparsamt och kanske bara för specialeffekter. Bilden nedan visar ett exempel på ett större typsnitt som har ett tunt streck och en vit fyllning på en mörkare bakgrund. I en situation som denna skulle en kantlinje kunna fungera, men inte med mindre text.

  En liten kant med vit fyllning på mörk bakgrund.