Early on in my graphic design career, I was designing items for the static end. I rarely had to consider fonts. The only thing that mattered was having the font on the computer in front of me, and my worry would stop there. Along the way, I’ve learned there is a lot more to consider when it comes to fonts. This spans from the media the font is intended for, how widely it will be used, and for what period of time. Our focus in this article will be on fonts ideal for websites.
Different mediums to consider: (courtesy of fontsquirrel.com)
Commercial Desktop Use – Create commercial graphics and documents.
@font-face Embedding – Embed the font in your websites with CSS.
Ebooks and PDFs – Embed font in eBooks and portable documents.
Applications – Embed font in applications and software.
The font for your site is typically changed in the CSS section of the site. Depending on your platform, the CSS is accessible in a variety of ways.
Fontsquirrel offers a web font generator that allows you to convert most fonts into a web font for use online.
Consider why it’s important to know about your font:
- How will it look on other browsers?
- How much will this font end up costing? Is it limited to desktop publishing, or can it be used in web publishing? Does your license restrict you from sharing your font with clients if required?
- Reliability: An improperly created truetype font can potentially crash your computer. Using a subscription service, or purchasing from a reputable source typically shields you from the dangers of an incorrectly executed font.
- When choosing your font, considering how the font will look on large and small screens while keeping aesthetic qualities, clarity, and loading times in mind.
Googlefonts– focuses on webfonts
Google fonts provides “hundreds of free, open-source fonts optimized for the web.” Why is this important? A low cost/ free font can save a good deal of money in the long run. Google fonts are a benefit as you can keep a clear eye on loading times, as well as cross bowser compatibility. There’s also a good deal of handy information about the current use of a particular font on a global scale
FontSquirrel.com– focuses on commercial-use fonts
Dafont.com– focus appears to be on personal use, donation base. There are a large number of commercial use fonts available.
Adobe Webfonts– (through Adobe type kit) a subscription is paid to access a number of high profile, professionally created fonts “that have been carefully developed to look great on screens and easily deployed on websites.”
With Creative Cloud updates, soon the fonts will be able to sync with Adobe products on desktop.
Edgewebfonts– the free subsidiary of Adobe Webfonts
OTHER USEFUL TOOLS:
Typewonder.com- lets you test out web fonts on an existing published site.- Really amazing tool for test-driving fonts.
Myfonts/WhatTheFont- Need a font identified? This tool is great!
Last weekend, the team behind Twitter Bootstrap, a widely used and highly favored front-end framework for websites, launched the first Release Candidate of Bootstrap 3. The primary focus of this release is the shift to a mobile-first platform and becomes responsive by default. You can read more about the release from the Twitter Bootstrap Blog.
On the same day of the Bootstrap release, Meanpath also released data on their blog revealing that “Twitter Bootstrap now power[s] 1% of the web. Considering the massive size of the web this is an impressive figure. It is also great news for companies like ours who believed in the future of the framework enough to have built a CMS tool, which relies on Bootstrap.
There is currently web chatter concerning the major alterations to this edition of Twitter Bootstrap. “With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed.” – @mdo and @fat. We want to spend some time highlighting those big changes and what this will mean to our peers who are building websites and platforms on Twitter Bootstrap.
Summary of Core Changes
Bootstrap has now adopted a mobile-first methodology. Basically, this means that the responsive design of a site starts with the focus of a mobile device and uses media queries to change the display for tablet and desktops as the view scales out.
In the past, the default of Bootstrap was based on the desktop view with a width of 940px. If you wanted your Bootstrap site to be responsive, you had to include both the default bootstrap and the responsive files. Because of the mobile-first goal, the team no longer separates the responsive features from the core file.
This is a welcome change because it simplifies websites by reducing the number of referenced files. This reduced-file trend is also evident in the popular content delivery network, BootstrapCDN, which already provides a combined CSS file to merge the responsive styles with core styles.
There is really more to it than just merging code files. With mobile-first design, there are changes to nearly everything in Bootstrap. These include a revamped grid system and forms, as well as adjustments to many other features we have come to know and love in Bootstrap.
One of the most controversial changes in Boostrap 3 relates to the grid. The Twitter team has decided to drop the static rows in favor of all fluid rows. This change is in place to put the emphasis on mobile-first. In the previous version, when viewing a website on a mobile device, there would be a percentage based width with right and left margins. This change simply makes all the grids responsive. It allows for a single grid instead of grids within grids, and reduces much of the prior version’s complexity.
At SquareHook, we initially designed our editor to output the static grid. After integrating a few templates, we quickly discovered a lot of annoying issues with the use of the static grid. The shift to dynamic grids in the new release is a welcome one as we start thinking about making changes to our system to support Bootstrap 3.
Another addition to this Bootstrap edition is the migration from .span* to .col-*. The new features allow for finer-tuning at different device sizes from its predecessor. This makes it easier to control increasingly complicated grid outputs.
The new styling of V3 has to be one of my favorite features. Streamlining the look of Bootstrap to be flatter provides easier customization of the default Bootstrap theming. Again this is a welcome change as we are constantly making adjustments to the theme. Changes like removing shadows and gradients should be much quicker in version 3. I’m excited for the new styling and can’t wait to see what they have in store for the designer.
Updates to Icons, Buttons, Forms, and Menus
Glyphicons have been a impressive asset to Twitter Bootstrap, but separating them out from the core was necessary. With great alternatives like Font Awesome, we frequently look to other icon libraries for more options in icon sets.
The button changes are pretty straightforward; much of the changes have been around cleaning up semantics and providing a flatter, modern look based on current web trends. My favorite aspect of the change is the buttons without outer box-shadow by default.
Forms are now mobile-first. Basically, inputs now have a width of 100%, by default. Also there are a number of styles dropped from this section. In particular, removing the .form-search which will likely not be missed. Twitter also dropped the inline-help, not surprising since forms inputs are now 100%.
One very controversial change is the removal of submenus. Many are wondering why this change is happening in the dropdowns. We made an active decision a year ago to not support this feature in our own development. I can see the value of it, but I can also see how it increases user complexity. The work in supporting this feature, is a lot and I agree with mdo:
“@quasipickle We haven’t seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don’t have much of a place on the web right now, especially the mobile web. They will be removed with 3.0.”
The changes in Twitter’s Bootstrap 3 are interesting. Those of us building out applications that use Twitter Bootstrap have our work cut out for us over the next couple weeks. Overall, I love the changes and want to thank @mdo and @fat for their excellent work. Thanks guys. It’s exciting to see new stuff!
Author: Joshua Maag, CEO at SquareHook