Design und so
Huch, was ist denn hier los: Ich als alter Programmierfritze befasse mich in der letzten Zeit mit (Web-)Design und so’n Krams.
Angefangen hat das mit dem Shop, wo ich mal mit aktuellem CSS, HTML5 und etwas ganz klein wenig Standard-JavaScript, das man so braucht, in Kontakt kam.
Dann bin ich irgendwie über YellowLeds Blog gestolpert, das sich dieses Jahr neu erfinden will: Ein komplett neues Serendipity-Blog-Theme, begonnen ganz bei Null, alles live und zum Miterleben. Mit jedem Eintrag sind neue Sachen dazugekommen. Als ich geguckt habe, war das Blog recht nackig (keine Seitenleiste, fast keine Navigation), komplett ohne Farben und Fonts und sah damit so aus wie eine klassische ungestylte HTML-Seite Ende der 90er: Der Browser rendert eine Überschrift halt fett und groß, Links sind blau und das war’s dann auch schon. Interessanterweise war das gefühlt übersichtlicher und schöner zu lesen als mein Blog hier. Kann sein, dass das nur meine alten Programmierergewohnheiten waren (so sah das halt aus, wenn man früher in HTML geschriebene Dokumentation gelesen hat), aber ich kam ins Grübeln, ob ich nicht vielleicht auch mal in die Richtung wollte. Zumindest größere Schrift und mehr Platz – und der Gedankengang „laut Logs interessiert sich hier niemand für meine Kategorien: die Leute kommen per Twitter, Facebook oder sonstwas direkt auf einen Artikel, lesen den und sind wieder weg; die Blognavigation interessiert keinen“.
Ich habe zwar bisher noch keine diesbezüglichen Analysen auf meine Logs gefahren, das klingt aber nachvollziehbar. Mache ich in anderen Blogs auch so. Aber mein schönes hierarchisches Kategorieplugin wegwerfen? Das habe ich eigenhändig nur für diese Webseite geschrieben, das hat sonst keiner (ja, ich hab’s noch nicht geschafft, das Plugin irgendwo in ein Repository zu packen).
Ein paar Wochen später kam dann Fefe mit dem Link auf http://practicaltypography.com/ an (die Fefe-Folgeposts dazu bitte selber suchen). Ich habe früher™ öfter mit LaTeX hantiert und dazu fleißig FAQs sowie das eine oder andere Buch gelesen, da bin ich schon öfter mal etwas mit Typographie in Kontakt gekommen (Schusterjungen und Hurenkinder sind mir sogar schon seit WinWord 2.0 geläufig – damals, als Software noch mit dickem Handbuch und einem richtig tollen Online-Tutorial daherkam, das nicht nur Menüs und Dialoge, sondern auch Layoutgrundlagen erklärt hat *schwelg*). Auch sonst kann man mich mit dem Thema erfreuen (z.B. so oder so). Practical Typography habe ich noch nicht ganz durch, aber genau wie Fefe habe ich damit angefangen, Krams umzustellen.
Was ich mir noch nicht abgewöhnt habe, ist diese Unart, wenn ich hier z.B. in den Quelltext des Blogartikels gucke. Da ist es zum Glück egal, weil es HTML ist. Ansonsten muss ich mich damit rausreden, dass ich durchaus öfter Plaintext für Terminalanzeige schreibe (Usenet, Cobol-Programme) und genau da sind doppelte Leerzeichen ein klein wenig erlaubt. Sowohl emacs als auch IBMs ISPF Editor behandeln ein und zwei Leerzeichen beim Umbruch ganz unterschiedlich, da muss man dann auch mal zwei benutzen. Wie soll ich das denn so jemals richtig lernen :-(
Meine „alte“ Webseite ist inzwischen auf HTML5 umgestellt, responsive und hat neuerdings optimierte Schriftarten, -größen, Zeilenabstände und so weiter. Ein paar kleine Dinge sind noch auf der ToDo-Liste, unter anderem will ich wegen des Fonts nochmal gucken. Butterick empfiehlt als frei nutzbare brauchbare Serifenlose Fira Sans: Generell ist die schick und sie hat einen Haufen verschiedener Schriftstärken (toll – bisher habe ich nur in normal und fett gedacht). Ich bin noch nicht ganz mit mir im Reinen, ob sie zu schmal und zu hoch ist, aber auf der Webseite gibt es anders als hier im Blog keine längeren Texte, das sollte passen. In meinem Downloadtabellen sah die Datumsspalte unmöglich aus, weil die Ziffern unterschiedlich breit sind, aber dank der OpenType-Features kann man den Font auf gleichbreite Zahlen umstellen – das ist cool und ich muss jetzt noch eine Runde mit den ganzen anderen Einstellungen rumspielen gehen. (Für Browser, die das nicht können, habe ich die Spalte zentriert, das ist dann halbwegs erträglich.)
Ich habe (ich glaube, da war der Fefe mit seinen Folgeartikeln schuld) noch Ubuntu, Clear Sans und Sans Serif Pro als alternative Schriftarten im Blick. Mal sehen, was es wird; erste unabhängige Tests tendieren ausnahmslos zu Fire Sans oder Ubuntu. Und anschließend muss ich mich nochmal um die Überschrift kümmern, die soll nämlich eine andere Schriftart kriegen – aber welche? Mein aktueller Favorit ist einem CSS-Fehler geschuldet und ist leider nur auf meinem Rechner toll, alle anderen Systeme zeigen das anders an…
Irgendwie hat es was hypnotisierendes, den gleichen Text eine halbe Stunde lang im Wechsel mit verschiedenen Schriftvarianten zu vergleichen und die Unterschiede zu finden :-)
つづく
Wie kam es denn dazu?
Angefangen hat das mit dem Shop, wo ich mal mit aktuellem CSS, HTML5 und etwas ganz klein wenig Standard-JavaScript, das man so braucht, in Kontakt kam.
Dann bin ich irgendwie über YellowLeds Blog gestolpert, das sich dieses Jahr neu erfinden will: Ein komplett neues Serendipity-Blog-Theme, begonnen ganz bei Null, alles live und zum Miterleben. Mit jedem Eintrag sind neue Sachen dazugekommen. Als ich geguckt habe, war das Blog recht nackig (keine Seitenleiste, fast keine Navigation), komplett ohne Farben und Fonts und sah damit so aus wie eine klassische ungestylte HTML-Seite Ende der 90er: Der Browser rendert eine Überschrift halt fett und groß, Links sind blau und das war’s dann auch schon. Interessanterweise war das gefühlt übersichtlicher und schöner zu lesen als mein Blog hier. Kann sein, dass das nur meine alten Programmierergewohnheiten waren (so sah das halt aus, wenn man früher in HTML geschriebene Dokumentation gelesen hat), aber ich kam ins Grübeln, ob ich nicht vielleicht auch mal in die Richtung wollte. Zumindest größere Schrift und mehr Platz – und der Gedankengang „laut Logs interessiert sich hier niemand für meine Kategorien: die Leute kommen per Twitter, Facebook oder sonstwas direkt auf einen Artikel, lesen den und sind wieder weg; die Blognavigation interessiert keinen“.
Ich habe zwar bisher noch keine diesbezüglichen Analysen auf meine Logs gefahren, das klingt aber nachvollziehbar. Mache ich in anderen Blogs auch so. Aber mein schönes hierarchisches Kategorieplugin wegwerfen? Das habe ich eigenhändig nur für diese Webseite geschrieben, das hat sonst keiner (ja, ich hab’s noch nicht geschafft, das Plugin irgendwo in ein Repository zu packen).
Ein paar Wochen später kam dann Fefe mit dem Link auf http://practicaltypography.com/ an (die Fefe-Folgeposts dazu bitte selber suchen). Ich habe früher™ öfter mit LaTeX hantiert und dazu fleißig FAQs sowie das eine oder andere Buch gelesen, da bin ich schon öfter mal etwas mit Typographie in Kontakt gekommen (Schusterjungen und Hurenkinder sind mir sogar schon seit WinWord 2.0 geläufig – damals, als Software noch mit dickem Handbuch und einem richtig tollen Online-Tutorial daherkam, das nicht nur Menüs und Dialoge, sondern auch Layoutgrundlagen erklärt hat *schwelg*). Auch sonst kann man mich mit dem Thema erfreuen (z.B. so oder so). Practical Typography habe ich noch nicht ganz durch, aber genau wie Fefe habe ich damit angefangen, Krams umzustellen.
Exkurs: Doppelleerzeichen
Was ich mir noch nicht abgewöhnt habe, ist diese Unart, wenn ich hier z.B. in den Quelltext des Blogartikels gucke. Da ist es zum Glück egal, weil es HTML ist. Ansonsten muss ich mich damit rausreden, dass ich durchaus öfter Plaintext für Terminalanzeige schreibe (Usenet, Cobol-Programme) und genau da sind doppelte Leerzeichen ein klein wenig erlaubt. Sowohl emacs als auch IBMs ISPF Editor behandeln ein und zwei Leerzeichen beim Umbruch ganz unterschiedlich, da muss man dann auch mal zwei benutzen. Wie soll ich das denn so jemals richtig lernen :-(
Was schon passiert ist
Meine „alte“ Webseite ist inzwischen auf HTML5 umgestellt, responsive und hat neuerdings optimierte Schriftarten, -größen, Zeilenabstände und so weiter. Ein paar kleine Dinge sind noch auf der ToDo-Liste, unter anderem will ich wegen des Fonts nochmal gucken. Butterick empfiehlt als frei nutzbare brauchbare Serifenlose Fira Sans: Generell ist die schick und sie hat einen Haufen verschiedener Schriftstärken (toll – bisher habe ich nur in normal und fett gedacht). Ich bin noch nicht ganz mit mir im Reinen, ob sie zu schmal und zu hoch ist, aber auf der Webseite gibt es anders als hier im Blog keine längeren Texte, das sollte passen. In meinem Downloadtabellen sah die Datumsspalte unmöglich aus, weil die Ziffern unterschiedlich breit sind, aber dank der OpenType-Features kann man den Font auf gleichbreite Zahlen umstellen – das ist cool und ich muss jetzt noch eine Runde mit den ganzen anderen Einstellungen rumspielen gehen. (Für Browser, die das nicht können, habe ich die Spalte zentriert, das ist dann halbwegs erträglich.)
Ich habe (ich glaube, da war der Fefe mit seinen Folgeartikeln schuld) noch Ubuntu, Clear Sans und Sans Serif Pro als alternative Schriftarten im Blick. Mal sehen, was es wird; erste unabhängige Tests tendieren ausnahmslos zu Fire Sans oder Ubuntu. Und anschließend muss ich mich nochmal um die Überschrift kümmern, die soll nämlich eine andere Schriftart kriegen – aber welche? Mein aktueller Favorit ist einem CSS-Fehler geschuldet und ist leider nur auf meinem Rechner toll, alle anderen Systeme zeigen das anders an…
Irgendwie hat es was hypnotisierendes, den gleichen Text eine halbe Stunde lang im Wechsel mit verschiedenen Schriftvarianten zu vergleichen und die Unterschiede zu finden :-)
つづく
Geschrieben von 
mitch
mitch
Mitch’s Manga Blog am : Design und so, Teil 2
Mitch’s Manga Blog am : Hübschere Fonts unter LaTeX