Svep för att visa menyn

God typografi förbättrar läsbarheten och den visuella strukturen. I detta kapitel fokuserar vi på egenskaper som styr avstånd och subtila visuella effekter för text: line-height, letter-spacing, word-spacing och text-shadow.

Dessa egenskaper bidrar till att göra texten lättare att läsa och visuellt balanserad.

line-height

line-height styr det vertikala avståndet mellan textrader. Webbläsare sätter ett standardvärde baserat på typsnittet, men du kan anpassa det med flera format:

line-height: multiplier | value in px | value in em | percent

multiplier enhetslöst värde som 1.5 multiplicerar font-size;
value in px specifik höjd, t.ex. 24px;
value in em relativt värde, liknande multiplier (1.4em = font-size × 1.4);
percent fungerar som multiplier (120% = font-size × 1.2).

index.html

styles.css

Utdata

letter-spacing

letter-spacing anger det horisontella avståndet mellan tecken.

letter-spacing: normal | value in px | value in em

normal: standardavstånd;
value in px: fast extra avstånd;
value in em: avstånd relativt till font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing justerar avståndet mellan ord.

word-spacing: value | inherit | normal

value: anpassat avstånd;
inherit: använder föräldraelementets avstånd;
normal: standardavstånd.

index.html

styles.css

Utdata

text-shadow

text-shadow lägger till en skuggeffekt på text. Den accepterar fyra värden:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: horisontell förskjutning;
Y set: vertikal förskjutning;
blur radius: mjukhet på skuggan (0 = skarp);
color: valfri giltig färg, standard är aktuell textfärg.

index.html

styles.css

Utdata

Notering

Vid textformatering finns det inga strikta regler som bestämmer vilka värden som måste användas i specifika situationer. Valet av textformateringsegenskaper och värden beror på projektets unika krav och designvision.

1. Vilken CSS-egenskap används för att skapa en visuell effekt som lägger till en skugga på text?

2. Vilken CSS-egenskap justerar avståndet mellan ord i en text?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 7

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Textformatering för Bättre Läsbarhet

Dessa egenskaper bidrar till att göra texten lättare att läsa och visuellt balanserad.

line-height

line-height styr det vertikala avståndet mellan textrader. Webbläsare sätter ett standardvärde baserat på typsnittet, men du kan anpassa det med flera format:

line-height: multiplier | value in px | value in em | percent

multiplier enhetslöst värde som 1.5 multiplicerar font-size;
value in px specifik höjd, t.ex. 24px;
value in em relativt värde, liknande multiplier (1.4em = font-size × 1.4);
percent fungerar som multiplier (120% = font-size × 1.2).

index.html

styles.css

Utdata

letter-spacing

letter-spacing anger det horisontella avståndet mellan tecken.

letter-spacing: normal | value in px | value in em

normal: standardavstånd;
value in px: fast extra avstånd;
value in em: avstånd relativt till font-size.

index.html

styles.css

Utdata

word-spacing

word-spacing justerar avståndet mellan ord.

word-spacing: value | inherit | normal

value: anpassat avstånd;
inherit: använder föräldraelementets avstånd;
normal: standardavstånd.

index.html

styles.css

Utdata

text-shadow

text-shadow lägger till en skuggeffekt på text. Den accepterar fyra värden:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: horisontell förskjutning;
Y set: vertikal förskjutning;
blur radius: mjukhet på skuggan (0 = skarp);
color: valfri giltig färg, standard är aktuell textfärg.

index.html

styles.css

Utdata

Notering

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 7