Farbprofil mit Kuler

Renate — Sat, 11 Aug 2012 16:45:20 +0000

Layouts von Grund auf zu erstellen ist nicht meine Kernkompetenz. Hin und wieder bin ich aber gefragt, meine Inspiration über den Bildschirm fliegen zu lassen und das Design selbst zu entwickeln.

Insbesondere knackige Farbprofile zu erstellen finde ich schwierig. Mir hilft da Kuler, ein Online-Tool von Adobe.

Eigene Farbprofile lassen sich mit Kuler speichern.

Gut finde ich, dass verschiedene Farbharmonien wie monochrom oder komplementär schon vorgegeben sind. So erhält man bereits einen Eindruck der möglichen Farbpaletten. Die meisten Nutzer entscheiden sich aber doch mit „custom“ für die individuelle Auswahl.

Es gibt einen Haufen Stellknöpfe fürs Finetuning. Da ist es gut, dass sich das für gut befundene Profil speichern lässt. Fertige Paletten lassen sich zudem als ASE-Datei (Adobe Swatch Exchange File) für die Verwendung im lokalen Photoshop exportieren. Finde ich ausgesprochen praktisch, denn das gilt sogar für ältere Version wie CS2.

Wer will kann seine Profile veröffentlichen und von anderen Nutzern bewerten lassen. Inzwischen gibt es einige Themes, die man durchstöbern kann. Man muss ja nicht alles neu erfinden ;-).

Webfonts per @font-face einbetten

Renate — Thu, 08 Dec 2011 16:26:40 +0000

Einige meiner Kunden hätten gern ihre Hausschrift auf der Webseite. Dafür habe ich sogar mal eine Flashseite bauen müssen, nur damit der Lieblingsfont auch zuverlässig angezeigt werden konnte. Das ist ebenso wie das altbekannte Image-Replacement so ganz und gar nicht barrierefrei. Da bis heute die meisten Kunden mit Barrierefreiheit nicht viel am Hut haben (wollen), bemühe ich mich immer um Techniken, die zugänglich sind und ohne großes Rampenlicht im Hintergrund wirken. Jetzt habe ich mal einen genaueren Blick auf @font-face geworfen. Damit lassen sich Webfonts in eine Website einbetten. Diese Methode beschränkt sich auf die Einbettung per CSS, anders als Cufón und sIFR, die mit Javascript und Flash arbeiten.

Inzwischen können eigentlich alle modernen Browser mit Non-Websafe-Schriften umgehen und wenn der Internet Explorer (IE) sein „Spezialfutter“ bekommt, kann der das auch – selbst die älteren Modelle. Als Font-Versionen kommen u.a. TrueType (.ttf ), OpenType (.woff) und der Embedded Open Type (.eot) für den IE infrage. Die Webfonts lädt man auf den eigenen Server und kann sie dann mit @font-face in ein Stylesheet einbetten. Danach lassen sie sich wie gewohnt per font-family ansprechen. Eine Anleitung mit Code-Beispiel gibt es auf Elmastudio. Dort sind auch einige Quellen erwähnt, wo man freie Schriften bekommt und Tools, mit denen sich die eigene Schrift in die o.g. Formate umwandeln lässt. Unbedingt darauf achten, dass die Schriften für diese Verwendung freigegebenen oder lizenziert sind!

Problem beim Webfonts einbetten

Nachdem ich mein @font-face Kit bei Font Squirrel runtergeladen und den mitgelieferten CSS-Code eingebaut hatte, sah ich meine neue Schrift in allen Browsern, sogar im IE7. Nur der Firefox – Version 3.6 – wollte partout nicht. Irgendwas stimmte mit meiner CSS-Datei nicht, denn die Beispieldatei aus dem Kit lief problemlos. Inzwischen bin ich schlauer: Der @font-face-Code muss nicht nur am Anfang der CSS-Datei stehen, er darf auch unter keinen Umständen innerhalb von @media all oder ähnlichen Anweisungen stehen. Nachdem ich das geschnallt habe, klappt es jetzt auch mit dem @font-face.

Gestaltung Archive - css:manufaktur

Farbprofil mit Kuler

Webfonts per @font-face einbetten

Problem beim Webfonts einbetten