Typografie auf mobilen Geräten

Im Umgang mit responsive Design und Mobilen Webseiten bleibt auch ein Aspekt der Gestaltung wie immer von sehr hoher Bedeutung, die Typografie.

Gerade hier muss man viele Besonderheiten noch genauer betrachten als schon beim normalen Webdesign.

Weiterlesen


CSS pseudo-Klassen :before/:after und Einsatz von FontFace-Kits

Webseiten skalierbar, im Sinne von zoombar,  zu gestalten scheitert gerne mal bei Icons und Grafiken. Gerade Icons denen ein Textlink nachgestellt ist, sehen bei grösserer Schriftansich häufig schäbig aus. Auch blähen diese Icons unsere Spritedateien auf und sind auch nicht so ohne weiteres einzufärben. SVG scheint bei größeren Grafiken und vor allem bei Infografiken die richtige Wahl zu sein, wenn da nicht wieder unsere geliebte Browserkompatibilität wäre.

Was nun? Wir wollen Icons vor Textlinks haben, die sich einfärben lassen und die auch bei Zoomänderungen noch gut aussehen.

Einen Möglichkeit besteht im Einsatz von @font-face Kits und der Pseudo-Klasse :before. Auch ein Blick in die Unicode-Tabelle (z.B. hier)  kann schon das gewünschte Icon bringen.
Sollte die Unicode-Tabelle keine Lösung bringen, kann man auf eine @font-face Kit zurückgreifen und diese Schrift mit @font-face einbinden (gute Kits kriegt man bei fontsquirrel.com). Mit dem @font-face Kit werden die gesamten Schriften in den wichtigsten Formaten geliefert und eine CSS-Datei zeigt die Einbindung.

Beispiel  (fontsquirrel – modern pictograms)

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Dann braucht man eigentlich nur noch einen normalen button-Tag und innerhalb ein inline-Element (span) und schon kann man einen Upload-Button mit einem Icon versehen.

.button {
	border: 1px solid #cccccc;
	background: #dddddd;
	padding: 5px 20px;
	color: #0044ff;
	text-shadow: 1px 1px 0 #FFF;
	cursor: pointer;
}

.btn:before {
	font: 18px/0px 'ModernPictogramsNormal', Arial, sans-serif;	
}

.Upload:before {
	content: 'A ';
}

.Download:before {
	content: 'D ';
}

.Reload:before {
	content: 'R ';
}

.button:hover {
	color: #E50000;
}

<button class="button"><span class="btn Upload">FotoUpload</span>
<button class="button"><span class="btn Download">Download</span>
<button class="button"><span class="btn Reload">Aktualisieren</span>

Und schon hat man die Button mit dem gewünschten Icon-Effekt. Der geschickte Einsatz des data-Attributs kann dann auch noch CSS-Zeilen bei der Content-Deklaration bringen.


CSS3: Text-Layouts mit dem „Exclusions and Shapes Module“

Anspruchsvolle Text-Layouts kennen wir von den Printmedien. Z. T. haben es diese auch schon längst in die digitale Welt geschafft. Mit Flash und anderen (Adobe-) Tools können tolle Magazin-Layouts erstellt werden. Sobald es an die Umsetzung mit Webstandards geht, stößt man aber an seine Grenzen. Bisher!

Denn nun gibt es mit dem „Exclusions and Shapes Module“ ein Entwurf zum Erstellen von coolen Text-Layouts mit CSS. Auf Initiative von Adobe hat das W3C diesen Standard vergangenen Monat als Working Draft veröffentlicht. Mit diesem Modul können wir nun Textblöcke in spezielle Formen bringen. Wie wir es aus den erwähnten Magazinen kennen, passt sich die Zeilenlänge einer definierten Form an. Das kann z. B. so aussehen:

Bei Adobe gibt es noch weitere interessante Beispiele. Die Browserunterstützung ist für diesen jungen Standard übrigens auch schon akzeptabel. Webkit ist mit Safari und Chrome dabei und ebenso MS mit dem IE10. MS hat sich sogar mit Vorschlägen zum Standard beteiligt. Es ist damit zu rechnen, dass alle anderen Browserhersteller nachziehen und wir in Zukunft Magazin-Layouts mit Webstandards, anstatt Flash umsetzen.