Pixel til Point skrifttyper

February 21

Pixel til Point skrifttyper


Typografi gør en forskel i anvendeligheden af ​​dine websider. Dette problem kompliceres af de mange forskellige skriftstørrelse muligheder i CSS. I stedet for at definere dine skrifttyper i pixels, kan du overveje at konvertere dem til punkter, eller måske en mere brugervenlig foranstaltning som ems eller procenter.

Web Font Størrelser

CSS specifikationer omfatter fire metoder til dimensionering Web tekst: pixels (px), point (PT), procent (%) og EMS (em). Pixels og punkter er både absolutte målinger, med én pixel repræsenterer en skærm pixel, og et point repræsenterer 1/72 tommer. Procent og ems er relative skriftstørrelse målinger, hver i forhold til standard skriftstørrelse sat i den besøgendes browser. For eksempel, hvis den besøgendes standardskriftstørrelsen er 14 pixels, ville en skriftstørrelse på 100 procent repræsenterer 14-pixel skriftstørrelse, som ville en em.

Konvertering Pixels til Points

Konvertering pixel-baserede skriftstørrelser i et typografiark er let at gøre: simpelthen erstatte en størrelse i punkt ( "font-size: 12pt") for størrelsen i pixels ( "font-size: 16px"). Men pixels ikke kort direkte til point, fordi mens punkt størrelse skrifttyper normalt ikke uafhængig af skærmopløsning, skrifttyper størrelse med pixel vises større eller mindre afhængigt af din skærms opløsning. Det betyder, at du bliver nødt til at bestemme størrelsen på din tekst i punkt ved at teste eller bruge en reference diagram.

Fast størrelse Font Issues

Mens fast størrelse skrifttyper tilbyder en grad af kontrol for en webdesigner, kan de forhindre besøgende med nedsat syn eller ved hjælp af mobile enheder fra let at læse teksten. De fleste webbrowsere giver mulighed for at indstille en optimal standard skriftstørrelse, men når seeren støder på en webside med skriftstørrelser i pixel eller punkter, de faste størrelser "break" standardindstillingen. Usability ekspert Jakob Nielsen anbefaler at bruge relative skriftstørrelser af denne grund. Faste størrelser også gøre det sværere at foretage generelle ændringer på en sides typografi, fordi designeren skal ændre hver skrifttype indstilling separat.

Brug relative størrelser

Både procent og em størrelser er baseret på den besøgendes standard skriftstørrelse, gør det muligt for seeren at kontrollere læsbarheden af ​​websiden. Derudover kan du tilføje en størrelse til <body> stil, der fungerer som en "master" størrelse: når du "reden" stilarter bruger procenter eller em størrelser, de indrykkede formater selv i forhold til størrelsen over dem. For eksempel, hvis dit CSS stil for <body> tag indeholder "font-size: 90%" og din stil for <h1> tag indeholder "font-size: 110%," størrelsen af ​​tekst ved hjælp af <h1> tag vil blive vist som 99 procent af den besøgendes standard skriftstørrelse. Dette giver dig mulighed for at justere den relative tekststørrelsen af ​​hele siden ved blot at ændre <body> stil.


relaterede artikler