Codesign

Web-typography for the website of one of the top brand consultancies in India.

Links

Site of the day: May 22, 2016 / Typewolf


Visit website


About the project:
In this project, I worked with the team at Codesign to revamp all the typography on their existing website. Codesign provided PSDs of the master type styles for desktop, and my responsibilities were to implement them in CSS/ Sass + translate all styles for different breakpoints.

While creating the stylesheets, we noticed that the older type styles in CSS were:-
– Not fully responsive: Typography did not adapt well to different screen sizes
– Not fully inclusive: Typography did not use relative units
– Not fully readable: The default width for all containers were 100%, so on desktop size, this would run to 18-20 words to a line.

Our starting point:
– Client had identified two fonts for the revamp: Whitney & Sentinel. These fonts were served from Cloud typography
– Client provided PSD mockups of two key pages of the website using the new fonts, this became the basis on which all the master stylesheet was created
– I created a dummy HTML page categorizing all website styles.
– I then created a clone of their wordpress website on my server and we started playing with type styles on actual content.

Front end development, WordPress
Since this website runs on wordpress, I installed a clone of the website on my server so that we could demo the font changes in real time with actual content. Soon as the CSS from the older website was given to me, I categorised all instances of the old font into a Sass partial. Sass is awesome (Note: I wrote this in 2016), especially because it allows you to organise your styles better. I was also able to use mixins to automatically calculate various measurements on the website.

Screen Typography
When you serve a font from cloud typography, you get the option of adding its ‘Screen Smart’ variant to the font declaration. ScreenSmart fonts are specifically built for the screen, to perform at sizes from 9–18 pixels. For the revamp, we used a mix of both variants. A mixin would take in the font size provided in the PSD and convert it to the pixel on browser (because we all know that 18px on photoshop will never look like 18px on the browser) and eventually allot the correct font-family and font-size to it.

So for eg:
@include whitney(18);

Would result in the following style:

font-size: 1.6rem;
font-family: "Whitney SSm 4r","Whitney SSm A","Whitney SSm B","Lucida Grande","Lucida Sans",Verdana,Helvetica,Arial,sans-serif;
font-weight: 400;

Responsive Web Design
All type styles were provided for desktop, tablet and mobile. A trello board was maintained with everyone doing final checks across different devices and browser sizes. All typography was also defined relative to root font size, REMs. So if a person has changed the default font size on their phone / browser, the page layout and fonts would scale accordingly.

SVG manipulation
The older codesign website would change color (links, headings, borders, background tiles) randomly with every refresh. It struck me that if the icons and logo were supplied in svg (instead of png), not only would they be clearer, but they could also change color with the rest of the website. Especially since the logo can accommodate a lot of color, it really helped to make use of that area to reinforce the changing website colors.

Credits:
Especially thankful to have worked with the amazing design team at Codesign from whom I learnt a lot more about type-setting. Needless to say we were all pretty pumped when we heard that the new website was declared Site of the day on May 22, 2016 on Typewolf


I tried new things! Cloud typography
Working with the cloud typography platform was a great experience. For the uninitiated, Cloud typography is a web font subscription service from Hoefler & Co, one of the most sophisticated ones of its kind. (Sometime last year, they also released a website <https://try.typography.com> where you could take their fonts for a spin, I know I did).

I learnt lots! Working over someone else’s code
Working on someone else’s code is not easy (some would argue that I have mild OCD). Sass was my saviour! Once I was able to separate the typography styles from the rest of the website, work went on as normal. I was especially happy that not a single !important tag was used to override any CSS property in the process.


Tools:
HTML, CSS, WordPress, Sass, Gulp

Visit website

Codesign provided PSDs of the master type styles for desktop, and my responsibilities were to implement them in Sass + translate all styles for different breakpoints.
Tagged in HTML5 & SASS Web Wordpress