Typo-Design

[Amateur]

Hi,
erst mal allen ein frohes neues Jahr!

Wie ihr an meinem Namen sehen könnt, bin ich ein Amateur in Web-Design - aber nicht unerfahren. Bis jetzt habe ich bei der typografischen Gestaltung meiner Websites (Dreamweaver) immer die Standardschriften in den Standardformatierungen eingesetzt und hier und da über css am Spacing oder Zeilenabstand was verändert.

Ich sehe aber immer wieder Sites, die nicht mit Systemschriften gestaltet sind. Wie geht das? Für viele mag das vielleicht eine dumme Frage sein. Klar, die Typografie wird mit css definiert. Nur, muss der Browser nicht die jeweiligen Fonts von irgendwoher holen, um sie auf dem Screen des Users darstellen zu können, wenn er die Fonts nicht auf seinem Rechner installiert hat? Muss ich dafür die Fonts auf der Server laden? Und wie sieht dann die css-Definition aus?

Danke für die Hilfe im voraus.

[ChrisB]

Hi,

Ich sehe aber immer wieder Sites, die nicht mit Systemschriften gestaltet sind. Wie geht das?

Stichwort: @font-face

MfG ChrisB

[Amateur]

Hi Chris,

Stichwort: @font-face

Was meinst du damit?

mfG
Amateur

[Amateur]

Hi Chris,

Stichwort: @font-face

Was meinst du damit?

Sorry, da, wo ich jetzt auf den Link von Thams gegangen bi un das lese, ist dein Hinweis klar ';-o

mfG
Amateur

[Amateu]

Hi ChrisB,

auch dir, Danke für dein Hinweis!

mfG
Amateur

[Thomas Luethi]

Hallo,

Theoretisch gibt es auch schon in CSS 2.1 die Möglichkeit, Schriftarten
auf den Server zu legen (N.B. Urheberrechte beachten!) und den Browser
des Benutzers per CSS dazu aufzufordern, diese Fonts herunterzuladen,
siehe SelfHTML:
<http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm@title=Schriftformatierung mit Schriftartendatei>
<http://de.selfhtml.org/inter/downloadschriftarten.htm@title=Downloadbare Schriftarten>
Auch bei CSS 3 sind solche Dinge wieder vorgesehen.

In der Praxis und mit den heutigen Browsern funktioniert
das Herunterladen von Schriftarten AFAIK fast nie.

Die übliche Praxis ist es, einfach mehrere gängige Schriftarten
bei http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=font-family anzugeben, und am Ende eine generische Schriftart, z.B.
font-family: arial, helvetica, sans-serif;

Für wichtige Dinge wie Logos u.s.w. kann man Bilder verwenden, u.U.
mit Image Replacement Technologien wie Fahrner Image Replacement u.s.w.

mfg Thomas

P.S. Du kannst auch Deinen richtigen Namen oder einen Nickname verwenden.
So erkennt man Dich wieder, wenn Du später mal wieder hier auftauchst ...

[ChrisB]

Hi,

In der Praxis und mit den heutigen Browsern funktioniert
das Herunterladen von Schriftarten AFAIK fast nie.

Oh doch, in der Hinsicht gab es in letzter Zeit einiges an Fortschritten zu vermelden.

IE, FF, Opera, Safari können es, Chrome m.W. auch.

http://www.fontsquirrel.com/ und http://typekit.com/ seien mal als Anlaufstellen genannt.

MfG ChrisB

[Thomas Luethi]

Hallo Chris,

Danke für die Korrektur und die Links. Hier noch zwei Test-Seiten:
http://craigmod.com/journal/font-face/
http://www.fontsquirrel.com/fontfacedemo/BlackKnightFLF

Oh doch, in der Hinsicht gab es in letzter Zeit einiges an Fortschritten zu vermelden.

Ob es ein Fortschritt ist, dass z.B. Firefox 3.5 nun ungefragt Fonts
herunterlädt und dem Benutzer keine bequeme Einstellungs-Möglichkeit
(unter Extras -> Einstellungen) bietet, dieses Verhalten abzuschalten,
sei dahingestellt ... (Und nein - about:config ist *nicht* bequem.)

Ich surfe (auch aus anderen Gründen) lieber mit Firefox 3.0.
Und bei unleserlichen Schriften oder Farbkombinationen hilft immer
noch die Preferences Toolbar, mit ein paar Klicks Fonts, Farben
oder CSS als ganzes abzuschalten, um den Text lesbar zu machen.

Freundliche Grüsse
Thomas

[Amateur]

Hallo Thomas,

Theoretisch gibt es auch schon in CSS 2.1 die Möglichkeit, Schriftarten
auf den Server zu legen (N.B. Urheberrechte beachten!) und den Browser
des Benutzers per CSS dazu aufzufordern, diese Fonts herunterzuladen,
siehe SelfHTML:
Schriftformatierung mit Schriftartendatei
Downloadbare Schriftarten
Auch bei CSS 3 sind solche Dinge wieder vorgesehen.

Schau ich mir an! Danke.

In der Praxis und mit den heutigen Browsern funktioniert
das Herunterladen von Schriftarten AFAIK fast nie.

Wie ist das zu verstehen? Meinst du dann brauche ich in die obigen Links nich rein zu schauen?

Die übliche Praxis ist es, einfach mehrere gängige Schriftarten
bei http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=font-family anzugeben, und am Ende eine generische Schriftart, z.B.
font-family: arial, helvetica, sans-serif;

Für wichtige Dinge wie Logos u.s.w. kann man Bilder verwenden,

Genau das habe ich ja auch bis jetzt gemacht. Das, was aber dabei heraus kommt, finde ich als Grafik-Designer, simpel gesagt, langweilige und öde Typografie - besonders bei den Headlines. Wenn ich mir z.B. viele Websites aus dem anglo-amerikanischen Bereich ansehe oder in vielen Blogs sind Fonts zu finden, die keine generischen Schriften sind.

mfG
Amateur (der Namen sollte schon ein Nickname sein `;-))

[Thomas Luethi]

Hallo Amateur,

In der Praxis und mit den heutigen Browsern funktioniert
das Herunterladen von Schriftarten AFAIK fast nie.

Diese Aussage von mir war falsch, sorry. ChrisB hat mich eines besseren belehrt.

Wie ist das zu verstehen? Meinst du dann brauche ich in die obigen Links nich rein zu schauen?

Doch, schau rein und probiere es aus!

Aber geh einfach nicht davon aus, dass es immer und überall funktioniert.
(Wie immer sind "gracefull degradation" und "fallbacks" eine gute Idee,
d.h. man sollte dafür sorgen, dass auch bei älteren Browsern, welche die
neuen Technologien nicht unterstützen, ein brauchbares, ansehnliches
Resultat herauskommt.)

mfg Thomas

[Amateur]

Hallo Thomas,

danke für deine hilfreichen Hinweise :))))

Aber geh einfach nicht davon aus, dass es immer und überall funktioniert.
(Wie immer sind "gracefull degradation" und "fallbacks" eine gute Idee,
d.h. man sollte dafür sorgen, dass auch bei älteren Browsern, welche die
neuen Technologien nicht unterstützen, ein brauchbares, ansehnliches
Resultat herauskommt.)

Ich ärgere mich selber oft über das, was im Web dem User optisch zugemutet wird (in Einzelfällen mag es bewußt eingesetzt und nicht stümperhaft gestaltet sein, weil sie es nicht besser wussten). Auch das, was unter deinen Links an ChrisB zu sehen sind (craigmod.com u. fontsquirrel.com) finde ich bezügl. der Leserlichkeit schon fast grenzwertig. Was ich möchte ist einfach eine saubere und lesefreundliche Typografie, nur nicht immer nur aus Arial und seine "Standardfreunde".

'ne Frage:

Wie kann ich im head , ich sag mal, Standards w.z.B. Headline, Subline, oder Copy festlegen und sie dann in der CSS definieren, so dass ich im Quellcode nur noch den jeweiligen "Standard" angebe und nicht bei jeder Headline etc. die komplette Codierung runterbeten muss? Geht das mit <div id="headline"> oder so?

mfG
Amateur

[ChrisB]

Hi,

Wie kann ich im head , ich sag mal, Standards w.z.B. Headline, Subline, oder Copy festlegen und sie dann in der CSS definieren, so dass ich im Quellcode nur noch den jeweiligen "Standard" angebe und nicht bei jeder Headline etc. die komplette Codierung runterbeten muss? Geht das mit <div id="headline"> oder so?

Wenn dir Grundkenntnisse zum Umgang mit CSS fehlen - und der Frage nach ist das der Fall - dann arbeite bitte erst mal das entsprechende Kapitel von SELFHTML durch: http://de.selfhtml.org/css/

MfG ChrisB

[Thomas Luethi]

[...] Was ich möchte ist einfach eine saubere und lesefreundliche Typografie, nur nicht immer nur aus Arial und seine "Standardfreunde".

Arial, Tahoma (und auch Times New Roman) wurden AFAIK extra dafür
entworfen, auch am Bildschirm bei kleinen Schriftgrössen (z.B. 12px)
gut lesbar zu sein (insbesondere ohne Anti-Aliasing).
Darum verwende ich sie bevorzugt.

Andere Schriftarten sind vielleicht auf dem Papier schön, aber
am Bildschirm schlecht lesbar, oder es wird auch bei kleinen
Schriftgrössen noch Anti-Aliasing gemacht, was ich persönlich hasse.

'ne Frage:

Wie kann ich im head , ich sag mal, Standards w.z.B. Headline, Subline, oder Copy festlegen und sie dann in der CSS definieren, so dass ich im Quellcode nur noch den jeweiligen "Standard" angebe und nicht bei jeder Headline etc. die komplette Codierung runterbeten muss? Geht das mit <div id="headline"> oder so?

Ja, das geht mit IDs (wenn das Element nur 1x pro Dokument vorkommt).
Oder mit Klassen (können beliebig oft vorkommen).
Oder mit anderen Selektoren. Siehe:
<http://de.selfhtml.org/css/formate/zentrale.htm@title=Zentrale Formate definieren>

HTH, mfg, Thomas

[Klawischnigg]

Hi there,

Ich ärgere mich selber oft über das, was im Web dem User optisch zugemutet wird (in Einzelfällen mag es bewußt eingesetzt und nicht stümperhaft gestaltet sein, weil sie es nicht besser wussten). Auch das, was unter deinen Links an ChrisB zu sehen sind (craigmod.com u. fontsquirrel.com) finde ich bezügl. der Leserlichkeit schon fast grenzwertig. Was ich möchte ist einfach eine saubere und lesefreundliche Typografie, nur nicht immer nur aus Arial und seine "Standardfreunde".

Tja, oft geht vermeintliche Originalität und überbordender Designdrang zu Lasten der Lesbarkeit. Was spricht gegen Arial? Der Anwender resp. Surfer sucht Information im Internet, dem gehen Deine Schriftüberlegungen am Ar*** vorbei.

Wie kann ich im head , ich sag mal, Standards w.z.B. Headline, Subline, oder Copy festlegen und sie dann in der CSS definieren, so dass ich im Quellcode nur noch den jeweiligen "Standard" angebe und nicht bei jeder Headline etc. die komplette Codierung runterbeten muss? Geht das mit <div id="headline"> oder so?

Kannst Du alles unter <http://de.selfhtml.org/css/eigenschaften/schrift.htm@title=CSS-Eigenschaften, Schriftformatierung> nachlesen...