1

Is it just me, or does the text on the Bootstrap buttons hard to read:

Bootstrap buttons

I feel that the text is way too small for the size of the button and the letters are too close to each other, making them blend together. Is this just me?

Are there general principles for choosing fonts and it's size inside the buttons?

Bootstrap is known for its slick design, yet I am struggling to understand their choice for button styling.

5

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.

| improve this answer | |
3

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:

Bootstrap default buttons

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.

Lowercase characters from Arial

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.

Bootstrap buttons using various web fonts from Google

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.

Screen cap of type specimen generator

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.

| improve this answer | |
  • Shame on Bootstrap for their miserable defaults. I have since found Lucida Grande neatly readable without the overhead of downloading external fonts. – Dmitri Zaitsev Dec 19 '15 at 10:47
  • @DmitriZaitsev I expanded my answer a bit to emphasize the need to customize. Bootstrap never wanted you to use those defaults. For the record, I wouldn't use Lucida Grande either. It was designed for a different era of displays and tends to look clunky in a modern environment. – plainclothes Dec 19 '15 at 22:55
  • Any details or links on where Lucida Grande looks clunky? – Dmitri Zaitsev Dec 21 '15 at 8:47
  • Well, it's pretty hard to find an example of it in use these days. It used to be the Mac Finder font, several OS X generations ago. I would simply test it in context against other options. Considering that you can use the ones I listed for free, you've got nothing to lose. – plainclothes Dec 21 '15 at 17:32
  • Thanks, you are saying these are available from Google fonts but are there any web safe fonts there which you don't need to download? I'd rather limit usage of external sources, especially that Google is notorious for killing/deprecating its products. – Dmitri Zaitsev Dec 22 '15 at 5:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.