Jump to content

CSS für (Adobe) Garamond und Alternativen


Þorsten

Empfohlene Beiträge

Þorsten

Wie sollte eine font-family-Deklaration aussehen, um eine lokal installierte Adobe Garamond, andere passende Garamonds, einen passenden Webfont oder – falls alle Stricke reißen – eine System-Serifenlose zu verwenden?

Im Moment stelle ich mir das ganz einfach vor:

font-family: Garamond, GaramondNo8, sans-serif

GaramondNo8 wird dabei als Webfont über @font-face eingebunden. (Für diesen Einsatzzweck passt die No8 hinreichend gut zum in Adobe Garamond gesetzten Text in der auf der Seite gezeigten Bitmap-Grafik.)

Die Frage ist nun, welche Bezeichnug(en) ich nun genau wählen sollte, um lokal installierte (passende) Garamonds – also die Adobe Garamond (Pro) oder andere passende – zu erwischen? Reicht das einfache »Garamond«? Oder anders rum: Welche vom Webbrowser auswertbaren Schriftnamen haben verschiedene Garamondversionen bei euch?

BTW: Die Apple Garamond darf auf keine Fall gezeigt werden – die passt gar nicht.

Hintergrund

Die Auftraggeberin, eine selbstständige Buchhalterin und Steuerberaterin, hat eine Domain registriert, will auf absehbare Zeit aber nicht die Inhalte liefern, die für eine vernünftige Website notwendig sind. In der Zwischenzeit soll die Homepage lediglich als virtuelle Visitenkarte fungieren und eben einfach ein Foto der papiernen Visitenkarte zeigen (gesetzt in Adobe Garamond italic, fotografiert aus der Vogelperspektive, leicht gebogen auf einer weißen Fläche liegend – das sieht so erst mal ganz schlicht und elegant aus und funktioniert also, zumindest sehr viel besser als eine dieser fürchterlichen Baustellenseiten).

Der einzige Schönheitsfehler ist nur, dass diese Seite so gar nicht suchmaschinentauglich ist, wenn der gesamte Text auf der fotografierten Karte steht. Deshalb sollen ein paar wenige Begriffe (Name, Tätigkeit, Einzugsgebiet) in HTML-Text mit auf die Seite. Nach einiger Experementiererei bin ich zu dem Schluss gekommen, dass das elegant-schlichte Ursprungskonzept der einfach so auf den Tisch (bzw. Desktop via Browserfenster) geworfenen Karte am wenigsten gestört wird, wenn der HTML-Text die gleiche Schrift verwendet. Das funktioniert m.E. trotz der radikal unterschiedlichen Darstellung (Bitmap vs. gerenderter Font), wohl weil der Text auf der Karte durch die perspektivische Verzerrung leicht gedreht und durch die geringe Tiefenschärfe der Fotografie in Bereichen auch ganz leicht verschwommen ist.

Die Idee, als allerletzte Alternative eine Serifenlose zu nahmen, rührt daher, weil keinesfalls die Times (New Roman) als Fallback verwendet werden soll.

Link zum Beitrag
Ralf Herrmann

Das ist für lokale Fonts leider gar nicht so einfach und auch noch Browser-abhängig.

W3C sagt:

The locally installed <font-face-name> is a format-specific string that uniquely identifies a single font face within a larger family. For TrueType and OpenType fonts, the full font name as defined in the font name table is used to reference a given face. Additionally, for TrueType and OpenType fonts user agents may optionally support Postscript name lookup on platforms where that is appropriate. The notation for a <font-face-name> is the unique font face name enclosed by "local(" and ")". The name can optionally be enclosed in quotes. This also allows for referencing faces that belong to larger families that cannot otherwise be referenced. If a font face with a given full font name or Postscript name is not found, the user agent loads the next font in the list, platform substitutions for the font should not be used.

Konkrete Tipps zu diesem Problem auch in diesem Beitrag: http://hacks.mozilla.org/2009/06/beauti ... font-face/

Link zum Beitrag
Typ Ø

Wenn du mit dem @font-face-Generator von FontSquirrel.com arbeitest, hast du eigentlich alle aktuellen Browser involviert (wichtig ist, dass neben .ttf- auch .eot- und .svg-Formate verlinkt werden, dann klappt es u.?a. auch mit iOS).

Ansonsten nacheinander mit Komma getrennt die Fontnamen so, wie sie im System mit Namen angezeigt werden. Bei Leerzeichen in der Bezeichnung den gesamten Fontnamen in einfachen oder doppelten Anführungszeichen setzen. Die Garamond-Fonts sind ja alle eigenständig. Dass sie alle »Garamond« im Namen haben, ist dem System wurscht.

Link zum Beitrag
Þorsten

Hmm, also ich muss mich sehr unverständlich ausdrücken! :cry:

Wozu brauchst Du die anderen Garamonds ...?

Datt Janze soll so funktionieren:

  1. Wer eine lokal installierte Adobe Garamond hat (oder was das so aussieht), soll das vorgesetzt bekommen.[/*:m:32oz9q6v]
  2. Gib’s da nichts, soll die GaramondNo8 als Webfont (mittles @font-face) serviert werden[/*:m:32oz9q6v]
  3. Alle anderen (also die, die weder eine lokale [passende] Garamond haben noch einen Webbrowser, der @font-face kann) kriegen die System-Serifenlose.[/*:m:32oz9q6v]

Ich kann mich nicht darauf verlassen, dass alle Besucher mit webfontfähigen Browsern unterwegs sind. Das Zielpublikum ist sehr divers und oft nicht auf dem neusten Stand der Technik.

Jetzt klarer?

Link zum Beitrag
Þorsten
Das ist für lokale Fonts leider gar nicht so einfach und auch noch Browser-abhängig.

Die generelle Problematik ist mir durchaus bewusst. Deshalb wollte ich ja mal wissen, wie bei euch die Garamonds so heißen. Das mit der Browseranhängigkeit ist aber ein guter Punkt; ich werde mal eine Testseite machen, mit der hoffentlich ein paar hilfsbereite Garamondbesitzer mal verifizieren können, wie ich ihre Garamonds (nicht) aktivieren kann.

Ein Grund, soweit es geht lokale Schriften zu benutzen, ist das schnellere Rendering (ohne eventuelles »Umschalten« vom System- zum Webfont).

Weiß jemand, ob man das Laden der über @font-face eingebetteten Dateien vermeiden kann, wenn ich font-family-Deklaration ein lokaler Font eine höhere Priorität hat?

Link zum Beitrag
Typ Ø

Dann verwende alle existierenden und in deinen Augen optisch funktionierenden Fonts der Reihe nach mit Komma getrennt und setze vor »serif« einen Fantasienamen, den du dann auch im CSS bei @font-face angibst. Dann wird die Garamond auf jeden Fall erst verwendet, wenn die anderen im System nicht auftauchen.

Ich bin mir nicht sicher, ob man im CSS bei »local« mehrere Namen angeben kann, die auch wirklich von allen Browsern zuerst durchsucht werden, bevor der Webfont geladen wird.

Link zum Beitrag
Ralf Herrmann

Wenn es dir um die Adobe Garamond (Pro) geht, dann sehe ich da eigentlich überhaupt keine Probleme. Der "Font Family Name" muss doch sowieso verwendet werden und wenn der z.B. "Adobe Garamond Pro" lautet, wird doch keine andere Garamond genommen, die nicht exakt auf diesen Familiennamen hört. :?

Link zum Beitrag
Minimalist
Hmm, also ich muss mich sehr unverständlich ausdrücken! :cry:

Nee, vermutlich steh ich aufm Schlauch, daher dacht ich ich frag mal, bevor ich die Klappe aufreiße ... ;)

Jetzt klarer?

Nein ;)

  1. Wer eine lokal installierte [...][/*:m:33br39vy]

Warum? Ich dachte die No8 ist die, die Du eigentlich haben willst ...? :unsicher kuck: Dann link die doch einfach und fertig, warum komplizierter machen? Die Paar Kb bringen niemanden um, oder ...?

Link zum Beitrag
Þorsten
Vielleicht willst Du ja auch direkt die Adobe Garamond als Webfont per Typekit einbinden? http://typekit.com/fonts/adobe-garamond-pro

Danke für den Tipp :biglove:, aber für die zeitlich befristete Baustellenseite ist das vielleicht etwas zu viel des Guten (und die Extrakosten, so moderat sie auch sein mögen, der Auftraggeberin sicher nicht vermittelbar). Ohnehin habe ich die Webfont-Seite ja schon abgedeckt; mir ging’s, wie gesagt, um lokale Alternativschriften.

Link zum Beitrag
Typ Ø

Dann sammeln wir doch mal:

GaramondNo8, Garamond, Adobe Garamond Pro, Garamond Premier Pro …

Gibt’s noch weitere?

Dann würde ich im CSS angeben:

font-family: GaramondNo8, Garamond, 'Adobe Garamond Pro', 'Garamond Premier Pro', grzyklyx, serif;

Und im @font-face:

@font-face {
	font-family: 'grzyklyx';
	src: url('GaramondNo8.eot');
	src: url('GaramondNo8.woff') format('woff'), url('GaramondNo8.ttf') format('truetype'), url('GaramondNo8.svg#webfontvlg9NCzv') format('svg');
	font-weight: normal;
	font-style: normal;
}

(statt »grzyklyx« irgendwas, was es nicht als Font-Namen gibt.)

Dann wird die GaramondNo8 wirklich erst am Schluss geladen, wenn alle anderen nicht verfügbar sind.

Link zum Beitrag
Þorsten
Ich dachte die No8 ist die, die Du eigentlich haben willst ...?

Nicht ganz. Die Schrift in der Bitmap-Grafik, die approximiert werden soll, ist Adobe Garamond Pro. Wenn die lokal vorhanden ist, warum sie dann nicht nehmen? (Da dürfte dann die Wahrscheinlichkeit noch am höchsten sein, dass es sich um Grafikfritzen handelt, die den subtilen Unterschied zur frei einbettbaren No. 8 noch am ehesten erkennen dürften.)

Die Paar Kb bringen niemanden um, oder ...?

Sicher nicht, aber es kann bei langsamen Verbindungen zu einem kurzen Flackern kommen (erst wird der Systemfont gezeigt, nach dem vollständigen Laden des Webfonts dann dieser). Warum soll man das nicht vermeiden, wenn es geht?

Link zum Beitrag
Þorsten
Dann sammeln wir doch mal:

GaramondNo8, Garamond, Adobe Garamond Pro, Garamond Premier Pro …

Gibt’s noch weitere?

Genau das war meine Frage und danach habe ich gesucht, danke! :biglove:

Dann würde ich im CSS angeben:

font-family: GaramondNo8, Garamond, 'Adobe Garamond Pro', 'Garamond Premier Pro', grzyklyx, serif;

Sowas in der Art schwebt mir vor. Ich tendiere vielleicht eher zu

font-family: 'Adobe Garamond Pro', 'Garamond Premier Pro', GaramondNo8, Garamond, sans-serif;

Die AGP ist das Original in der Bitmap-Grafik; die Premier Pro unterscheidet sich, soweit ich sehen kann, durch den Ausbauzustand; die No8 wird entweder als lokale Version – wenn vorhanden – oder sonst als Webfont bereit gestellt; danach (also nur, wenn Webfonts nicht funktionieren) wird eine sonstige Garamond genommen und zu guter Letzt die System-Sans-Serif.

Die »grzyklyx«-Geschichte kann man m.E. getrost weglassen. Ich habe das Webfontkit der No8 einfach als »GaramondNo8« deklariert. Da nimmt der Browser dann auch die lokale No8, wenn vorhanden, sonst den Webfont. Das ist in dem Fall ja genau das, was ich will, somit gibt’s auch keinen Konflikt.

Vielen Dank an alle Ratgeber nochmal! :huhu:

Link zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
<p>Druckgrafisches Museum Pavillon-Presse in Weimar</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung