Principeksempel 1

1-spaltet “naturligt” layout

Retur til foregående

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed di am nonummy nibh euismod

Den grå baggrund herover viser, hvor meget 65 tegn fylder. 65-75 tegn er den optimale linielængde.

Stylesheet

html, body {margin:0;padding:0;}
body { font-family:georgia,arial,sans-serif; }
span.graa {background-color:#ddd;}
#indhold {
  width:90%;
  max-width:45em;
  border:1px solid black;
  background:#eef;
  padding:1em;
  margin:1em auto;}
p {margin: 0 auto 0.5em auto;}

Kommentarer til stylesheet'et

  1. Jeg sætter altid margin og padding til 0 for så vel html-markøren som body-markøren. Så er jeg sikker på mit udgangspunkt. Det er nødvendigt, for forskellige browsere sætter forskellige værdier ind for padding og/eller margin på html-elementet og/eller body-elementet. Det er rent ud sagt noget værre rod, så derfor foretrækker jeg at starte fra nul, og så selv bestemme om jeg vil have padding eller margin på body-elementet.
  2. div#indhold-elementet, der omklamrer alt indhold på siden, har fået en max-bredde på 45 em'er, det giver en linielængde på ca. 90 tegn med den valgte skrift. Til sammenligning kan du betragte de tre nederste afsnit med mumletekst, der har fået skrifterne verdana, arial og times, henholdsvis.
  3. div#indhold-elementet har også fået en padding på 1 em, for at skabe lidt afstand mellem teksten og elementets ramemkant.

Ved normal visning af denne side fylder den 530 pixel fra venstre kant af browservinduet til højre kant af indholdskassen. Det øges til ca. 640 pixel, hvis tekststørrelsen øges med ét trin ved hjælp af browserens tekststørrelsesværktøj.

Noget om skrift og skriftstørrelser

Jeg bruger dette eksempel til at demonstrere et måske lidet påagtet forhold vedr. størrelsen på forskellige almindelige skrifter, se teksterne herunder. De fire tekstafsnit er nøjagtigt lige lange, det vil sige de har samme indhold. Skriftstørrelsen er også den samme i alle 4 afsnit, nemlig 1 em.

Jeg synes der er forbavsende stor forskel på det visueller udtryk af de fire forskellige skrifter, deres eventuelle fortrin og mangler i øvrigt ufortalt.

Skrifterne er, fra oven og nedefter:

  1. Georgia
  2. Verdana
  3. Arial
  4. Times

Det var et eksperiment som dette, der for mogle år siden fik mig til at beslutte 1) at anvende georgia som grundskrift på mine websider og 2) at bruge arial som første substitut.

For det første kan jeg ved selvsyn erkende, at vi ikke længere behøver at nære tidligere tiders bekymringer i forhold til at anvende en serif skrift som grundskrift, hvis blot skriften har en passende størrelse. Og det synes jeg georgia har, også i den “naturlige” størrelse (1em ~ 16 pixel ~ font-size:medium;) man får, hvis man ikke sætter nogen eksplicit skriftstørrelse på sine websider.

Med i overvejelsen tæller også, at georgia faktisk er mere hyppigt forekommende på både Windows og MacOS systemer end times, jf. optællingerne på www.codestyle.org.

For det andet må jeg erkende, at valget af times som første subsitut for georgia er en meget dårlig idé. I mine øjne er den alt for lille. Derfor vælger jeg arial som første substitut. Den er meget almindelig på alle platforme, og så fylder den nogenlunde det samme som georigia.

Jeg har, siden jeg oprindeligt skrev denne artikel, lavet endnu et eksperiment vedr. dette emne, se websiden Forskellige skrifttyper, forskellige størrelser

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Senest opdateret 7. apr. 2007