{"id":1331,"date":"2014-06-17T14:29:57","date_gmt":"2014-06-17T13:29:57","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=1331"},"modified":"2016-06-07T16:36:42","modified_gmt":"2016-06-07T15:36:42","slug":"grids-and-typography","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2014\/06\/17\/grids-and-typography\/","title":{"rendered":"Grids and typography"},"content":{"rendered":"

We want\u00a0 simplicity in design<\/a>. Space between elements on a page should be elegant and purposeful. Typography should be beautiful and easy to read. How do you decide values to realise this?<\/strong><\/p>\n

The current university template was created in 2009. At that time it served its purpose as the new design, but online typography and grids have moved ahead in the past few years.<\/p>\n

The grid<\/h2>\n

Although we’ve been exploring a new visual language, I’ve needed to take a step back to the fundamentals of design – the grid<\/a>.<\/p>\n

When elements align to a grid, it creates a sense of proportion, balance and rhythm. A vertical rhythm in typography is created by defining a baseline grid, the lines on which your text sits. These horizontal lines intersect your columns.<\/p>\n

We are using Bootstrap<\/a> as our framework. On a large screen (1170px container width) its default grid<\/a> is 12 columns wide with a gutter of 30pixels between them.<\/p>\n

I used a golden ratio typography calculator<\/a> to calculate an optimal line-height to font-size (I selected 18px). This came to 31px line-height – I rounded it off to 30px to reflect the 30px gutter width.<\/p>\n

Typographic scale<\/h2>\n

With a grid defined, I needed to create a typographic scale. Inspired by a list apart article on meaningful typography<\/a>, I selected Tim Brown’s modular scale<\/a> calculator and experimented with various values. I also discovered Gridlover<\/a> – a handy tool to help you select type based on a modular scale with vertical rhythm.<\/p>\n

I experimented with different ratios based on natural and musical intervals.<\/p>\n

For the golden ratio, phi<\/a> (1:1.618), the minor sixth (5:8) and the perfect 5th (2:3), heading 1 looked huge in proportion.<\/p>\n

Perhaps this is because our current website type is so small.<\/p>\n

I have noticed a trend in large, proud headings online which can be very pleasing – perhaps the golden ratio is becoming a popular choice.<\/p>\n

Our heading font, Century Schoolbook, has a tall X-height and appears very large.<\/p>\n

\"\"<\/p>\n

Text proportions using the golden ratio.<\/p>\n

 <\/p>\n

The augmented fourth \/ diminished fifth (1:\u221a2), known as a tritone<\/a> in music, seemed to have a better fit.<\/p>\n

The heading 1 is still large in proportion to other elements, but less dramatic in scale.<\/p>\n

\u00a0<\/strong><\/p>\n

\"\"<\/p>\n

Text proportions using\u00a0 augmented fourth\/diminished fifth (1:\u221a2) ratio.<\/p>\n

 <\/p>\n

Fonts<\/h2>\n

The fonts you choose add character to your page. They are evocative and set the atmosphere.<\/p>\n

Our typeface is already defined by our brand. We use Century Schoolbook<\/a> for Heading 1 and Arial for all other headings and body copy.<\/p>\n

Century Schoolbook is mostly used in uppercase for primary headings in our printed material – a consideration for online.<\/p>\n

It gives a bold, authoritative feel supporting the University brand and provides\u00a0 contrast to the smaller, functional Arial which does its job of populating content.<\/p>\n

Arial has been a trusty, if not staid font, to use online – derived from the sacrosanc Helvetica, is has been a safe bet. With the advent of @font-face<\/a>, we now have broader choices for online fonts freeing up frustrated designers<\/a>.<\/p>\n

My adventure into typography is also leading me to explore Open Sans<\/a>. Gaining popularity it is elegant, clean and sophisticated, yet modern and provides excellent legibility. It is optimised for web, print and mobile interfaces.<\/p>\n","protected":false},"excerpt":{"rendered":"

We want\u00a0 simplicity in design. Space between elements on a page should be elegant and purposeful. Typography should be beautiful and easy to read. How … Read more<\/a><\/p>\n","protected":false},"author":17235,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79410,79436],"tags":[521,79463,79435,23153,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1331"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/17235"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=1331"}],"version-history":[{"count":26,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1801,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1331\/revisions\/1801"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}