Så du älskar typografi, vem gör det inte idag? Frågan är hur slarvig du är när det gäller att implementera typ i dina mönster?
Idag diskuterar vi några bra och enkla typografi tips att alla som arbetar med typ borde veta. Oavsett om du är expert eller nybörjare, läs vidare för att se om du är skyldig till någon av dessa fallgropar.
Gör inte: Låt Photoshop Kern din text
Denna princip är typografi 101. Photoshop är ett bra verktyg, men det och alla andra program med ett typverktyg matchar inte de galna scopes som implanteras i ansiktets framsida (dina ögon).
Programvara använder en algoritm för att hitta ett "bästa gissning"? för hur en typ av typografi ska kärnas. I vissa appar kan du välja mellan ett par olika versioner av detta. Till exempel tillåter Photoshop och Illustrator dig att välja mellan en? Metrics? och en? optisk? läge.
Detta är ett bra alternativ att du bör experimentera med ofta för olika textblock. Jag har inte funnit att en av alternativen fungerar bättre i 100% av fallen, det beror verkligen på de bokstäver och typsnitt som används.
En annan sak att komma ihåg är att olika teckensnitt kräver olika karteringsbehov. För att testa kerningen i en typsnitt skriver jag ofta upp versordet? LAVA? så att jag kan få en känsla för några av de typiska problematiska områdena.
Gör: Kärna manuellt
De flera automatiska kerningslägena är trevliga, men för riktigt viktig text är det alltid bäst att bara eyeball det.
Tänk på att jag sa, "riktigt viktig text." Om du arbetar med stora stycken är ledning över hela textområdet mer värdefullt att tweak än enskilda kerningpar. Visst, du kan gå in och kärna varje ord manuellt, men det skulle vara en inaktiv övning. Men om du skapar logotyp, är det värt extra tid att se till att varje bokstav är placerad perfekt.
Gör inte: Använd standardinstruktionen
Jag har nämnt några gånger på Design Shack att, trots att jag är helt för att använda rader för att lägga till visuellt intresse för en design, är jag definitivt inte en fan av standardunderstreckningsfunktionen i de flesta applikationer.
Texten i exemplet ovan skapades med hjälp av Photoshops textunderstrukningskommando. Som du kan se är det fruktansvärt besvärligt, särskilt i kombination med nedstigningar.
Gör: Bli kreativ med understreck
Precis som kerning är understruken ofta bäst när man hanterar manuellt. När du drar ut en stroke, har du fullständig anpassningskontroll. Du kan ändra slagvikt, skapa ett dubbelslag, utöka underlaget förbi ordet eller till och med ändra linjen till intressanta former.
Ett trick som jag använder ganska ofta med understruk- tioner skapar en liten aning för nedstigning, vilket ses i det andra exemplet ovan. Det är inte på något sätt en regel som understryker inte kan sneda nedstigningar, jag föredrar bara hur det ser ut när du undviker de två.
Gör inte: Använd utsmyckade teckensnitt för kroppskopiering
Detta är ett klassiskt misstag som nya designers och icke-designers gör ständigt. Teckensnitt är ett enkelt sätt att injicera kul och personlighet i en design, så frestelsen att använda intressanta teckensnitt är nästan outhärdlig.
Problemet är att många inte vet hur man korrekt implementerar en unikt utseende. Ta till exempel följande.
Här använde jag den vildt populära hummerfonten på ett sätt som jag sett på riktiga webbplatser. Problemet ska vara uppenbart, stycket kan se fint ut men det tar dig för evigt att läsa.
Vidare saknas kontrast mellan rubrik och kroppskopia. Visst, de är olika storlekar men tar djärvt i beaktande är lika viktigt.
Gör: Använd ortopediska teckensnitt för rubriker
I exemplet nedan har jag löst problemet. Vi får fortfarande använda vår galna typsnitt, men istället för att överväldiga läsaren med den blir vi mer selektiva.
Observera att våra två textelement kontrasterar mycket bra nu. Rubriken är stor, stycket är liten. Rubriken är fet, stycket är tunt. Rubriken är snygg, stycket är vanligt. Skillnaderna fortsätter och fortsätter.
Nyckeln är att attraktiva designelement uppskattas i små doser. Använd ett kreativt teckensnitt i en rubrik och jag tror att du är en anständig formgivare, använd den överallt och jag tror att du inte har någon aning om vad du gör.
Gör inte: Använd Cufon för textbyte
Det här är en debatt som jag har skrivit om tidigare och trots att jag har tryckt tillbaka, håller jag min position ordentligt. Jag brukade tro att Cufon var en bra lösning, men moderna metoder har verkligen flyttat till CSS.
Cufon har några stora nackdelar. Till att börja med är det ett JavaScript-drivet textbyte. Beviljas, jag är ett stort fan av JavaScript för nästan allt, men jag är bara inte säker på att det är nödvändigt här när CSS har en solid lösning (även om jag använder Google Web Fonts så kanske jag är en hycklare).
Ännu viktigare, som användare märker jag alltid Cufon eftersom jag inte kan välja / kopiera / klistra in text ordentligt. Det är irriterande att se levande text och att nästan ha möjlighet att interagera med det, men stoppas kort av buggy-val.
Gör: Använd @ font-face
CSS-lösningen är naturligtvis @ font-face. Det är enkelt, laddas snabbt, lätt att använda och fungerar i moderna webbläsare.
Det finns några saker att tänka på när du arbetar med @ font-face. Först av allt, "bäst" syntaxen har ändrats några gånger. Den nuvarande favoritwebbutvecklarens favorit är Fontspring's New Bulletproof @ Font-Face Syntax.
Vidare är @ font-face den föredragna tekniken för Google Web Fonts, Typekit och andra, men inte alla favoriserar den över Cufon. Vissa pekar på problem med typsnittsproblem, särskilt på Windows-baserade datorer, som en anledning att undvika @ font-face. För att utforska denna sida av argumentet, kolla Cufon vs.Teckensnitt-ansikte: En visuell jämförelse.
Gör inte: Använd Faux Small Caps
Att använda små kepsar kan vara ett roligt sätt att lägga till lite variation på din alla kepsrubrik. I grund och botten använder du alla stora bokstäver men håller bokstäverna liknande om du använde titelfall (första bokstaven är större).
Den knepiga delen om att dra av det här är att din första instinkt för hur man gör det är fel. Tänk på exemplet nedan:
Här skrev jag lite text i alla stora bokstäver och gjorde helt enkelt den första bokstaven i varje ord större. Resultatet är verkligen skilda teckensnitt, vilket är ganska ful för den akuta observatören. Lägg märke till hur linjetyckeln mellan de två olika brevtyperna är avsevärt annorlunda.
Gör: Använd en typsnitt med små kepsar
Den mest uppenbara lösningen på detta problem är att använda ett teckensnitt som faktiskt byggdes med små kepsar. Trajan är det överdrivna typiska fallet, men det finns gott om andra som Goudy Small Caps & Old Style Figures. Teckensnitt som dessa är utformade för att hålla en konsekvent utseende trots olika bokstorlekar.
Om du behöver en mellanliggande, Photoshop och Illustrator har båda en liten keps? alternativ som är inbyggt i teckenpaletten. Detta visas i "Better Small Caps"? exempel ovan. Lägg märke till hur bokstäverna är mycket mer konsekventa än i det första exemplet där jag försökte samma sak manuellt.
Med några gamla stilfonter kan funktionen småkapslar fungera ganska anständigt. Resultaten kan dock vara lika dåliga eller sämre än manuella ansträngningar på andra teckensnitt. Till exempel, här är vad som händer när du försöker använda funktionen på Helvetica.
Som ni kan se är vi tillbaka till en märkbar brist på konsistens i strokebredd. Mitt bästa råd är att alltid försöka använda små kepsar i samband med ett teckensnitt som har det inbyggt. Om det inte är något alternativ, försök använda programvarufunktionen för små kepsar och testa resultatet för att se om det är acceptabelt.
Kom tillbaka för del två!
Tack för att du läst våra 5 typografi gör och gör det inte alla borde veta. Överraskningen är att vi har fem mer kvar att komma! Kolla tillbaka senare i veckan för slutsatsen som innehåller några mer klassiska blunders och hur man undviker dem.
Under tiden lämna en kommentar och låt oss veta vad ditt typografi husdjur är och vilka misstag du är skyldiga att begå.