A Beginner’s Guide to Pairing Fonts | Webdesigntuts+

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

via A Beginner’s Guide to Pairing Fonts | Webdesigntuts+.

Web Font Services: the Good, the Bad, and the Ugly | Webdesigntuts+

In this article we’ll be taking a look at a few of the most popular web font services, comparing features between them and talking about some of the red flags involved with working with real fonts on the web.

We’re a lucky bunch, we web designers of the present. The web designers of yesteryear have long struggled with a frustratingly small selection of fonts – the web-safe system fonts that were tried and tested for screen use. You know their names. Georgia, Times New Roman, Arial, Verdana – nearly all of them send a slight shudder down our spines.

via Web Font Services: the Good, the Bad, and the Ugly | Webdesigntuts+.

Media Queries, Sass 3.2, and CodeKit | CSS-Tricks

Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.This isnt a brand new idea. Ben Schwarz did an excellent 7 minute video showing us how it works 7 month ago. Jeff Croft wrote about it 4 months ago. Mason Wendell wrote about it 3 months ago.

via Media Queries, Sass 3.2, and CodeKit | CSS-Tricks.

An Introduction to the CSS Flexbox Module | Nettuts+

CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we’re going to talk about a new layout mode, called flexbox – new in CSS3. I’m sure you’re raring to go! Let’s get started after the jump.

via An Introduction to the CSS Flexbox Module | Nettuts+.

Which responsive images solution should you use? | CSS-Tricks

There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.

The spreadsheet has the data, but let’s digest it through thinking about it through the lens of practical questions.

To choose which technique is right for you and your project these questions may help as a guide. Many of the questions may apply to your project, so you’ll have to sort out which techniques fit what scenarios and find the overlap.

via Which responsive images solution should you use? | CSS-Tricks.

Bootstrap css

The nice people form twitter have released a css framework/grid called bootstrap. I have been playing with it for the last few days and have found it very easy to work with and customise. Saves a lot of work when setting up a new project combine it with boilerplate and you are good to go with html5.