Kategorie: Design und Gestaltung

Webdesign, Tools, …

Kategorien
Mediengestalter-Ausbildung Persönliches

Michel wird Mediengestalter.

Vor ein paar Wochen habe ich ihn unterschrieben, meinen Ausbildungsvertrag zum Mediengestalter Digital und Print. Im August gehts los.

Zur Zeit müssen noch ein paar Sachen mit der IHK geklärt werden (Wahlqualifikationen ankreuzen und sowas) aber das dürfte nicht zum Problem werden. Die Fachrichtung ist Gestaltung und Technik im Non-Print-Bereich, da ich größtenteils Webseiten gestalten beziehungsweise umsetzen werde.

In den Betrieb konnte ich auch schon ein bisschen reinschnuppern. (Welcher das ist, verrate ich ein andern Mal.) Und ich muss sagen: Super nette Leute, freundlich und hilfsbereit. Die Räumlichkeiten find ich auch sehr schön, vielleicht ein bisschen steril aber das macht die familiäre Team-Atmosphäre wieder wett, die da ein wenig Wärme abstrahlt. Genug geschleimt ;)

Ich freu mich, dass ich in dieser Agentur den Ausbildungsplatz bekommen habe und fieber dem ersten Ausbildungstag schon etwas entgegen. Die Ausbildung kann kommen :)

Kategorien
Typographie

CSS-Schrifteinbettung geht in die nächste Runde

WebKit-Browser wie Safari können bald per CSS eingebundene Schriftarten benutzen. Zumindestens steht wohl schon eine Nightly-Version bereit, die es kann. Apple-Benutzer können sich also über neue Schriften auf Webseiten freuen. Oder auch nicht, je nach Schrift. ;)

Anwendung

Das Stylesheet muss man dann folgendermaßen erweitern:

@font-face { font-family: "Schriftname";
src: url(/pfad/zur/schriftdatei.ttf) format("truetype"); }
h1 { font-family: "Schriftname", sans-serif }

(Das Beispiel stammt in seinem Grundzügen vom weiter unten verlinkten Alistapart-Artikel)

Mit font-face sagt man dem Browser “Hey, ich will dass du eine Schrift herunterlädst, damit du die im Dokument verwendest”. Dann teilt man ihm mit, dass die Schrift “Schriftname” heißt, unter http://…/schriftdatei.ttf zu finden ist und es sich hierbei um einen TrueType-Font handelt.

Anschließend kann man die Schrift wie gewohnt und unter dem verliehenen Namen seinen CSS-Selektoren zuweisen: font-family: Schriftname, sans-serif;

Lizenzen

Ach ja, Lizenzen. Gute Schriften kosten Geld (Nutzungsrechte u.a.) und dürfen natürlich nicht einfach so weitergegeben werden. Wäre hier natürlich ein leichtes, schließlich steht die Pfadangabe und der Dateiname in der CSS-Datei. Von daher sollte man eher auf freie Schriften zurückgreifen, bevor man sich in rechtliche Schwierigkeiten begibt.

Weiteres zum Thema, außerhalb

via Daring Fireball

Kategorien
Typographie

Vista-Fonts sind ein wenig winzig. (Update.)

Kann es sein, dass die neuen Vista-Fonts recht klein ausfallen? (Neu, jetzt mit Screenshots):

Arial vs. Corbel:

Arial, 13px:

Arial

Corbel, 13px:

Corbel

Georgia vs. Constantia

Georgia, 13px;

Georgia

Constantia, 13px:

Constantia

Wenn ihr die Schriften nicht installiert haben solltet, kann ich euch auch gerne einen Screenshot anfertigen. (Hatte ich eh noch vor, aber gerade keinen Nerv dafür.) Oder ihr ladet euch den PowerPoint Viewer 2007 von Microsoft herunter, dann landen die Schriften auf eurem Windows-Rechner.

Kategorien
Typographie

Kann es sein, …

dass Zoom-Funktionen gängiger Browser die eigene Lesesehstärke™ schwächen, weil man sich zu sehr an große Schriften gewöhnt?

Wenn ich so meine ausgedruckten Sachen mit denen von anderen vergleiche, fällt mir auf, dass meine Schriften um einiges größer sind.

Mist.

Kategorien
Netzwelt Webdesign/Gestaltung

Rosa gegen Brustkrebs (Pink for October) (Update)

Pink for OctoberMit der Aktion Pink for October wollen Webdesigner und -entwickler aus Amerika ihre Webseiten den ganzen Oktober hindurch in Rosa (engl. Pink) erstrahlen lassen, um so auf den in Amerika stattfindenen Monat des Brustkrebs hinzuweisen. Ziele der Aktion sollen vor allem höhere Spendensummen und (bisher noch in Klammern) die Internationalisierung dieses Tags sein.

Schöne Sache wie ich find’, aber hoffen wir mal, dass mit dem Rosa nicht allzusehr übertrieben wird. Drüben beim Tom in der Schweiz könnt ihr euch schon mal ein wenig auf die Farbe des Weboktobers einstimmen ;)

Update: Bin leider noch nicht dazu gekommen, hier rosa zu streichen, aber das wird schon noch :)

Kategorien
Gestaltung und Design Typographie Webdesign/Gestaltung

Tipps zu hellem Text auf dunklem Grund

In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:

Schriftgröße

Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!

Beispiel zur Schriftgröße ansehen.

Zeilenabstand vergrößern

Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.

Beispiel zum erhöhten Zeilenabstand ansehen.

Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]

Laufweite erhöhen (sperren)

Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.

Beispiel zur erhöhten Laufweite ansehen.

Kontrast

Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.

Beispiel zum Kontrast ansehen.

Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.

Weitere Infos

Kategorien
Webdesign/Gestaltung

Lightbox JS 2

Eine sehr nette Art um Bilder zu präsentieren bietet Lightbox JS.

Das Ganze arbeitet mit JavaScript, CSS und XHTML und vergrößert ein Vorschaubild noch auf der selben Seite und legt es über den Inhalt, somit ist kein vor und zurück klicken mehr nötig. Natürlich kann man das Bild auch wieder schließen.

Sehr hübsche Sache!

Update, 12. April 2006:

Vor einiger Zeit ist Lightbox JS v2.0 veröffentlicht worden.

Kategorien
Typographie Webstandards

Guillemets in deutschen HTML-Texten (Mini-Update)

Immer wieder frage ich, was zuerst kommt: » oder «? Aber es ist wie in der Straßenverkehrsordnung: Rechts vor Links, R vor L. Also, erst » (») dann « («).

Und so sieht das dann aus: »Ein Text, der in französichen Anführungszeichen, auch Guillemets genannt, steht. Zu beachten ist, dass die Klammern sozusagen auf den Text zeigen. Würde man diesen Text in französisch schreiben, müsste man die Guillemets umkehren.«

Mini-Update: Die einfachen Guillemets werden mit › (›) und ‹ (‹) erzeugt.