Online-Tools

Hilfs­mit­tel zum Set­zen von Schrift auf Webseiten

Im Fol­gen­den möchte ich einige externe Tools vor­stel­len, wel­che den Umgang mit Schrift im Web erleichtern.

@font-face Hilfs­mit­tel

@font-face Kit Generator

Der Gene­ra­tor ist ein kos­ten­lo­ser Ser­vice von Font Squir­rel, um Schrif­ten online in alle benö­tig­ten For­mate, sowie den ent­spre­chen­den CSS-Code, umzuwandlen.

@font-face Kit Generator

Soma Font­Fri­end

Soma Font­Fri­end ist ein sehr gut gemach­tes book­marklet für Fire­fox 3.6+ und Safari3+, um belie­bige Schrift­art schnell auf jeder Web­seite tes­ten zu kön­nen. Sehr hilfreich :)

Soma Font­Fri­end

Google font previewer

Google font pre­viewer ist ein sehr gut gemach­ter Edi­tor, um CSS-Code zum Ein­satz der Schrif­ten aus dem Google font direc­tory zu generieren.

Google font previewer

Google Web­Font Loader

Mit dem Google font loa­der kann man errei­chen, dass sich alle Brow­ser beim Laden von web-fonts gleich ver­hal­ten. Das Java­Script ermög­licht den Ein­satz ver­schie­de­ner Quel­len von web-fonts und bie­tet gene­rell mehr Ein­fluss auf das Ver­hal­ten der Browser.

Google Web­Font Loader

font dragr

Mit font dragr kann man unter Fire­fox 3.6 belie­bige Schrift­ar­ten in diver­sen For­ma­ten ein­fach per drag & drop vor ihrem Ein­satz testen.

font dragr

Font­Fon­ter

Font­Fon­ter ist ein web-font-Vorschau-Werkzeug von Font­Shop für belie­bige Seiten.

Font­Fon­ter

All­ge­meine Hilfsmittel

Blind­text Generator

Erzeugt ver­schie­dene Blind­texte, die sich wäh­rend der Layout-Phase ein­set­zen lassen.

Blind­text Generator

Type­tes­ter

Type­tes­ter bie­tet die Mög­lich­keit, ver­schie­dene Schrif­ten mit unter­schied­li­chen Ein­stel­lun­gen direkt zu vergleichen.

Type­tes­ter

TypeIt

TypeIt ist ein Online-Editor der abhän­gig von der Spra­che die Mög­lich­keit bie­tet, ein­fach die ent­spre­chen­den Son­der­zei­chen einzugeben.

TypeIt

Typechart

Typechart ist eine Liste ver­schie­de­ner Schrif­ten. Die CSS–Ein­stel­lun­gen las­sen sich direkt von der Seite kopieren.

Typechart

CSS Type Set

CSS Type Set ist ein visu­el­ler Edi­tor um CSS-Code zur Text­for­ma­tie­rung zu generieren.

CSS Type Set

Copy­Pas­te­Cha­rac­ter

Die Seite bie­tet eine Über­sicht von Gly­phen, die schwer über die Tas­ta­tur ein­zu­ge­ben sind. Diese kön­nen ein­fach per Dop­pel­klick von dort kopiert werden.

Copy­Pas­te­Cha­rac­ter

PX 2 EM

PX 2 EM ist ein Online-Rechner zur Umrech­nung von Pixeln in Ems und vice versa.

PX 2 EM

CSS-Typeset Matrix

CSS-Typeset Matrix ist ein Gene­ra­tor, um eine auf­ein­an­der abge­stimmte Matrix von Schrift­grö­ßen und Zei­len­ab­stän­den zu errechnen.

CSS-Typeset Matrix

typo­gra­phic beautifier

Das Tool wen­det typo­gra­fi­sche Regeln auf Text oder HTML-Quelltext an und gibt die kor­rek­ten For­ma­tie­run­gen aus. Nicht alle zur Ver­fü­gung ste­hen­den Mög­lich­kei­ten kön­nen für jede Spra­che genutzt wer­den, da das Tool auf pol­ni­scher Gram­ma­tik auf­baut. Trotz­dem kann es sehr hilfreich sein.

typo­gra­phic beautifier

Tex­tism — Textile

Tex­tism — Tex­tile berei­tet Texte für den Ein­satz im Web vor. Es wer­den einige typo­gra­fi­sche Regeln beach­tet, Zei­chen durch typo­gra­fisch kor­rekte Ver­sio­nen ersetzt und Son­der­zei­chen durch HTML-Entity-Codes ersetzt.

Tex­tism — Textile

hyph-n

hyph-n führt eine Sil­ben­tren­nung von ein­ge­ge­be­nen Tex­ten in eng­li­scher Sprache durch.

hyph-n

{ be creative }

css gallery