Denne typografi test side demonstrerer de forskellige typografiske stilarter, der er mulighed for at vælge til forskellige felter i WordPress editoren. Brug den til at teste fonte og opsætning af dit tema.

Som du måske kan se er dette en standard afsnitsblok. I den kan du inkludere hyperlink – links i daglig tale – til andre sider. Det kan være til andre sider på samme websted eller til eksterne sider. Når du gør det, så bør link-teksten være beskrivende for den side, du henviser til. For eksempel er “læs om WordPress serviceaftaler” en langt bedre måde at lave links end hvis der havde stået: “for mere om WordPress serviceaftaler, klik her“. Det er en god vane at lade links til eksterne sider (andre websteder) åbne i en ny fane eller et nyt vindue, så du som bruger stadig har adgang til den side, du kom fra, når du er færdig med at læse på den side, du blev henvist til.

Det næste afsnit indeholder fremhævet tekst (ofte skrevet med fed skrift, Ctrl+B) og noget skrevet med kursiv (Ctrl+I). Du kan også lave tekst, der er både fremhævet og kursiv, hvis du har lyst. Denne sætning bruger vi til at teste understreget tekst (Ctrl+U); ofte brugt til links, men ikke altid. Hvis du markere links med understregning, så bør du undgå at bruge den funktion andre steder, men i stedet bruge for eksempel markering. Endelig kan vi også ~~bruge gennemstregning~~ til at vise forældet tekst. Før vi kigger på overskrifter, så lad os lige teste citatblokken:

HTML <blockquote> tag er et semantisk element, der bruges til at citere tekst fra en anden kilde. Med den nye editor har vi WorPress fået mulighed for tilføje attributten ‘cite’ for at vise, hvem der citeres. Førhen krævede det en manuel redigering af HTML i teksten.
Nu skal vi se på HTML Overskrifter.
Morten Ellegaard Larsen, ellegaard ID

Overskrift 2 – dette H2 element vil forhåbentlig også blive skubbet ned på den næste linje

Overskrifter bruges til at adskille tekster med angivelse af deres vigtighed. Som standard er sidetitlen i WordPress altid angivet som en H1, da det er den vigtigste overskift på en side. En websides H1 har betydning for hele sidens SEO. Du kan se at dette afsnit vores typografi test blev præsenteret med en H2, det næste niveau i hierarkiet af overskrifter.

Kombinationen af to forskellige skrifttyper til henholdsvis overskrifter og brødtekst kaldes ofte et ‘font-par’

Overskrift 3 i typografi test

Ingen typografi test uden et typografisk billede — Det er trods alt blevet noget lettere at lave en typografi test

Denne sektion i vores typografiske test med tekst blev indledt med en Overskrift 3. Det er sjældent at websider har behov for flere end tre niveauer af overskrifter og rubrikker. Men ikke desto mindre er vi kun halvvejs.

Brug overskifterne til at dele teksten op i mindre bidder og lad overskriften fortælle om indholdet. På den måde bliver det nemt at skimme ned gennem teksten og finde den information, jeg leder efter. Hvis du laver en indholdsfortegnelse øverst på siden, så kan du bruge overskrifterne til at lave den automatisk. Det findes der nu en blok til.

Lad os lave en horisontal linje her, for at se, hvordan den ser ud.

Overskrift 4 som en typografisk test

Tænk, vi er allerede nået til niveau 4 i overskrifter denne typografiske test? Det betyder at dette afsnit indeholder tekst, der kun har en understøttende funktion i forhold til det primære indhold, og ikke noget med stor betydning. Nu vi er her, så lad os lige prøve at indsætte en anden teksttype: Præformatteret tekst:

Preformatted text, set in the HTML <pre> tag is designated as having 'unusual' formatting although in practice, most people use it to display computer code.

Det skrider fremad, men vi har stadig en del flere WordPress stilarter, vi skal have kigget på i vores typografiske test.

Typografi test Overskrift 5

Vi er nu nede ved nogle af de mindst betydningsfulde overskrifter. I modsætning til H1, H2 og H3, så har H4, H5, og H6 ikke nogen særlig betydning, når søgemaskinerne evaluere på en side indhold. De bør derfor mere bruges til opbrydning af en tekstsides præsentation end til at vise vigtighed. Men mens vi er ved denne del af typografi test, så lad os lige tage et kig på den ikke-prioriterede liste, bedre kendt som en punktopstilling

Punktlister skrives i HTML med <ul>tag, hvor ul står for “Unordered List”
I punktlister startes hvert punkt med en prik eller lignende i stedet for et tal
Punktlister kan bruges til ting og bør altid bruges, hvor der ikke er nogen bestemt rækkefølge eller prioritering i listen
Som i et hvert andet typografisk element kan punktlister også indeholde hævet skrift and sænket skrift. Hævet skrift bruges ofte til flade- og rumangivelser (m² eller dm³) fodnoter^[1], mens sænket skrift oftes bruges til angivelse af kemiske betegnelser som: H₂SO₄.

Selvfølgelig er der ind i mellem behov for at lave lister, hvor rækkefølgen er vigtig. Til det brug har vi den nummererede liste. I de situationer gør vi brug af HTML <ol> tag hvor ol står for Ordered List:

Som du kan se, bruges der her tal foran punkterne
Disse tal vil automatisk tilpasse sig, hvis du tilføjer eller sletter punkter – eller flytter om på rækkefølgen – for at holde talrækken konstant
På trods af at der faktisk eksisterer en sådan fantastisk liste, er der stadig personer, der insisterer på selv at angive 1.) 2.) og 3.) i starten af et afsnit i stedet for at bruge en automatisk talliste.

Med det ude af verden kan vi runde typografi test af med at tage et hurtigt kig på en H6 og de sidste par stilarter.

Denne tekst er sat med overskrift 6. Den er god til det med småt.

Som du kan se, bruger vi ofte overskift 6 til at skrive “det med småt”. den har så minimal betydning, at det er meget usandsynligt, at søgemaskiner vil bruge den til vurdere en sides SEO-kvaliteter. Så hvorfor ikke bruge den som en stilart til præsentation af tekst?

Lad os her til slut lige gå igennem mine notater om at tilføje andet typografisk indhold til en side. I den typogafi test giver det god mening af opstille dem på punktform:

Hvis du vil indsætte et symbol i din typografi test, er du nødt at være lidt kreativ. Enten indtaste en ‘HTML entity’ eller installere et plugin. Det er den eneste måde, du kan få adgang til at indsætte tegn som ™ eller ©. Eller du kan kopier dem ind!
Når du indsætter tekst fra en anden kilde, så brug gerne genvejen Ctrl+Shift+V for “Indsæt som tekst”. Så er du sikker på, at al formattering er fjernet. Gør du det ikke, indsættes overflødig og måske ødelæggende HTML på din side

Formularer i typografi test

Dette kan kun testes ved manuelt at indsætte HTML for oprettelse af en formular, da de fleste plugin selv indsætter formattering i formularen.