Bootstrap soll bearbeitet werden. Sie haben eine WENIGER variable Liste von Überschreibungen, einschließlich der Basisschriftgröße, die dann je nach Schriftartwahl und -präferenz erhöht/verringert werden kann. Diese Größen werden dann mithilfe mathematischer Logik für andere Elemente (wie Schaltflächen, Überschriften, Menüs usw.) angepasst. Darüber hinaus könnten Sie alles über die Schaltfläche mit LESS/CSS-Überschreibungen ändern.

Besser, aber nicht gut

Es ist schon eine Weile her, dass diese Frage gestellt wurde. In dieser Zeit haben Webfonts und das Rendern von Bildschirmfonts weiterhin große Fortschritte gemacht. Sogar das standardmäßige Bootstrap-Thema hält noch:

In Ihrem ursprünglichen Screenshot scheint die verwendete Schriftart Arial zu sein. Dies ist ein Windows-Fallback für Helvetica, die Schriftart mit der ersten Priorität (wie in meinem Beispiel zu sehen). In beiden Fällen waren sie nie die richtige Wahl für die Verwendung am Bildschirm und entsprechen nicht den Standards heutiger Web-Apps.

Standard ist nicht der richtige Weg

Trotz seiner Allgegenwart im Internet (weniger heutzutage) hat Arial einige große Designmängel. Im Kern ist das Problem die Strukturphilosophie, die Arial von Helvetica übernommen hat: Der groteske Stil starrer, geschlossener Buchstabenformen. Dies stellt eine Herausforderung sowohl für das Pixel-Rendering als auch für die Lesbarkeit in jedem Medium dar.

Sie können dieses Designmerkmal in den Öffnungen von a, e, g und s erkennen. Arial öffnet diese Features leicht im Vergleich zu seinem Quellmaterial in Helvetica. Leider reicht dies gerade aus, um die Gesamtschrift unangenehmer zu machen, ohne die Bildschirmwiedergabe merklich zu verbessern.

Verwenden Sie eine bessere Schriftart

Denken Sie daran, dass Bootstrap nicht dazu gedacht war, sofort verwendet zu werden. Die Twitter-Crew hat den Rahmen um eine zentrale DIY-Philosophie herum entworfen:

"Hier sind alle Komponenten, um schnell einen Prototyp zu erstellen, jetzt passen Sie sie an"

Das font-familyist normalerweise das erste, was ich ändere. Und wir haben jetzt so viele hervorragende Gesichter zur Verfügung. Sogar Apple, das so unerschütterlich zu seiner miserablen Helvetica stand, ist zur maßgeschneiderten San Francisco-Schriftart übergegangen (die ironischerweise an Googles Roboto erinnert).

Hier ist ein Beispiel für die Schaltflächen von Bootstrap ohne Änderungen über font-family. Wenn Sie die Größe auf die Familie abstimmen, wird es noch besser.

Jede Schriftart hier ist kostenlos von Google Fonts verfügbar . Sie müssen nicht einmal die Schriftartdateien hosten.

Schneller und schmutziger Typtester

Das ist nicht glatt , aber hier ist ein kleiner Typtester, den ich zusammengewürfelt habe, als ich durch einige Bootstrap-Projekte geblättert habe. Im Grunde fügen Sie die Webfont-Links ein, ändern ein paar Klassen im CSS und es spuckt den Musterblock aus.

• Vorschau in meiner öffentlichen Dropbox.
• Code auf GitHub (Fühlen Sie sich frei zu forken!).

Ich bin kein Entwickler, und diese Lösung ist nicht elegant, aber es ist eine ziemlich schnelle Möglichkeit, einige verschiedene Typfamilien in Aktion auszuprobieren. Es könnte von richtigen Sass-Stilen (Variablen wären sooo nett) und js-Bereinigung profitieren, aber ich hatte nie die Gelegenheit, darauf zurückzukommen.