: Bootstrap buttons - text hard to read? Is it just me, or does the text on the Bootstrap buttons hard to read: I feel that the text is way too small for the size of the button and the

@Rambettina927

Better, but not good

It's been a while since this question was asked. In that time, web fonts and screen font rendering has continued to make strong progress. Even the default Bootstrap theme still holds up:



In your original screen shot, the font used appears to be Arial. This is a Windows fall-back for Helvetica, the 1st priority font (as seen in my example). In either case, they were never the right choice for screen use and thet don't render to the standards of today's web apps.

Default isn't the way to go

Despite it's ubiquity on the web (less so these days) Arial has some major design shortcomings. At it's core, the problem is the structural philosophy Arial copied from Helvetica: The grotesque style of rigid, closed letter shapes. This poses a challenge to both pixel rendering and readability in any medium.

You can see this design feature in the openings of a, e, g, and s. Arial slightly opens these features compared to it's source material in Helvetica. Unfortunately, it does so just enough to make the overall font more awkward without noticeably improving screen rendering.



Use a better font

Remember that Bootstrap wasn't meant to be used out of the box. The Twitter crew designed the framework around a central DIY philosophy:


"Here's all the components to prototype something quick, now go customize them"


The font-family is usally the first thing I change. And we have so many excellent faces available to us now. Even Apple, who so staunchly stood by their miserable Helvetica, has moved on to the bespoke San Francisco font (ironically reminiscent of Google's Roboto).

Here's an example of Bootstrap's buttons with no changes beyond font-family. If you fine-tune the size for the family, things get even better.



Every font here is available free from Google fonts. You don't even have to host the font files.

Quick(ish) and dirty type tester

This isn't slick, but here's a little type tester I threw together when I was churning through some Bootstrap projects. Basically, you drop in the webfont links, change a few classes in the CSS, and it will spit out the specimen block.


Preview in my public Dropbox.
Code on GitHub (feel free to fork!).




I'm no developer, and there's nothing elegant about this solution, but it's a reasonably quick way to try out some different type families in action. It could benefit from proper Sass styles (variables would be sooo nice) and js clean-up, but I never had the chance to get back to it.

Vote Up Vote Down

@Merenda852

Bootstrap is intended to be edited. They have a LESS variable list of overrides including the base font size, which then can get increased/decreased depending on your font choice and preference. Those sizes are then adjusted using mathmetical logic for other assets (like buttons, headings, menus, etc). In addition, you could change everything about the button with LESS/CSS overrides.

Vote Up Vote Down