Der Text
Jetzt der Text in der Karte. Der Entwurf sagt:
- Der ganze Text in der Karte ist zentriert und in einer serifenlosen Schrift: Wähle die, die dir gefällt, aber beende die Liste mit der generischen Schriftfamilie.
- Der Name ist 24px groß.
- Die Beschreibung (der Absatz über Lena) hat Zeilen, die 1,6-mal so hoch sind wie ihre Schriftgröße, damit sie gut lesbar ist.
- Die Berufsbezeichnung unter dem Namen ist grau,
#6b7280, 14px groß und in Großbuchstaben, mit 2px Abstand zwischen den Buchstaben.
Lass den Text im HTML, wie er ist: Hier sind die Großbuchstaben eine Frage des Aussehens, und das Aussehen gehört ins CSS.
Nach dieser Übung sieht die Karte so aus (verkleinert):
LN
Lena Neumann
Webdesignerin
Ich gestalte Websites für kleine Unternehmen: Cafés, Buchläden und Tierheime. Ich mag übersichtliche Layouts, gut lesbaren Text und eine Katze auf dem Schoß, während ich arbeite.
Leipzig, Deutschland
lena@example.com
Offen für neue Projekte
Ein Tipp: Du musst Schrift und Ausrichtung nicht für jedes Element einzeln festlegen. Denke daran, welche Eigenschaften vererbt werden.
So schreibst du es:
"Shift + 2
{Alt Gr + 7
}Alt Gr + 0
##
Anweisungen
- 1
Der ganze Text in der Karte ist zentriert und in einer serifenlosen Schrift. Der Name ist 24px groß, und die Zeilen der Beschreibung sind 1,6-mal so hoch wie ihre Schriftgröße.
- 2
Die Berufsbezeichnung ist grau, 14px groß und in Großbuchstaben, mit 2px zwischen den Buchstaben.