Fonttype og -størrelse på tekst med HTML
Grundliggende definition af fonttype
Der er i dag reelt kun én måde at definere fonttypen på, og det er med STYLE="font-family:navn", hvor navnet på fonten skrives i ping'er, dvs. 'Times New Roman' og 'Arial'. Man kan i ældre litteratur se tag'en <FONT>, og den vil antageligt fungere for nogle browsere, så længe man programmerer efter HTML 4, men det er ikke en gangbar løsning på en moderne hjemmeside.
De fleste browsere har Times New Roman som default til tekst, og det er en udmærket font til mange ting. Sitet her bruger Times New Roman til overskrifter men Arial til brødtekst, da den er bedre at læse på computerskærme. Stylen font-family kan lægges på alle tags der har tekst, dvs. ud over de almindelige tekstafsnit som <DIV> og <SPAN>, kan den også bruges til f.eks. en række eller celle i en tabel med hhv. <TR> og <TD>. På en <SPAN> hvor vi vil skifte fra vores standard Arial til Times New Roman ser koden således ud:
På siden, når den vises, ser det således ud:
Det er til hjemmesider altid en god idé at have defineret en standardfont som siderne skal bruge, med mindre andet er defineret. Den hurtigste og letteste måde at gøre dette på, er at definere fonttypen i BODY-tag'en. Hvis man er lidt praktisk, definerer man det i CSS-filen.
De fleste browsere har Times New Roman som default til tekst, og det er en udmærket font til mange ting. Sitet her bruger Times New Roman til overskrifter men Arial til brødtekst, da den er bedre at læse på computerskærme. Stylen font-family kan lægges på alle tags der har tekst, dvs. ud over de almindelige tekstafsnit som <DIV> og <SPAN>, kan den også bruges til f.eks. en række eller celle i en tabel med hhv. <TR> og <TD>. På en <SPAN> hvor vi vil skifte fra vores standard Arial til Times New Roman ser koden således ud:
Her er der normal tekst, <SPAN STYLE="font-family:'Times New Roman'">her bliver teksten med Times New Roman,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten med Times New Roman, og her bliver den normal igen.
Det er til hjemmesider altid en god idé at have defineret en standardfont som siderne skal bruge, med mindre andet er defineret. Den hurtigste og letteste måde at gøre dette på, er at definere fonttypen i BODY-tag'en. Hvis man er lidt praktisk, definerer man det i CSS-filen.
Grundliggende definition af fontstørrelse
Der er i dag reelt kun én måde at definere fontstørrelsen på, og det er med STYLE="font-size:størrelse". Man kan i ældre litteratur se attributten SIZE til nogle af tags'ene, og den vil antageligt fungere for nogle browsere, så længe man programmerer efter HTML 4, men det er ikke en gangbar løsning på en moderne hjemmeside.
Hvilken fontstørrelse man skal anvende afhænger helt af fonttypen og layout. Den generelle anbefaling er, at man gør teksten så stor, at den let kan læses. Herfra er man nødt til at prøve sig lidt frem.
Fontstørrelser kan defineres på tre måder: størrelse i punkter (pt), størrelse i pixels (px) og størrelse i centimeter (cm) eller millimeter (mm). Man kan også definere på anden måde, f.eks. procenter, men det kræver, at man har defineret en udgangsstørrelse, f.eks. i BODY-tag'en. Relative fontstørrelser kommer i næste afsnit. Om man vælger pt eller px er en smagssag, man skal blot huske at være konsekvent og kun bruge den ene type, så man ikke kommer galt afsted med størrelsesforholdene.
Som kode ser skaleringen således ud:
På siden, når den vises, ser det således ud:
BEMÆRK: Pixels (px) skal være heltal, da man ikke kan have f.eks. halve eller kvarte pixels på en skærm. Punkter (pt), centimeter (cm) og millimeter (mm) kan, uden problemer, være decimaltal.
Hvilken fontstørrelse man skal anvende afhænger helt af fonttypen og layout. Den generelle anbefaling er, at man gør teksten så stor, at den let kan læses. Herfra er man nødt til at prøve sig lidt frem.
Fontstørrelser kan defineres på tre måder: størrelse i punkter (pt), størrelse i pixels (px) og størrelse i centimeter (cm) eller millimeter (mm). Man kan også definere på anden måde, f.eks. procenter, men det kræver, at man har defineret en udgangsstørrelse, f.eks. i BODY-tag'en. Relative fontstørrelser kommer i næste afsnit. Om man vælger pt eller px er en smagssag, man skal blot huske at være konsekvent og kun bruge den ene type, så man ikke kommer galt afsted med størrelsesforholdene.
Som kode ser skaleringen således ud:
Her er der normal tekst, <SPAN STYLE="font-size:18.0pt">her bliver teksten med 18.0pt,</SPAN> og her bliver den normal igen.
Her er der normal tekst, <SPAN STYLE="font-size:18px">her bliver teksten med 18px,</SPAN> og her bliver den normal igen.
Her er der normal tekst, <SPAN STYLE="font-size:18mm">her bliver teksten med 18mm,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten med 18.0pt, og her bliver den normal igen.
Her er der normal tekst, her bliver teksten med 18px, og her bliver den normal igen.
Her er der normal tekst, her bliver teksten med 18mm, og her bliver den normal igen.
BEMÆRK: Pixels (px) skal være heltal, da man ikke kan have f.eks. halve eller kvarte pixels på en skærm. Punkter (pt), centimeter (cm) og millimeter (mm) kan, uden problemer, være decimaltal.
Relative fontstørrelser
Relativ størrelse skal bruges med nogen omtanke. Der er til HTML en række muligheder, som ikke alle er lige veldefinerede:
Fordi der en forskel på browserne og hvordan de fortolker de forskellige størrelsesforhold, kan man ikke vide sig sikker på, at f.eks. small altid reducerer størrelsen lige meget, hvilket kan give problemer med layout. Løsningen er at bruge %, f.eks. i en CLASS i CSS, og holde sig langt fra størrelser der ikke er veldefinerede.
De relative størrelser bruges fuldt ud ligesom de absolutte fontstørrelser, f.eks. procenter:
På siden, når den vises, ser det således ud:
| Værdi | Beskrivelse |
| medium | Sætter fontstørrelsen til størelse medium. Dette er default |
| xx-small | Sætter fontstørrelsen til størelse xx-small |
| x-small | Sætter fontstørrelsen til størelse extra small |
| small | Sætter fontstørrelsen til størelse small |
| large | Sætter fontstørrelsen til størelse large |
| xx-large | Sætter fontstørrelsen til størelse xx-large |
| smaller | Sætter fontstørrelsen til en størrelse, der er mindre en forældreelementet |
| larger | Sætter fontstørrelsen til en størrelse, der er større en forældreelementet |
| % | Sætter fontstørrelsen til en procentdel af forældreelementet |
| initial | Sætter fontstørrelsen til initialværdien for typen af element |
| inherit | Nedarver værdien fra forældreelementet. |
Fordi der en forskel på browserne og hvordan de fortolker de forskellige størrelsesforhold, kan man ikke vide sig sikker på, at f.eks. small altid reducerer størrelsen lige meget, hvilket kan give problemer med layout. Løsningen er at bruge %, f.eks. i en CLASS i CSS, og holde sig langt fra størrelser der ikke er veldefinerede.
De relative størrelser bruges fuldt ud ligesom de absolutte fontstørrelser, f.eks. procenter:
Her er der normal tekst, <SPAN STYLE="font-size:150%'">her bliver teksten med 150 % Størrelse,</SPAN> og her bliver den normal igen.
På siden, når den vises, ser det således ud:
Her er der normal tekst, her bliver teksten med 150 % Størrelse, og her bliver den normal igen.