Differences
This shows you the differences between two versions of the page.
|
mattias_07 [2019-09-23 08:56] Mattias Hamberg [Krav från beställaren] |
mattias_07 [2022-07-18 13:20] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Typografi på internet ====== | ||
| - | I denna uppgift ska du skapa en snygg och lättläst design utifrån några grundläggande typografiska principer. Typografi är en bred term för konsten och hantverket att utforma texter – i tryck eller på skärm – så att textens budskap förmedlas på bästa möjliga sätt, och samtidigt är estetiskt tilltalande för läsaren. | ||
| - | |||
| - | ==== Krav från beställaren ==== | ||
| - | * Använd en tjänst som Google Fonts när du väljer typsnitt. På så vis kan du försäkra dig om att sidan ser likadan ut oavsett dator och typsnittsuppsättning. | ||
| - | * Använd inte fler än två olika typsnitt. Välj ett sans-serif-typsnitt för rubrikerna och ett serif-typsnitt till brödtexten. | ||
| - | * Ingen radlängd bör någonsin vara längre än 80 tecken lång. | ||
| - | * Layouten bör vara indelad i kolumner om skärmen är bredare än 800px. | ||
| - | * Innehållsförteckningen och dess länkar bör, när du använder två kolumner, följa med skärmen när du skrollar. | ||
| - | * Det ska alltid finnas luft i marginalerna. | ||
| - | * Det ska vara ett luftigt utrymme mellan textraderna. | ||
| - | * Det ska vara en rads mellanrum mellan textstyckena | ||
| - | * Använd endast understruken text till hovrade länkar. | ||
| - | * Det ska vara ett avstånd mellan rubriken och dess brödtext. Men inte så långt att relationen mellan rubriken och brödtexten går förlorad. Det ska också alltid vara ett större avstånd ovanför rubriken än under den. | ||
| - | * Det ska vara god kontrast mellan texten och bakgrunden, men undvik helt vita och helt svarta delar. | ||
| - | |||
| - | ==== Önskemål från beställaren ==== | ||
| - | * Lägg gärna till en grå hashtag före alla rubriker. | ||
| - | * Punkterna i innehållsförteckningen får gärna vara cirklar. | ||
| - | * Texten får gärna vara större på breda skärmar än smala. | ||
| - | |||
| - | ===== Instruktioner ===== | ||
| - | - Ladda ner denna {{: | ||
| - | - Skriv din css. Du får inte röra html-markupen. | ||
| - | - Se till att din lösning uppfyller ovanstående krav. Ett exempel på en bra lösning kan du hitta i bildexemplen nedan. | ||
| - | - Försök även få med önskemålen. | ||
| - | - Lämna in din style.css på vklass. | ||