FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: Web Font kombinationen vom 27.03.2012

	MGi Foren-Übersicht -> Tipps & Tricks für Nonprint -> Web Font kombinationen
	Seite: 1, 2 Weiter

Autor

Nachricht

Michael Triggaman
Threadersteller

Dabei seit: 21.12.2005
Ort: MS
Alter: 46
Geschlecht: Männlich

Verfasst Di 27.03.2012 13:48 Titel Web Font kombinationen

Hallo zusammen, ich würde gerne für eine Seite zum ersten mal web fonts nutzen (fontsquirrel.com). Habt ihr vielleicht schon Erfahrungen mir schönen kombinationen für Überschriften und Fließtext? Also, welche Schriften harmonieren im web gut zusammen? Oder gibt es vielleicht eine Seite die sich mich dem Thema beschäftigt und zur Inspiration dienen kann? Vielen Dank für eure Hilfe. PS: Komme aus dem Print Bereich und hoffe, dass die Frage nicht allzu doof ist.

Michael Triggaman
Threadersteller

Dabei seit: 21.12.2005
Ort: MS
Alter: 46
Geschlecht: Männlich

Verfasst Di 27.03.2012 15:13 Titel

Entschuldigt den Doppel-Post. Habe da was gefunden: http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy Ich wäre aber trotzdem noch für Vorschläge dankbar.

Typo-Dieter

Dabei seit: 05.08.2011
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Do 29.03.2012 13:35
Titel

Re: Web Font kombinationen

Michael Triggaman hat geschrieben:

Hallo zusammen,

ich würde gerne für eine Seite zum ersten mal web fonts nutzen (fontsquirrel.com). Habt ihr vielleicht schon Erfahrungen mir schönen kombinationen für Überschriften und Fließtext? Also, welche Schriften harmonieren im web gut zusammen?
Oder gibt es vielleicht eine Seite die sich mich dem Thema beschäftigt und zur Inspiration dienen kann?

Vielen Dank für eure Hilfe.

PS: Komme aus dem Print Bereich und hoffe, dass die Frage nicht allzu doof ist.

Hallo,
du weisst, dass die Print- bzw. Agenturleute anders denken als Informatiker bzw. Webleute?
Die eine und die andere Gruppe, die gehen von gaenzlich unterschiedlichen Vorraussetzungen aus.
Web ist Freiheit, jeder stellt seinen "Bildschirm" so ein, wie es ihm gefaellt!
Der Bildschirm meint damit die komplette Darstellung.
Die andere Gruppe, die Print- und Agenturleute wollen das Gegenteil, wollen - dass die eigenen Kreationen ueberall genau so dargestellt werden, wie diese gedacht und programmiert wurden.
Aber das funktioniert nur bedingt bzw. muss gezwungenermaßen improvisiert werden.
Wenn du mit Typographie im Netz anfaengst, dann ueberlege vielleicht zuerst mal, wieviele Pixel eine Schrift darstellen, ob es ueberhaupt Sinn macht typographische Feinheiten darstellen zu wollen, bei den geringen Aufloesungen, ob es ueberhaupt moeglich ist.
Zudem stellt sich die Frage wie du das machen willst, wie willst du den Anwender zwingen, deine Vorgaben, dein Diktat zu befolgen?

Wenn du etwas zeigen willst wie gewuenscht, dann sind Flash-Seiten oder Bild-Seiten die einzig sichere Moeglichkeit, alles andere kann beeinflusst bzw. ignoriert werden.
Ist es nicht besser, die Information moeglichst sicher zu transportieren?
Sicher meint, dass die Info einigermaßen so aussieht wie gedacht.
Print und Web sind nun mal zwei paar Schuhe!

ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich

Verfasst Mo 02.04.2012 09:49
Titel

Re: Web Font kombinationen

Ab einer gewissen Dichte von schlechten Argumenten fühle ich mich genötigt, hier was zu schreiben *zwinker*

Typo-Dieter hat geschrieben:

Hallo,
du weisst, dass die Print- bzw. Agenturleute anders denken als Informatiker bzw. Webleute?
Die eine und die andere Gruppe, die gehen von gaenzlich unterschiedlichen Vorraussetzungen aus.

Das mag ja sein, ist aber völlig irrelevant. Webseiten werden ja in aller Regel für die breite Masse entwickelt und nicht exklusiv für Printleute oder Webleute.

Typo-Dieter hat geschrieben:

Die andere Gruppe, die Print- und Agenturleute wollen das Gegenteil, wollen - dass die eigenen Kreationen ueberall genau so dargestellt werden, wie diese gedacht und programmiert wurden.

...das stimmt auch, hat aber nichts mit Restriktion zu tun. Wenn eine Nachricht kommuniziert werden soll (z.B. "Kauf' dieses Produkt" oder "Engagier dich für dieses Ziel") und der Kanal Möglichkeiten zur stilistischen Ausgestaltung mitbringt, warum sollte man diese nicht nutzen?

Typo-Dieter hat geschrieben:

Aber das funktioniert nur bedingt bzw. muss gezwungenermaßen improvisiert werden.

Was funktioniert an Web-Typo nur bedingt? Was muss "improvisiert" werden?

Typo-Dieter hat geschrieben:

Wenn du mit Typographie im Netz anfaengst, dann ueberlege vielleicht zuerst mal, wieviele Pixel eine Schrift darstellen, ob es ueberhaupt Sinn macht typographische Feinheiten darstellen zu wollen, bei den geringen Aufloesungen, ob es ueberhaupt moeglich ist.

??? Du weißt doch garnicht, um was für ein Projekt es geht. Ich werfe hier mal ein paar Beispiele für geniale Web-Typo rein:

http://assets.wwf.org.uk/custom/foodstory/
http://www.secondstory.com/
http://licenselab.com/
http://capitolcouture.pn/

auch subtiler eingesetzt macht Web-Typo oftmals Sinn, auch in Kombination mit Standard-Schriften für Fließtext. Siehe z.B. http://www.myownbike.de/

Typo-Dieter hat geschrieben:

Zudem stellt sich die Frage wie du das machen willst, wie willst du den Anwender zwingen, deine Vorgaben, dein Diktat zu befolgen?

Garnicht, geht auch nicht. Ich kann für ~99% der Anwender, die keine bewussten Gegenmaßnamen getroffen haben, aber ein wesentlich besseres Web-Erlebnis anbieten. Und für alle anderen gibt es Fallbacks, welche die Usability der Seite gewährleisten.

Typo-Dieter hat geschrieben:

Wenn du etwas zeigen willst wie gewuenscht, dann sind Flash-Seiten oder Bild-Seiten die einzig sichere Moeglichkeit, alles andere kann beeinflusst bzw. ignoriert werden.

Wow. Du hälst einen Vortrag über die "Freiheit im Web" und schlägst jetzt Flash oder Bildern vor. Was ist aus barrierefreiem Webdesign geworden? Davon mal abgesehen: Ich kann beim Fernsehen auch den Ton ausmachen, sollten Sender daher lieber auf Untertitel vertrauen?

Typo-Dieter hat geschrieben:

Ist es nicht besser, die Information moeglichst sicher zu transportieren?

Kannst du mir erklären, was an Webtypo "unsicher" sein soll? Für 99% der Anwender sieht die Seite exakt so aus, wie gedacht und die restlichen 1% bekommen ein Fallback, das immernoch gut aussieht. Ich verstehe das Problem nicht.

@Michael Triggaman: Die einfachste Möglichkeit ist natürlich, verschiedene Schnitte aus derselben Familie zu verwenden. Z.B. eine ExtraBold für Überschriften und eine Standard oder Light für den Fließtext. Dabei kann fast nichts schief gehen. Ansonsten gelten für Webtypo diesselben "Regeln" wie für Printtypo was die Kombinationen angeht.

Du kommst aber nicht um ausführliche Tests mit verschiedenen Browsern herum. Gerade bei kleinen Schriftgraden verkleben gerne mal einige Punzen, wenn du mit Schriften fürs Web experimentierst. Fontsquirrel generiert im Paket immer auch sehr praktische Vorschau-Dateien, mit denen man das testen kann. Ansonsten kannst du dich auch immer auf die großen Anbieter verlassen, bei denen alle Schriften sehr gut für das Web ausgebaut sind. Z.B. https://typekit.com/

Zuletzt bearbeitet von ChrisKam am Mo 02.04.2012 09:51, insgesamt 1-mal bearbeitet

Typo-Dieter

Dabei seit: 05.08.2011
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Mo 02.04.2012 11:09
Titel

Re: Web Font kombinationen

ChrisKam hat geschrieben:

Typo-Dieter hat geschrieben:

Aber das funktioniert nur bedingt bzw. muss gezwungenermaßen improvisiert werden.

Was funktioniert an Web-Typo nur bedingt? Was muss "improvisiert" werden?

Typo-Dieter hat geschrieben:

??? Du weißt doch garnicht, um was für ein Projekt es geht. Ich werfe hier mal ein paar Beispiele für geniale Web-Typo rein:

http://assets.wwf.org.uk/custom/foodstory/

Hallo,
sicherlich wollte ich nicht, dass irgendjemand meint, ich haette etwas gegen seine kreativen Ideen.
Faktum ist aber, dass im Web niemals eine Gewaehr fuer die Richtigkeit der Darstellung gibt.
Alle Maßnahmen, die das moeglich machen sollen, sind faktisch genauso fehlerhaft.

Zu einem deiner Beispiele, >>http://assets.wwf.org.uk/custom/foodstory/<<, kann ich dir kurz die Fehlerliste auflisten:

http://assets.wwf.org.uk/custom/foodstory/
HTML Fehler (0, 0): Die DOCTYPE-Definiton des Dokuments ist unbekannt.
HTML Fehler (4, 22): Das Attribut "class" ist im Tag <html> nicht erlaubt.
HTML Fehler (27, 2): Das Attribut "alt" fehlt.
HTML Warnung (27, 2): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (29, 56): Das Attribut "alt" fehlt.
HTML Warnung (29, 56): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (29, 104): Das Attribut "alt" fehlt.
HTML Warnung (29, 104): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (39, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (40, 33): Das Attribut "alt" fehlt.
HTML Warnung (40, 33): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (43, 56): Das Attribut "alt" fehlt.
HTML Warnung (43, 56): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (46, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (55, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (64, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (72, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (80, 3): Das Attribut "data-section" ist unbekannt.
HTML Warnung (89, 50): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (92, 3): Das Attribut "data-section" ist unbekannt.
HTML Warnung (102, 42): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (105, 3): Das Attribut "data-section" ist unbekannt.
HTML Fehler (117, 2): Das Tag <footer> ist unbekannt.
HTML Warnung (148, 93): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Warnung (154, 62): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Warnung (154, 123): Die XHTML-Abkürzung für das Schließen des Tags wurde in HTML genutzt.
HTML Fehler (169, 3): Das Ende-Tag </footer> ist unbekannt.
HTML Fehler (213, 7): Das Tag <body> fehlt.
http://assets.wwf.org.uk/custom/foodstory/css/reset.css
CSS Fehler (3, 46): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (3, 64): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (4, 6): Die Pseudo-Klasse "not" ist unbekannt.
CSS Warnung (7, 24): Die Eigenschaft "-webkit-text-size-adjust" ist unbekannt.
CSS Warnung (7, 56): Die Eigenschaft "-ms-text-size-adjust" ist unbekannt.
CSS Fehler (11, 2): Die Pseudo-Klasse "-moz-selection" ist unbekannt.
CSS Fehler (12, 2): Die Pseudo-Klasse "selection" ist unbekannt.
CSS Warnung (26, 54): Die Eigenschaft "_font-family" ist unbekannt.
CSS Fehler (27, 47): Die Eigenschaft "word-wrap" ist unbekannt.
CSS Warnung (40, 17): Die Eigenschaft "-ms-interpolation-mode" ist unbekannt.
CSS Fehler (41, 4): Die Pseudo-Klasse "not" ist unbekannt.
CSS Fehler (48, 20): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (49, 88): Die Eigenschaft "*" ist unbekannt.
CSS Warnung (51, 91): Die Eigenschaft "-webkit-appearance" ist unbekannt.
CSS Fehler (51, 119): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (53, 46): Die Eigenschaft "box-sizing" ist unbekannt.
CSS Fehler (53, 82): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (53, 96): Die Eigenschaft "*" ist unbekannt.
CSS Warnung (54, 23): Die Eigenschaft "-webkit-appearance" ist unbekannt.
CSS Warnung (54, 54): Die Eigenschaft "-moz-box-sizing" ist unbekannt.
CSS Warnung (54, 84): Die Eigenschaft "-webkit-box-sizing" ist unbekannt.
CSS Fehler (54, 117): Die Eigenschaft "box-sizing" ist unbekannt.
CSS Fehler (55, 22): Die Pseudo-Klasse "-webkit-search-decoration" ist unbekannt.
CSS Fehler (55, 71): Die Pseudo-Klasse "-webkit-search-cancel-button" ist unbekannt.
CSS Warnung (55, 102): Die Eigenschaft "-webkit-appearance" ist unbekannt.
CSS Fehler (56, 8): Die Pseudo-Klasse "-moz-focus-inner" ist unbekannt.
CSS Fehler (56, 33): Die Pseudo-Klasse "-moz-focus-inner" ist unbekannt.
CSS Fehler (57, 48): Die Eigenschaft "resize" ist unbekannt.
CSS Fehler (58, 6): Die Pseudo-Klasse "valid" ist unbekannt.
CSS Fehler (58, 22): Die Pseudo-Klasse "valid" ist unbekannt.
CSS Fehler (59, 6): Die Pseudo-Klasse "invalid" ist unbekannt.
CSS Fehler (59, 24): Die Pseudo-Klasse "invalid" ist unbekannt.
CSS Fehler (74, 7): Der Media-Typ "only" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "and" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "min-width" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "35em" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "" ist unbekannt.
CSS Fehler (74, 7): Media-Typen müssen durch Komma getrennt werden.
CSS Fehler (74, 7): Der Media-Typ "" ist unbekannt.
CSS Fehler (79, 167): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (82, 35): Der Wert "rect" ist für die Eigenschaft "clip" nicht erlaubt.
CSS Fehler (82, 39): Der Wert "(" ist für die Eigenschaft "clip" nicht erlaubt.
CSS Fehler (87, 12): Die Eigenschaft "*" ist unbekannt.
CSS Fehler (90, 67): Die Eigenschaft "box-shadow" ist unbekannt.
CSS Fehler (90, 125): Die Eigenschaft "filter" ist unbekannt.
CSS Warnung (90, 149): Die Eigenschaft "-ms-filter" ist unbekannt.
CSS Fehler (107, 16): Die Pseudo-Klasse "" ist unbekannt.
CSS Fehler (108, 8): Die Pseudo-Klasse "" ist unbekannt.
CSS Fehler (109, 8): Die Pseudo-Klasse "" ist unbekannt.
CSS Fehler (113, 16): Die Pseudo-Klasse "" ist unbekannt.
CSS Fehler (114, 15): Die Pseudo-Klasse "" ist unbekannt.
http://assets.wwf.org.uk/custom/foodstory/css/style.css
CSS Fehler (144, 10): Die Eigenschaft "resize" ist unbekannt.

Man kann davon ausgehen, dass niemals die Seite ueberall gleich aussieht, einige Browser ignorieren die Fehler andere nicht.
Warum setzen die Leute in der Beispielseite von "Michael Triggaman" (vgl. http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy) wohl fuer die Typomuster Bilder anstatt Originaltypo ein?

Bildbeispiel:
[/img]

Zuletzt bearbeitet von Typo-Dieter am Mo 02.04.2012 11:23, insgesamt 2-mal bearbeitet

bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -

Verfasst Mo 02.04.2012 11:31
Titel

Du, Html 5 zu "validieren" gegen ein XML-Schema oder ne Sgml-DTD ist - gelinde gesagt - ne ziemlich bescheuerte Idee. Fast so blöd wie CSS zu validieren.

Zitat:

Erstmals seit der Entstehung von HTML wird die Sprache nicht mehr als eine Anwendung von SGML, sondern selbst als eine generalisierte Sprache in der Art von SGML definiert. Dies wird damit begründet, dass auch moderne Browser HTML nicht mit einem SGML-Parser, sondern einem für das Web passenden Parser verarbeiten.

Wie diese Parser funktionieren, ist aktuell nicht definiert.

Im Kern haste ja recht, aber der TE wollte doch nur ein paar Tipps zu hübschen Schriftkombinationen.

Zuletzt bearbeitet von bacon am Mo 02.04.2012 11:34, insgesamt 1-mal bearbeitet

ChrisKam

Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht: Männlich

Verfasst Mo 02.04.2012 12:04
Titel

Re: Web Font kombinationen

Typo-Dieter hat geschrieben:

Zu einem deiner Beispiele, >>http://assets.wwf.org.uk/custom/foodstory/<<, kann ich dir kurz die Fehlerliste auflisten:

..wie von bacon bereits angedeutet, ist diese Liste Quatsch. Ich würde mich an deiner Stelle vielleicht etwas mit HTML5 auseinandersetzen.

Typo-Dieter hat geschrieben:

Man kann davon ausgehen, dass niemals die Seite ueberall gleich aussieht, einige Browser ignorieren die Fehler andere nicht.

Das stimmt zwar, ist aber nach wie vor irrelevant. Mit welcher Browser / Betriebssystemskombi konntest du den Darstellungsfehler produzieren? Wieviel % Abdeckung hat diese Kombination in der Zielgruppe der Seite? Ermöglicht das Fallback dennoch die korrekte Lesbarkeit der Inhalte?

Du hast ja grundsätzlich recht mit dem, was du sagst. Wenn man die Lage aber pragmatisch betrachtet - und Fallbacks etc. angemessen berücksichtigt - gibt es keinen Grund, Webfonts heute nicht mehr flächendeckend einzusetzen. Alles im Web ist schwammig bis überhaupt nicht definiert. Es zählt nur, was funktioniert.

Typo-Dieter

Dabei seit: 05.08.2011
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Di 03.04.2012 14:24
Titel

Re: Web Font kombinationen

ChrisKam hat geschrieben:

Hallo,

sicherlich gibt mein Browser die Liste aus, dieser verarbeitet schlussendlich die eintreffenden Informationen.
Folglich kann es durch falsche Interpretation zu Fehlern kommen.
Allerdings hat der Browser, welcher die Liste ausgegeben hat, scheinbar wenig Fehler gemacht.
Betriebssytem und Browser wird von diesem verschleiert bzw. falsch zurueckuebermittelt.
Aber die beiden Browser links, welche die Typo relativ gut wiedergeben, zeigen auch schon Unterschiede.
Der Browser rechts, welcher die Typo ignoriert, das ist der "Firefox", dieser uebermittelt keine falsche Identitaet.
Ich habe leider feststellen muessen, dass fehlende Normen, wie im Internet, mehr als unschoen sind.
Ich zwinge mich immer "sicher" zu arbeiten, damit moeglichst wenig durchrutscht.
Auch auf der Seite wo die Muster vorgestellt werden, wird moeglichst sicher gearbeitet, indem dort Bilder eingesetzt werden fuer die Textkodierung.
Das hat sicher einen Grund - oder?

	Seite: 1, 2 Weiter
	MGi Foren-Übersicht -> Tipps & Tricks für Nonprint

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.