Usikker på hvor mange piksler fonten, målt i punkter, i Photoshop er? Eller hvor mange prosent dine em egentlig er? Her er en tabell som orienterer deg om de ulike forholdene.
| Points | Pixels | Ems | Percent |
| 6pt | 8px | 0,5em | 50% |
| 7pt | 9px | 0,55em | 55% |
| 7,5pt | 10px | 0,625em | 62,5% |
| 8pt | 11px | 0,7em | 70% |
| 9pt | 12px | 0,75em | 75% |
| 10pt | 13px | 0,8em | 80% |
| 10,5pt | 14px | 0,875em | 87,5% |
| 11pt | 15px | 0,95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1,05em | 105% |
| 13,5pt | 18px | 1,125em | 112,5% |
| 14pt | 19px | 1,2em | 120% |
| 14,5pt | 20px | 1,25em | 125% |
| 15pt | 21px | 1,3em | 130% |
| 16pt | 22px | 1,4em | 140% |
| 17pt | 23px | 1,45em | 145% |
| 18pt | 24px | 1,5em | 150% |
| 20pt | 26px | 1,6em | 160% |
| 22pt | 29px | 1,8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2,2em | 220% |
| 27pt | 36px | 2,25em | 225% |
| 28pt | 37px | 2,3em | 230% |
| 29pt | 38px | 2,35em | 235% |
| 30pt | 40px | 2,45em | 245% |
| 32pt | 42px | 2,55em | 255% |
| 34pt | 45px | 2,75em | 275% |
| 36pt | 48px | 3em | 300% |
Helt korrekt går det selvsagt ikke an å være her, men det er et godt utgangspunkt. Alt er relativt, f.eks. em – bokstavelig talt. Til syvende og sist er det jo alltid viktig at du finjusterer selv, og ikke stoler blindt på noen tabell.
Tabellen er hentet fra eminente ReedDesign.
Det er også delte meninger om når de ulike «måleenhetene» skal brukes. em skal være best for typo, mens pt kanskje ikke blir brukt så fryktelig mye på nett. Jeg har fått litt følelser for px, men er åpen for killer-argumenter for hva du tenker om pt, px, em og %.
Lek deg til alt blir pixel … eller percent? … perfect! :-)
Elskbar tabell. Takk!
Det jeg bruker mest er definitivt PX. Og % bruker jeg bare til å sette 100% bredde og lignende. EM og PT har jeg egentlig ingen erfaringer med, bare pt i PS.
Må vel innrømme først som sist at eg aldri eller ultrasjelden kjem til å nytta meg av denne tabellen, men eg veit i alle fall kor eg skal vende snuta om eg treng det!
Sjølv nyttar eg PX for designet i ei nettside både i Photoshop og i koden, og PT/EM i typografien i henholdsvis Photoshop og kodeprogrammet.
Det kommer nok an på om tabellen er nyttig, ja, men kan være kjekk å ha.
Jeg bruker de nesten akkurat likt som deg, Espen! :)
Hei Mattis.
Denne tabellen er interessant, og alle (i alle fall som jobber med web) burde kjenne til den. Em har i mange tilfeller irritert vettet av meg ved å måtte regne ut hvor mange em som tilsvarer for eksempel 18 px etc. Men så fikk jeg ett godt tips, og siden den gang har bruken av em vært lekende lett. Jeg bruker alltid en ”reset CSS” når jeg lager nettsider, hvor jeg blant annet definerer body font-size til 62,5 % . Dette påvirker da all fontsetting videre på siten slik at 1em tilsvarer 10px. Da vil for eksempel 13px = 1.3 em, 18px =1.8 em osv – lekende enkelt :)
En annen ting som er verdt å nevne er bakgrunnen for pt (point) og px (pixels). I utgangspunktet er pt ment for print og px for skjermbaserte medier, som f.eks. web. Selv om nettlesere støtter font satt i pt, så er ikke dette å anbefale. Det er nemlig forskjell mellom nettlesere i hvordan de rendrer pt, men ikke minst også stor forskjell mellom PC og Mac. På Mac rendres pt og px likt og gir nøyaktig samme resultat, men på PC rendres dette forskjellig og fonten blir mye mindre. Om du har designet en nettside i Photoshop og setter alle fontene i pt, vil dette garantert bli ”funky” implementert om utvikleren sitter på PC og følger dine Photoshop filer til punkt og prikke. Jeg gjorde dette selv en gang, glemte å sette fonten til px (ser jo likt ut for meg uansett, som sitter på Mac, så tenkte ikke over det). Men heldigvis sa de som skulle implementere i fra om at skissene så veldig rare ut. Så,om du som sitter på Mac har satt opp en nettside med fonter i pt, som ser smashing ut for deg – så oppleves dette, for dine besøkende som har PC, mest sannsynlig ganske så ”shitty” (excuse my French).
Så, for å være sikker, når du setter opp CSS-stil-ark for web, bruk alltid px eller em. Da aller helst em, med tanke på ems skalerbarhet og ems mobile-enheter-vennlighet.
Ah, det var jo et genialt tips, Jens Fredrik!
Og ja, det er ikke bare-bare, hvordan de ulike «måleenhetene» rendrer, på tvers av ulike systemer. Takk for goe tips om dette – flott å dele erfaringer om slike ting! :-)
Leste Jens Fredrik sitt innlegg, og dette tipset er bare så bra! Jeg leste Bullettproof webdesign forrige uke, og fikk med meg tipset om 62,5% og det gjorde det så mye lettere da jeg skulle endre til ems i stilsettet mitt. Nå venter jeg på neste bok fra Dan Cederholm i posten:)