339 Bytes CSS für bessere Webseiten

Der indische Web Science Researcher aus Bangalore empfiehlt für leicht lesbare Texte die Schriftart 'Fira Sans', welche die Webseite von GoogleAPIs.com importieren kann:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300'); 

Schlägt das Importieren der Schrift fehl, nutzt der Browser die Standardschrift ohne Serifen. Für eine leichtere Lesbarkeit empfiehlt Koley eine Zeilenhöhe (sowie den Zeilenabstand) von 1.6, damit der Text nicht wie eine undurchdringliche Mauer daherkommt. Die Werte für color und background reduzieren gemeinsam den Kontrast ein wenig und fördern damit die Lesbarkeit noch weiter.

Mit max-width, padding und margin begrenzt er den Content auf ein Maximum von 640 Pixeln, zentriert ihn und stellt sicher, dass der Text nie an den Rändern des Bildschirms klebt. Dabei sind diese Einstellungen sogar responsiv und sehen auch auf Mobilgeräten gut aus.

body {
font-family: 'Fira Sans', sans-serif;
line-height: 1.6;
color: #222;
max-width: 40rem;
padding: 2rem;
margin: auto;
background: #fafafa;
} 

Dazu kommen noch ein paar weitere CSS-Tags. Die Bildgröße wird begrenzt und weitere Farben für Links und die ersten beiden Überschriftsebenen werden definiert:

img {
  max-width: 100%;
a {
  color: #2ECC40;
  text-decoration: none;
}
h1, h2, strong {
  color: #111; 
}

Schon diese 20 Zeilen an CSS genügen, um Texte ansehnlich zu gestalten. Heute tendieren die Webentwickler dazu, die vielfältigen Optionen von CSS viel zu massiv einzusetzen, was dazu führt, dass Websites "mit Tonnen an unnötigem CSS" beladen werden. Koley plädiert dagegen für eine schlichte Leichtigkeit, die mit ultraschnellem Laden der Seite belohnt wird.

Zum Originalartikel von Koley geht's hier lang ...