WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   Vilken storlek på text är bäst (https://www.wn.se/forum/showthread.php?t=19105)

swan 2007-02-04 18:07

När jag provade min nydesignade sida i firefox/mac så kunde jag knappt se texten. Men på PC, där jag designade sidan, ser allting bra ut.

Jag har med css satt normaltexten till att vara 75% och viss text till att vara 75% av 75%. Uppenbarligen har jag tänkt fel... Är det bäst att sätta pixlar eller hur skall man göra för att få det att se någolunda lika ut i olika os/browsers?

I mitt fall gällde det Verdana, men jag antar att svaret inte har att göra med vilket typsnitt man väljer?

Någon som vet hur man skall göra?

Lindahl 2007-02-04 18:13

Jag kör alltid med medium/small/x-small osv. Tycker att det funkar bäst i flest webbläsare och är också ganska intiutivt. Man slipper hålla på och tänka på vad 80% av 90% är som det lätt blir om man har mycket nästlade taggar. Dock ballar IE5 ur (visar en storlek för stort, som om man väljer "textstorlek: större" i menyn), men det känns som att man kan leva med numera, antalet IE5-användare är ganska litet.

martine 2007-02-04 19:01

Citat:

Originally posted by swan@Feb 4 2007, 19:07
När jag provade min nydesignade sida i firefox/mac så kunde jag knappt se texten. Men på PC, där jag designade sidan, ser allting bra ut.

Jag har med css satt normaltexten till att vara 75% och viss text till att vara 75% av 75%. Uppenbarligen har jag tänkt fel... Är det bäst att sätta pixlar eller hur skall man göra för att få det att se någolunda lika ut i olika os/browsers?

I mitt fall gällde det Verdana, men jag antar att svaret inte har att göra med vilket typsnitt man väljer?

Någon som vet hur man skall göra?

Om man vill sätta procentstorlekar så bör man sätt någon fast grundstorlek att bygga på (du säger du sätter procent men av vad?) Sätt t ex:
body {font-size: small}
för att visa att du bygger dina procent på storleken small. (Problemet för IE 5.O kvarstår dock även med denna lösning)

I IE7 borde man väl kunna ändra textstorlek även om den är satt som px, eller?

För övrigt brukar utseendet i Firefox på Mac och PC vara närmast identiskt. Du kanske snarare menar att det är skillnad mellan IE på pc och Firefox på mac?

dAEk 2007-02-04 19:15

Använd procent (%) eller em. Båda utgår från användarens inställningar i webbläsaren. Det är ingen höjdare att använda em eller % om du inte använder en flexibel enhet även för sidstrukturen, exempelvis px. I sådana fall kommer inte texten att rymmas så bra i sina "containers" om användaren förstorar texten och det kan bli svårt att läsa. Detsamma gäller om man mörminskar texten; för många tecken på samma rad gör att det blir svårt att hålla koll på vart man är (och svårt att läsa, givetvis ;)).

Det är användarna som läser texten och har de ställt in att texten ska vara si eller så stor tycker inte jag att man som utvecklare/ägare/webbnisse ska försöka påtvinga en annan storlek bara för att man själv tycker att det är snyggt. Det finns förmodligen en anledning till att man ställt in viss textstorlek.

Standout 2007-02-04 22:56

Att sätta textstorleken till omkring 75% i body och sedan ange resten i em brukar fungera rätt fint.

swan 2007-02-05 10:00

Jag satte 75% i body, det såg bra ut i firefox pc, men såg konstigt ut på firefox mac.

nu skall jag strax prova att sätta "small" (har mac hemma så jag kollar ikväll).

Jag konstaterade precis att google skriver <font size="-1"> på sin förstasida och att Webmasternetwork använder css och skriver 8.5pt

Verkar klurigt det här... :-)

Björn 2007-02-05 11:37

Man bör använda sig av relativa storlekar i css. Dvs em, % eller de definierade värdena. Dock, det är mer komplicerat att göra det, och ofta tycker jag inte värt besväret alla ggr, speciellt inte att vara konsekvent genom hela dokument. Probmelet med pixlar är att de är ett så vagt mått i dessa sammanhang.

Kaffe 2007-02-05 12:27

Värt att kommentera att i princip alla moderna webbläsare har en text-zoom numera. Pixlar är fortfarande det mest precisa värdet: En pixel är alltid en pixel. För pedanten så är pixlar fortfarande gångbart.

För den mindre pedantiska så är en kombination av Procent och Em mest önskvärt.

Kod:

html,body { font-size: 100.1% }
Garanterar att texten aldrig blir för liten för att läsa i Internet Explorer (med teckenstorlek liten).

En Em är lite drygt 16px stor, så om man vill ha motsvarande 12px text så ställer man helt enkelt teckenstorlek till följande:

Kod:

p { font-size: 0.8em }
Rent ärligt är det här det mest flexibla sättet. Ifall man vill vara lite klyftig kan man också ställa in font-size för body till 63% vilket är ungefär 10px. Då kan man räkna em i runda och fina tal, eftersom en em då är 10px.

Men, som sagt, är man mer hemma med pixlar och känner för det mer så är det gångbart. Ett litet tips i o f, är att undvika 10px storlek, som kan bli lite mindre än tänkt ibland. Tänk på vilket storlek du själv hade viljat läsa en text. 12px är nästan minimum, om du frågar mig.

obe 2007-02-05 12:40

Rekommenderad läsning för alla:

The 100% Easy-2-Read Standard
http://www.informationarchitects.jp/100e2r

Kaffe 2007-02-05 12:46

Citat:

Originally posted by obe@Feb 5 2007, 12:40
Rekommenderad läsning för alla:

The 100% Easy-2-Read Standard
http://www.informationarchitects.jp/100e2r

Kanske värt att notera att det är teckenstorleken eller radhöjden som är de värsta boxarna i dramat (även om de bidrar), något många glömmer är radbredden.

Björn 2007-02-06 01:44

Jag skulle vilja säga att det är beroende på situation vad som är bäst. I artikeln där så förespråkas stor text och smal bredd på rader osv. Det är ju fine i vissa fall, men på vissa siter kan det vara ofunktionellt med. Alla vet och förstår att det är lättare att se text som är 20 punkter svart på vitt, men ja, det är inte alltid just läsbarhet av text är det primära målet, även om den ska vara tydlig och lättläst snarare är det endast i undantagsfall det man är ute efter med en site, och jag är väl av den åsikten att man egentligen bör ge ut en bok om man verkligen vill att folk ska ta till sig mängder av textmassa (det har jag snott från Nielsen btw) :) Problemet med text på webben är visst ofta relaterat till storlek osv, men lika ofta med taskig copy (om man ser till företagssidor) och dålig förståelse för vad som fungerar när etc. Skriva "on the point" osv osv.

pitbull 2007-02-06 12:55

Här finns det också en hel del bra info på svenska om storlekar och webbtypografi bl.a.
http://www.fyrisfonts.com/artiklar/default.asp

Header 2007-02-06 16:12

För att användarvänligheten ska bli så stor som möjligt är det bäst att använda em för att ange storleken. Så här är det.

1em är lika med den aktuella font storleken. Med 2em menas 2 gånger storleken av den aktuella fonten. Betyder att om ett element visas med en font av12 pt, Då blir '2em' lika med 24 pt. 'em' är en väldigt användbar enhet i CSS, då det anpassar sig automatiskt till storleken på fonten som den som läser sidan har ställt in i sin webbläsare.

Prova att ändra standard teckensnitt och storlek i FF/mac

Seattlegrunge 2007-02-06 17:11

Sätter alltid fontstorleken till 62.5% i body, detta för att 62.5% motsvaras av 10px i de moderna webbläsarna. 10px är också en jämn fin siffra att utgå ifrån, eftersom den är grunden till hela sidan. För de olika elementen/objekten använder jag sedan em för att öka eller minska fontstorleken.

Vill jag t ex ha en brödtext med 11px någonstans på sidan i en div som heter test så skriver jag bara:

div. test {
font-size: 1.1em;
}

Har inte upplevt problem i Firefox på mac med detta.

Kaffe 2007-02-07 08:55

Citat:

Originally posted by Seattlegrunge@Feb 6 2007, 17:11
Sätter alltid fontstorleken till 62.5% i body, detta för att 62.5% motsvaras av 10px i de moderna webbläsarna. 10px är också en jämn fin siffra att utgå ifrån, eftersom den är grunden till hela sidan. För de olika elementen/objekten använder jag sedan em för att öka eller minska fontstorleken.
De moderna webbläsarna använder en textzoom, pixlar fungerar lika bra där. Så "base font" kan du sätta till 10px för dessa.

IE har lite svårt för decimaler så font-size: 63% passar bättre ;).

Tänkte bara inflika med det. Delvis eftersom jag redan skrivit (ungefär detsamma) en gång i den här tråden.

dAEk 2007-02-07 10:10

Citat:

Originally posted by Kaffe@Feb 7 2007, 09:55
De moderna webbläsarna använder en textzoom, pixlar fungerar lika bra där. Så base font kan du sätta till 10px för dessa.
Inte IE 6, om man nu kan kalla den modern. ;) Textzoomen funkar inte i IE 6 om man anger teckenstorleken i px eller pt.

Sen är det lite missvisande att säga att 1em är ungefär lika med 16px. Det beror helt på besökarens inställningar. Har man ändrat teckenstorlek i ens webbläsare kanske 1em snarare är runt 24px, bara för att ta ett exempel.

Kaffe 2007-02-07 10:27

Citat:

Ursprungligen postat av dAEk
Citat:

Ursprungligen postat av Kaffe
De moderna webbläsarna använder en textzoom, pixlar fungerar lika bra där. Så base font kan du sätta till 10px för dessa.

Inte IE 6, om man nu kan kalla den modern. ;) Textzoomen funkar inte i IE 6 om man anger teckenstorleken i px eller pt.

Sen är det lite missvisande att säga att 1em är ungefär lika med 16px. Det beror helt på besökarens inställningar. Har man ändrat teckenstorlek i ens webbläsare kanske 1em snarare är runt 24px, bara för att ta ett exempel.

IE 6 är ju lika modern som min mormor <_<

Men det är just därför som man skall definiera font-size: 63% för IE explicit. Eller 100.1%, där 0.1% läggs till pga eventuella avrundningsbuggar i vissa ljusskygga webbläsare. Det mesta har jag också nämt två gånger nu.

Conditional comments gör jobbet för mig i a f när det gäller IE:
Kod:

<!--[if lt IE 7]>
  <link media="screen, projection" rel="stylesheet" href="assets/css/ie.css" type="text/css">
 <![endif]-->

En em är, per default, ungefär 16px. Egentligen, ur rent typografiska termer är det bredden för bokstaven M.

Mycket riktigt är det ett flexibelt mått, också därför som det är rekommenderat att ställa in ett bas-värde för body, om man nu faktiskt inte vill ge full kontroll till användare (vilket inte är fel det heller, faktiskt).

Kanske repeterar jag självklarheter. Men å andra sidan är det ju värt att diskutera.


Alla tider är GMT +2. Klockan är nu 14:36.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson