Twitter launches its new iPad app and introduces new profile header. So it was only right that we updated our twitter page with a new header.

Want to customise your own header for your twitter profile?

Use 520 × 260px and start adding colour to yours.

A little hint to what we are currently tinkering with at the Artlines studio.
All to be revealed soon enough.

Artlines are pleased to announce that Datrix has gone live!

Using Datrix’s existing brand Artlines refreshed the online presence and ongoing strategy with Datrix, pushing them above current competitors in the market.

Bringing a fresh colour palette to the brand and using new images that create impact with the key messaging helps re-align Datrix as a leading company within the industry.

Providing Datrix with our very own bespoke CMS Arena, Datrix has full control of content and placement. Users can log in, edit, move, add and tweak details of each individual page.

Artlines have an ongoing relationship and strategy with Datrix to measure performance and drive the site forward to get the best results.

Visit Datrix.co.uk.

I’m currently using the http://www.google.com/webfonts service for this latest web development build, more specifically ‘Open Sans’.

I need the use of multiple font-weight variants from light, regular, semibold and bold to produce what I’ve achieved in the photoshop file.

Google lets you quickly select the styles you want then provides you with three options of inclusion, standard, @import or javascript. All three of these produce similar results and gave me the same issue.

I opted for the standard inclusion linking the following into my header: <link href=‘http://fonts.googleapis.com/css?family=Open+Sans:400,300,700’ rel=‘stylesheet’ type=‘text/css’>

Integrating the font is simple using the CSS declaration of font-family: ‘Open Sans’; on the body style.

But after this threw me something I’ve not come across before.

As mentioned before I needed the use of multiple font-weight variants, as google suggests you can use font-weight: 400; or font-weight: 300; etc to choose between the different styles you selected over at google webfonts.

This didn’t work the way I was expecting, this resulted in nothing… the only result was that it seemed to be showing the last @font-face seen within http://fonts.googleapis.com/css?family=Open+Sans:400,300,700.

The current issue that I can see is that the font-family names are all the same, font-family: “Open Sans”; Reading online this is also creates problems for for IE7 and IE8 users.

The solution I found was to create my own fonts.css and paste the google @font-face’s within it.
I then needed to rename the font-family’s to something more appropriate. For example font-family: “Open Sans Light”, font-family: “Open Sans Bold”; etc.

I then call the specific font-family within my stylesheet for the correct font-weight variant I need.

This seems to do the trick and works as I need.

It’s been a busy few months here at Artlines Media. Lots of great new clients and projects, so we thought we would share some of the work coming soon: