12 feminine Google Schrift- & Farbekombinationen

Farben und Schriftarten – Was für eine Herausforderung!

Warum ist es so schwer eine feminine Google Schrift und Farben für die Webseite zu finden?

• Es stehen Tausende von Möglichkeiten zur Auswahl und noch mehr Kombination von Google Schriften und
• Schriftarten und Farben sind Dein Markenzeichen, sie spiegeln Deine Persönlichkeit auf Deiner Webseite wieder.

Möglicherweise fragst Du Dich:

• Wie wähle ich die perfekte Schriftkombination und die richtige Farbpalette aus?
• Wie setze ich Farben zusammen?
• Ist diese Schriftart eine gute, solide Schriftart?
• Repräsentieren diese Schriftarten und Farben wirklich meine Marke?

Ich kenne dieses Gefühl, es ist verwirrend und kann lähmen. Deshalb hab ich Dir hier 12 Google Font- und Farbkombinationen zusammengestellt, die wunderbar für feminine Webseiten geeignet sind.

Sie sind sehr unterschiedlich, denn feminin kann

• zart,
• elegant,
• romantisch, aber auch
• lebendig,
• stark und
• kraftvoll

bedeuten.

Was Du bei Schrift- und Farbenkombinationen beachten solltest

Es ist schön, unterschiedliche Farben und Schrifttypen zu kombinieren, sie machen eine Webseite lebendig und heben Elemente hervor. Allerdings gibt es auch einige Regeln, die Du kennen solltest.

Schriften- und Schriftkombinationen

Schriften sind ein gutes Mittel für Deine Markenidentität, es macht Sinn die gleichen Schriftarten für Print und Web zu verwenden.

Die verschieden Schriftarten transportieren ein Gefühl, sie kann klar sein (serifenlose Schrift), elegant bzw. seriös (Serifenschrift) oder persönlich (Schreibschrift). Sie sollte zum Lesen einladen und gut lesbar sein.

Das solltest Du bei der Typografie beachten:

• Wähle maximal drei Fonts für Deine Webseite: eine für die Überschriften, eine für den Fließtext und eventuell noch eine Schmuckschrift. Auf Seiten wie Fontpair, kannst Du Dich inspirieren lassen.
• Die Schriftgröße sollte für den Fließtext mindestens 16px. Für Überschriften ist der Standardwert 30px.
• Auch der Zeilenabstand ist wichtig. Er ist immer von der gewählten Schriftart abhängig und sollte weder gedrungen wirken noch zu groß sein.
• Die Textrichtung ist normalerweiser linksbündig, für kleiner Abschnitte darf sie auch zentriert sein. Blocksatz ist leider sehr schlecht zu handeln, da er sich schlecht ausrichten läßt.
• Zwischen Schriftfarbe und Hintergrund sollte ein ausreichender Kontrast sein, deshalb sind viele Webtexte auch schwarz oder anthrazit.

Farben und Farbkombinationen

Farben transportieren ebenfalls ein Gefühl und stehen genauso wie Schriften für Deine Marke. Wenn Du bereits ein Logo oder Printmaterial hast, ist es sinnvoll diese Markenfarben zu verwenden und zu ergänzen.

Folgende Farben solltest Du für Deine Webseite definieren:

• Eine Hauptfarbe: Sie ist die Farbe, die auf Deiner Webseite am präsentesten ist.
• Eine Abstufung der Hauptfarbe: Sie ist die zweithäufigste Farbe Deiner Webseite und kann für Hintergründe oder als Ergänzung der Hauptfarbe verwendet werden.
• Eine Akzentfarbe: Die Akzentfarbe steht in einem starken Kontrast zu der Hauptfarbe. Du kannst sie für Buttons, Links und wichtige Inhalte verwenden.
• Eine Schriftfarbe: Die Schriftfarbe sollte auf Deiner Hintergrundfarbe gut lesbar sein.

Farben werde im Webdesign als Hexadezimalcode verwendet. In meinen Schrift- und Farbkombinationen habe ich Dir deshalb diese Codes schon angegeben.

12 feminine Google Schrift- und Farbkombinationen für Deine Webseite

1. Barlow und Rasa

Dieser ist warm und lebendig. Mit einer monochromen Farbpalette und einer modernen und traditionellen kontrastierenden Schriftmischung.

Es vermittelt das Gefühl einer intelligenten und maßgeblichen Marke mit raffinierten Akzenten und starken Auswahlmöglichkeiten.

Versuche hauptsächlich Schwarz und Weiß zu verwenden und die Akzente nur dort, wo es notwendig ist, in sehr kleinen Mengen.

2. Raleway

Die schicke feminine Kombination der Extraklasse. Schwarz, Weiß und ein sattes Pink. Mit dem geometrischen und coolen Raleway, das sowohl für die Überschriften als auch für den Fließtext verwendet wird.

3. Work Sans + Merriweather

Hell und klar. Einfach, aber leistungsstark. Eine Kombination mit viel Weißraum, soliden Schriften und einer lebendigen, auffälligen Akzentfarbe.

Dieser eignet sich für ein solides, durchsetzungsfähiges und selbstbewusstes Unternehmen oder einen Blog.

4. Playfair Display + Montserrat

Zwei meiner Lieblings-Google-Fonts. Diese Kombination ist ein Vergnügen! Verwende sie mit dieser Farbpalette und Deine Website wird luxuriös, trendy und exklusiv aussehen, auch ganz ohne das allgegenwärtige Gold.

5. Dancing Script + Open Sans

Hier ist eine Kombination mit einer Schreibschrift. In diesem Fall: Dancing Script, eine lässige Schrift mit zarten Rundungen. Open Sans ergänzt es perfekt.

Wenn Du einen eher naiven und hübschen Stil oder vielleicht ein „spirituelles“ Erscheinungsbild bevorzugst, dann nimm diese Palette mit diesen Schriftarten.

Es passt perfekt zu einer Website für ein Spa, einen Schönheitssalon, einen Blumenladen oder irgendetwas in diesem Ton.

6. Playfair Display + Gothic A1

Bist Du auf der Suche nach dem klassischen, femininen, modisch-schicken Stil? Dann ist das vielleicht der die richtige Schrift- und Farbkombination für Dich. Die schöne Playfair Display-Schrift in Großbuchstaben zusammen mit den Schwarz- und Rosatönen macht den ganzen Zauber aus.

Verwenden Sie es für die Website eines Lifestyle-Magazins oder ein trendiges, modernes Unternehmen. Ihr Publikum wird es lieben.

7. Ultra + Work Sans

Wenn Du kontrastreiches, auffälliges und lebendiges Design suchst, kann diese Kombination genau das Richtige für Dich sein.

Die Ultra-Schriftart und diese leuchtenden Farben machen Deine Website wild und mutig, während Work Sans die Aufgabe übernimmt, das Ganze auszugleichen und Deine Website klar und ästhetisch zu halten.

8. Karla + Martel

Diese Kombination ist ziemlich zart, aber fröhlich. Mit einer grotesken serifenlosen Schrift für die Überschriften, einer edlen Serifenschrift und Pastelltönen in der Palette. Wenn Du einen wenn Sie einen klaren, leichten und freundlichen Stil suchst, kann diese vielleicht passen.

9. Josefin Sans + Montserrat

Ich mag die Ausstrahlung dieser Kombination. Sie ist frisch, jugendlich und strahlend.

10. Poppins + Work Sans

Ich liebe Poppins in der Kombination mit WorkSans. Bei dieser Variante sind die Überschriften eher unauffällig – mal etwas anderes.

Wir haben hier neutrale Farben mit sauberen, geometrischen und raffinierten Schriftarten. Sie bilden eine elegante, ordentliche und exquisite Kombination für ein High-End-Geschäft.

11. Cormorant SC + Cormorant Garamond

Diese Kombination ist schlicht, elegant und edel. Sie ist für eine Institution, eine traditionelle Hochzeitswebsite oder eine NGO geeignet.

Sie verwendet die Cormorant Schriftfamilie in ihren verschiedenen Varianten und eine saubere und gedeckte Farbpalette.

12 Libre Baskerville + Work Sans

Libre Baskerville ist eine schöne Serifenschrift, die sowohl Überschriften als auch Fließtext benutzt werden kann. In diesem Fall erhalten wir durch die Verwendung der fetten Schriftschnitt für die Überschriften und der normalen für den Fließtext eine harmonische und solide Kombination.

Work Sans praktisch ist für die Buttons und die Farbpalette gibt dem Ganzen eine klassische, selbstbewusste Optik und Haptik.

Wie werden die Schriften auf der Webseite eingebunden?

Bei Themes wie DIVI sind die Google Fonts standardmäßig integriert, die Subsets müssen noch manuell eingeschaltet werden. Beim Elementor Pro kann man relativ einfach die gewünschten Schriften hochladen.

Du bekommst alle Google Schriftarten über Google Fonts, sie sind kostenlos.

ABER

Google Fonts sind nicht DSGVO konform, da eine Verbindung zum Google Server besteht.

Google Schriften DSGVO konform einbinden

• Schalte die Google Fonts ab. Bei Divi musst Du nur den Hacken bei Google Fonts in den DIVI-Einstellungen rausnehmen. Ansonsten ist das auch über ein Plugin wie Disable Google Fonts möglich. Hier findest Du einen ausführlichen Bericht dazu.
• Wenn Du ausschließlich eine Standardschrift wie Georgia verwendest (Standardschriften z.B. bei Divi die, die zur Auswahl angezeigt werden, wenn die Google Fonts abgeschaltet sind), musst Du nichts mehr tuen.
• Solltest Du wie oben in den Schrift- und Farbkombinationen Google Fonts verwenden, musst Du sie lokal einbinden. Das geht entweder über ein Plugin wie OMGF, Local Google Fonts oder DIVI DSGVO Helper.
• Natürlich kannst Du Deine Schriften auch “von Hand” einbinden, e-Recht24 hat hier eine Anleitung.

Links

• Schriftkombinationen findest Du z. B. bei Fontpair
• Es gibt außer Google Fonts noch zahlreiche Schriftdatenbanken wie Dafont.com, Fontsquirrel.com oder 1001fonts.com. Achte immer auf die Lizenzvereinbarungen, Du findest sie auf der jeweiligen Webseite
• Hilfreiche Programme zur Farbfindung sind z.B. Colorhunt.co, brandcolors.net oder Coolors.co
• Auf der Seite Html-color-codes.info kannst Du die Hexadezimalwerte von Farben aus einem Bild bestimmen lassen.
• In Canva gibt es wunderbare Vorlagen für Moodboards und auch in Pinterest findest Du viele Anregungen.
• Wenn Du noch ein feminines WordPress Theme suchst, dann schau einmal in meinem Artikel 10 feminine WordPress-Themes.
• Vielleicht sind in meinem Portfolio auch ein paar Anregungen für Dich.

Fazit:

Es ist schon recht aufwendig, die richtigen Schrift- und Farbkombinationen für Deine Webseite zu finden. Mir helfen immer die Bilder, die auf der Seite verwendet werden und natürlich das Logo.

Bei den Schriften verlasse ich mich auf mein Bauchgefühl, ich frage mich auch immer, welches Gefühl meine Kundin transferieren will. Verlasse Dich da ganz auf Deinen Geschmack!

Ich hoffe, Du hast einige Anregungen für Deine Webseite gefunden. Wenn Du noch Fragen hast, kannst Du Dich gerne bei mir melden.