Typografi I Webb Design

Tråden skapades och har fått 12 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • International user
  • 2008-04-30 23:06

Mindre tänkt som en frågeställningstråd, mer som en idee källa, varför inte öppna en tråd med syfte att inspirera sammt stimmulera oss webb-design fantaster till klarare, renare hemsidor?

Det finns så många vackra typsnitt i världen. Men när man ser på websidor runt om så upptäcker man snabbt hur fattigt valet är. Detta är dock bestämmt en mer teknisk fråga än en smaksak. Vissa typsnitt finns på alla operativsystem, vissa finns bara på specifika system. Och eftersom formgivaren gärna vill att alla ska se samma sak, så håller man sig till dom generika system-typsnitten som tillexemple times, verdana, arial och courrier.

Men hur kann man då vara orignell med fyra typsnitt?

Nu när jag väl startat denna tråd, känns det som att temat är så brätt att jag alldrig kommer kunna ta mig ur den. Men jag har några knep frågor man kann ställa sig själv:

Vad finns det för motsvarande typsnitt på dom andra operativsystemen än det man själv använder? Till exempel: är inte arial väldigt likt Helvetica. En fannatisk bokstavsälskare kommer naturligtvis att tycka att det finns en himmla massa skillnader. Och det gör det. När man verkligen tittar. Men läsaren, han som glider över orden med ögonen efter mening, inte bild, får inte texten åt minstånde nästan samma känsla med arial som med helvetica?

Ett annat knep för att göra sidor som väcker en känsla av tryghet är att vara så kortfattad som möjligt i variationer. Minns ni Sexpistols affich med massa tidningspappers bokstäver från olika ord ihopklistrade till ett nytt ord? Ja! Vild och ogämnt! Får du inte en liknande känsla av en sida som kanske bara har ett typsnitt, men 23 olika strolekar för olika tittlar, brödtext och länkar. Det kann vara bra om det är menat. Men vad säger kunden, till exempel nordbanken om att se punkig ut? Samma sak gäller tjocklekar och italics.... om en tittel är i 36px Bold, ska inte undertitlarna i 24px också vara i bold?

Det får räcka för idag för min del. Men du kanske vet annat eller bättre? Och jag är nyfiken på hur det låter!

Med vänliga hälsningar,
reSet

Jag är ingen webbdesigner eller dataproffs så det får bli lite amatörkommentarer.

Jag använder olikatypsnitt i mina mail för att jag tycker det blir snyggare med tex Verdana i brödtexten, Lucida Handwriting när jag skriver mitt namn längst ned och Desdemona när jag vill betona något i texten eller bara "skoja" till det.
En webbdesigner med känslig ögon tycker nog det är stötande med den kombinationen men jag tycker det är kul att variera mig. Så pass kul att jag skrivit en tråd om specialtecken;

Specialtecken
Har just upptäckt tonvis med roliga specialtecken under Redigera i Safari !
Nu kan "krydda" mina privata mail. Visst är dom användbara också, se tex:

〓 ⣿ ♨ ◢ ⊕ ㄞ ㉿ ➌ ♬ ❁ Ψ Ƣ Ͽ ش
༼ ⁜ ⁂ ₪ ↂ ⎈ ⌚ ⌨ ░ ⚓ ♕ ☕ ⿻ 〠

Någon som har förslag på andra sätt att få fram specialtecken (vet att det finns i vissa typsnitt) eller som har ett favorit-tecken ?

Den här tråden ligger i Supporter Lounge™.

Här har vi tråden jag sett fram emot!

Det enda jag beklagar är att vi samtidigt har stambyte så min tid vid datorn måste minimeras. Men vadå – ett par rader får det bli och så hoppas jag den har liv när eländet här är slut. (annars får den väckas!)

reSet, jag håller med dig om att med 4 typsnitt blir det inte så mycket variation – men jag återkommer om typsnitt för där är jag än mer kluven så jag måste tänka.

Håller även med dig om att "23 olika storlekar" för att markera skillnad på olika dignitet på rubriker och sedan brödtexten inte är något att stå efter. Visst, för att göra en effekt – men det gäller ju för allt; bryt medvetet mot regler om du vet vad du gör och vilken effekt du kan få. Säga vad man vill, men Sex Pistols visste vad de gjorde när de bröt mot konventioner!

Men generellt så tycker jag att både för webb och tryck ska det vara rejäl skillnad mellan rubrikernas grad för att man lätt ska förstå skillnaden. Dessutom måste man som tillverkare ha ett väldigt bra minne för vara konsekvent med digniteten om man har många nivåer och en webbplats med många sidor. För egen del, lat och glömsk som jag är, ser jag en fördel med externt css och bara 3 nivåer: t ex h1 för sida, h2 för avsnitt och h3 för stycke. Till det kan jag på vissa sidor lägga fetmarkering i samma grad som brödtexten om det behövs ytterligare en undernivå, t ex vid uppdelning.

Men här vet jag inte om jag håller med om att alla rubriker måste ha samma tyngd. Jag har inte tänkt på det tidigare men skulle man inte kunna laborera med normal/fet och versaler/gemener?

Kursiv har jag generellt bannlyst – det är för svårt att läsa på skärm. Eller finns det någon som har idéer om när det kan fungera?

Understrykningar såg jag som något som försvann från tryck/utskrift när vi gick från skrivmaskin till datorer. För webben ser jag det som reserverat för länkar. Nu håller jag till och med på att bli så konservativ att jag anser att alla länkar ska vara understrukna

På någon webbplats (som borde ha gjorts om för länge sedan!) har jag länkarna fetmarkerade och understrykning visar sig först vid överrullning (heter det så på svenska?) Tror även jag har webbplatser/avdelningar med andra varianter. Men jag undrar om det från läsarsynpunkt inte är lättas om allt som är understruket är klickbart och allt klickbart är understruket.

På köpet får man möjlighet att använda mörkröda och mörkgröna länkar utan att riskera att en ganska stor grupp män (är det 10 %?) missar dem pga. färgblindhet

Ja, detta får bli mitt bidrag – hantverkarna kommer kl 7 och då gäller det att vara färdig att gå

Ursprungligen av KaRo:

Jag är ingen webbdesigner eller dataproffs så det får bli lite amatörkommentarer.

Jag använder olikatypsnitt i mina mail för att jag tycker det blir snyggare med tex Verdana i brödtexten, Lucida Handwriting när jag skriver mitt namn längst ned och Desdemona när jag vill betona något i texten eller bara "skoja" till det. ....

Verdana är en trotjänare - i stort sett alltid läsvänlig och fungerar på nästan alla datorer (men också lite tråkigt tycker jag som använder den till mycket!)
Hur är det med Lucida Handwriting? Jag ser att jag har det installerad men tillhör den standardtypsnitten på Mac, Windows och Linux?
Desdemona använde jag på pre OS X-tiden som huvud till en del flygblad men med OS X "försvann" den. Skickar du med/länkar till typsnittet eller anger du alternativt typsnitt för dem som inte har det?

macwitty:
Sover inte du kl 2 på nätterna ?

Jag sitter på ett cafe i solen just nu och
skriver på min iPod Touch. Det är trådlöst
bredband inne i cafe't men det räcker
tydligen hela vägen ut.

Stambyte ("kräkreflex")? Dom var och
blåste igenom rören i mitt hus nyligen men
tror det blir en plastbeläggning snart. Stambyte
blir nog först om några år.Rören kvider och
piper, usch !

Som sagt; amatör när det gäller typsnitt men
kan förstå att man kan bli intresserad av ämnet.
Är intresserad av akvarellmålning, kalligrafi, japanskt
tuschmåleri och viss grafik. Det här att behöva tänka
på vilka typsnitt som fungerar på olika OS är nytt för
mig.

Specialtecken kan vara både kul och väldigt användbara – men på webben tycker jag oftast att de ställer till problem eftersom inte alla har samma webbläsare som en själv. Brukar lösa det med att göra gif-bilder av dem för att vara på den säkra sidan.

Har jag drömt eller finns det en sida där man kunde se vilka specialtecken som fungerade med i stort sett alla systen/teckenkodsuppsättningar/webbläsare?

KaRo, välkommen in i OS:en underbara virrvarr-värld! Jag utgår från att du ser olika tecken i ditt tidigare inlägg. Om du sitter med Safari 3 på 10.5 så kanske det såg ut såhär

Själv sitter jag med Firefox 2 på Mac OS X 10.4 och då får jag flera frågetecken – det ser ut såhär

Hade jag istället använt Firefox 2 på Linux hade jag fått olika tecken. Ja, några olika från dig

Däremot ser det lite värre ut för med Explorer 8 på Windows XP

Än värre med Firefox 3 på Windows XP

Och det blir inte kul för dem som använder Safari 3 på Windows 2000

Jag testade "dina" tecken samtidigt som jag testade en annan sida.
Vill du testa hur de ser ut i andra webbläsare så gå till
http://browsershots.org/ och skriv in http://goto.glocalnet.net/macwitty/teckentest.html
Du kommer nog att bli förvånad över hur många olika varianter det kan bli

---
OT
Ang att sova så är det en fördel med att bli äldre – man behöver inte lika mycket sömn. Och bättre lär det bli!

Stambyte ger inga kräkreflexer – det ger bara hosta av det tjocka lager stendamm som ligger över (också säkert också under!) all plast som täcker våra tillhörigheter. Fast det är klart, det beror ju på hur känslig man är för torrtoa – men luktar gör den inte! Det är lite av friluftsliv över det hela. Först 4-5 veckor med torrtoa och sedan lika lång tid utan kök. Det har talats om att ta ner metaköket ... Själv hoppas jag mer på grillkvällar på gården!

  • Medlem
  • International user
  • 2008-05-02 23:45

Post scriptum

Ursprungligen av macwitty:

Hur är det med Lucida Handwriting? Jag ser att jag har det installerad men tillhör den standardtypsnitten på Mac, Windows och Linux?

nope.. inte på OS X.... men Windows har det som standard...
Har precis en ny kund som ger mig alla sina .doc skrivna i Lucida Handwriting... lite kul.
"Paresse mas sympatico." säger han

  • Medlem
  • International user
  • 2008-05-02 23:37

härligt! mer än ja hinner läsa till och med!

Men lite snabbt:

Ursprungligen av macwitty:

Kursiv har jag generellt bannlyst – det är för svårt att läsa på skärm. Eller finns det någon som har idéer om när det kan fungera?

Georgia bold italic

Italic i

STORA
ORD

men i liten strolek, gärna kombinderad med bold

annars blir det som du säger: jobbigt för ögonen!

Kul info det där med färgblindas problem med grönt på rött osv... inget nytt, men alldrig igenomtänkt liksom

Godnatt!

ps. vad många rader några rader blev macwitty! Tack för att du är så altruistisk med din kunskap! och tack för att du skriver sån bra svenska!

reSet, tack för informationen om Lucida handwriting! Det blir snart dags att ta tag i det där med "webbsäkra" typsnitt och diskutera ersättningstypsnitt - men jag återkommer till mina tankar om det

Ok, då har jag en användning för kursiver - tecken i stor grad. Fast jag vet inte om jag inte tycker att normal är tydligare. Men å andra sidan det är tydligt nog och bra att kunna arbeta med variation!

Även om använder fet italic så tycker jag det blir problem i liten grad - skrivs "r n" ser det ut som m, f i ser ut dom ett "utländskt" b (har glömt vad det heter). Ska man justera teckenavståndet?

Georgia - ja, en serif som är tydlig utan bra upplösning. Men den är ju så pyttig! Efter någons (reSets?) tidigare inlägg blev jag lite sugen på att använda serifer för brödtexten - om inte annat för att få igång mig själv att gör om en hel webbplats design. Men föll på att jag inte hittade någon bra storlek och radavstånd

Hur många pixlar ska man har för att Georgia inte bara ska vara läsbar utan även läsvänlig i brödtext? Verdan kan man sätta i ner till 8-10 och Arial tycker jag är OK i 12 men inte orkar jag läsa Georgia i 12 px! Räcker det med 14 och hur klumpigt/utrymmeskrävande blir det på windows? Är standardradavståndet Ok eller bör man ändra?

OT
Jo, några rader blev många rader - jag är inte bara lat och har dåligt minne jag har svårt att räkna också!

macwitty:
OT först: Jag har fått sämre sömn efter 50 och saknar verkligen att bara kunna lägga mig och sova skönt i åtta timmar men jag jobbar på det med bättre sömnhygien. Stambyte: ja, man får ta det med humor eftersom man vet att det blir bra sedan men för min del hoppas jag det dröjer några år dit.

Tack för förslagen på sidor där man kan kolla vilka typsnitt/specialtecken som syns i vilka webbläsare. Som sagt, visste inte att det syns så olika. Vilket jobb det måste vara för webbdesigners att välja rätt typsnitt ! Det måste väl innebära att man måste använda typsnitt som flest datoranvändare kan se ? För man vet ju inte vilka OS/webbläsare som kunderna sitter med.

Jag tittar nog på bokstäver som om de vore bilder mer än bara symboler för ett ljud. Har läst grafologi för länge sedan. Tanken att personligheten kommer fram i handstilen är intressant. Jag lärde mig stenografi som ung också men har glömt det mesta.
Oj, typografi är verkligen ett stort ämne !

  • Medlem
  • International user
  • 2008-05-06 22:12
Ursprungligen av macwitty:

Även om använder fet italic så tycker jag det blir problem i liten grad - skrivs "r n" ser det ut som m, f i ser ut dom ett "utländskt" b (har glömt vad det heter). Ska man justera teckenavståndet?

Ja, varför inte? Alla nya webläsare kann interpretera :

p { 
 letter-spacing: -0.5px;
}  
Ursprungligen av macwitty:

Georgia - ja, en serif som är tydlig utan bra upplösning. Men den är ju så pyttig! Efter någons (reSets?) tidigare inlägg blev jag lite sugen på att använda serifer för brödtexten - om inte annat för att få igång mig själv att gör om en hel webbplats design. Men föll på att jag inte hittade någon bra storlek och radavstånd

Hur många pixlar ska man har för att Georgia inte bara ska vara läsbar utan även läsvänlig i brödtext? Verdan kan man sätta i ner till 8-10 och Arial tycker jag är OK i 12 men inte orkar jag läsa Georgia i 12 px! Räcker det med 14 och hur klumpigt/utrymmeskrävande blir det på windows? Är standardradavståndet Ok eller bör man ändra?

Hmm... bra fråga... jag gillar Georgia i lite strörre strolekar. För i tiden ville jag att text och brödtext skulle vara så liten som möjlig, för att man som grafiker vill att det ska vara snyggt.

Inte nu längre; Jag vill att folk ska läsa.

14px räcker långt på Georgia. Georgia (det disklexlsklikare ovänliga ordet ) är bredare än times på alla operative system. Men har samma brädd i båda, så skilnnader ska det inte bli. Men det tar mer plats än times. Det gör det.

Linjehöjd ska man alltid ta bokstavens höjd plus hälften:

om texten är i 14px:
line-height: 21px;

om texten är i 1em:
lineheight: 1.5em

  • Medlem
  • Stockholm
  • 2008-05-07 01:43

Kul att det kommit en tråd om design och typografi!

Jag vill passa på att fråga om det hänt något eller är det fortfarande säkrast att ange teckenstorleken i pixlar på webben?

(För annars blir ett typsnitt på windows 133 % större än på mac, eller återgivningen på mac är 75 % mindre än på windows? T ex Verdana 12 pt, size 3, på mac ser ut som Verdana 16 på windows.)

"em" är väl lika upplösningsbereoende som pt, eller?

Visst kan man räkna med att det ser likadant ut hos folk som kör Linux som Windows?

  • Medlem
  • International user
  • 2008-05-08 01:54
Ursprungligen av Katinka:

Visst kan man räkna med att det ser likadant ut hos folk som kör Linux som Windows?

Det jobbiga tycker jag, är att det känns som man inte kann räkna med något.
Men med em så, ja, är det förhållande till upplösning, vilket innebär att man är säker på att alla får det i bekväm storlek om man trycker i 1em på skärmen..

Px är nog säkrast. men tänk dig hur 12px ser ut på 96dpi skärm..... så vad är säkert igentligen?

Jag gillar em's... underlättar att organisera tittel storlekar tycker jag.

Kul att det kommer in ideer! så småning kanske vi har en riktig manual här!

1
Bevaka tråden