TYPOGR APHY

Disclaimer #1 – This is a talk about type basics. If you know lots about type, sorry! Hope you learn at least *something*. Disclaimer #2 – This is a bit of an unusual talk about typography. I’m not going to talk about the difference between a hyphen and an en-dash or the relative merits of hanging your bullets outside the text-block. That stuff is important, but I’m going to focus on the really important stuff. The basics of typography for internet people @HenryHadlow manofscience.co.uk

Sounds like the job of an information architect or a web designer, right? But where to start? “It is the typographer’s task to divide up and organise and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.” Emil Ruder, 1969

Start with other people’s stuff. Typography has a lot of moving parts and when you’re just starting out it’s difficult to get everything working well together. Imitate what you like.

There are no secrets on the web. Right click > Inspect element. If you find a site you like, you can look at the HTML and CSS and find out how it’s done. Imitate what you like.

Even this can be a little bit intimidating because the dependencies in the CSS aren’t always clear. Help is at hand. Bootstrap offers some pretty good default styles… Project name Jumbotron heading Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sign up today © Company 2013 Home About Contact Subheading Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Subheading Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Subheading Maecenas sed diam eget risus varius blandit sit amet non magna. Subheading Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Subheading Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Subheading Maecenas sed diam eget risus varius blandit sit amet non magna.

That said, they’re so popular nowadays, they do look very ‘default’. You can take Bootstrap further with a theme. Starting with a template also let’s you stop worrying about the little details and focus on the important stuff – figuring out what content is actually the important stuff. Yeti A friendly foundation Web Apps Come of Age Download this free white paper to learn how to develop a rich web app experience Navbar Brand Active Link Dropdown Search Link Dropdown Brand Active Link Dropdown Search Link Dropdown Buttons Bootswatch Themes Help Blog Download Built With Bootstrap WrapBootstrap

If your site is a written blog, the writing – the body copy is the important bit. If your site is for photo sharing, the photos are the important part. This stuff goes front and centre. All the other stuff is background. The related links go in the background. Social icons go in the background. The logo goes in the background. Background can mean small or lower contrast, or it can mean further down the page. Or if you really can’t figure out why something’s there, just delete it. Comment it out, see if your boss notices. See if users notice. What content is actually important?

If you want to go it alone (or just improve on Bootstrap) the most important thing is to make sure the body text is easy to read – there’s more body text than any­ thing else, and it’s probably the most important thing on the page. It’s pretty easy to do, because the default styling of HTML and CSS is pretty good. Make the body text easy to read 1

Seriously. I know it’s ugly, but it’s reasonably easy to read. There’s one major flaw. The text block is too wide for easy reading. The eye has to travel too far back to the left-hand side and struggles to find the beginning of the next line. Only for a fraction of a second, admittedly, but this adds up and makes reading uncomfortable, especially over long browsing sessions. This is a motherfucking website. And it's fucking perfect. Seriously, what the fuck else do you want? You probably build websites and think your shit is special. You think your 13 megabyte paralax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow. Wrong, motherfucker. Let me describe your perfect-ass website: Shit's lightweight and loads fast Fits on all your shitty screens Looks the same in all your shitty browsers The motherfucker's accessible to every asshole that visits your site Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee) Well guess what, motherfucker: You. Are. Over-designing. Look at this shit. It's a motherfucking website. Why the fuck do you need to animate a fucking trendy-ass banner flag when I hover over that useless piece of shit? You spent hours on it and added 80 kilobytes to your fucking site, and some motherfucker jabbing at it on their iPad with fat sausage fingers will never see that shit. Not to mention blind people will never see that shit, but they don't see any of your shitty shit. You never knew it, but this is your perfect website. Here's why. It's fucking lightweight This entire page weighs less than the gradient-meshed facebook logo on your fucking Wordpress site. Did you seriously load 100kb of jQuery UI just so you could animate the fucking background color of a div? You loaded all 7 fontfaces of a shitty webfont just so you could say "Hi." at 100px height at the beginning of your site? You piece of shit. It's responsive You dumbass. You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it's viewed on. This site doesn't care if you're on an iMac or a motherfucking Tamagotchi. It fucking works Look at this shit. You can read it ... that is, if you can read, motherfucker. It makes sense. It has motherfucking hierarchy. It's using HTML5 tags so you and your bitch-ass browser know what the fuck's in this fucking site. That's semantics, motherfucker. It has content on the fucking screen. Your site has three bylines and link to your dribbble account, but you spread it over 7 full screens and make me click some bobbing button to show me how cool the jQuery ScrollTo plugin is. Cross-browser compatibility? Load this motherfucker in IE6. I fucking dare you. This is a website. Look at it. You've never seen one before.

Line length should be 45–90 characters per line (or 2–3 lowercase alphabets). This means your text block should be between 21–38 ems wide. If you want to change the browser defaults, 15–25px type is comfortable for reading on screen, with a line- height of 125–145% (typographers call this ‘leading’). This is a motherfucking website. And it's fucking perfect. Seriously, what the fuck else do you want? You probably build websites and think your shit is special. You think your 13 megabyte paralax-ative home page is going to get you some fucking Awwward banner you can glue to the top corner of your site. You think your 40-pound jQuery file and 83 polyfills give IE7 a boner because it finally has box-shadow. Wrong, motherfucker. Let me describe your perfect-ass website: Shit's lightweight and loads fast Fits on all your shitty screens Looks the same in all your shitty browsers The motherfucker's accessible to every asshole that visits your site Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee) Well guess what, motherfucker: You. Are. Over-designing. Look at this shit. It's a motherfucking website. Why the fuck do you need to animate a fucking trendy-ass banner flag when I hover over that useless piece of shit? You spent hours on it and added 80 kilobytes to your fucking site, and some motherfucker jabbing at it on their iPad with fat sausage fingers will never see that shit. Not to mention blind people will never see that shit, but they don't see any of your shitty shit. You never knew it, but this is your perfect website. Here's why. It's fucking lightweight This entire page weighs less than the gradient-meshed facebook logo on your fucking Wordpress site. Did you seriously load 100kb of jQuery UI just so you could animate the fucking background color of a div? You loaded all 7 fontfaces of a shitty webfont just so you could say "Hi." at 100px height at the beginning of your site? You piece of shit. It's responsive

Body text: 15–25px Line height: 125–145% Line length: 45–90 characters Text block: 21–38 ems wide

A great tool to try this stuff out right in the browser is typecast. (I don’t work for them or anything like that; I just think it’s a great tool.) It gives you a good long piece of dummy text with all sorts of different headings, quotes etc so you can try out how a bunch of different styles will work together.

You can try out everything visually and make several different options to compare – this is a great way to work, much better than trying to rationalise your type choices.

And when you’re done, typecast will generate some snippets of CSS to use in your code and make a handy style guide to refer to.

OK, so I know I said typography isn’t just about choosing fonts, but this is an easy way to make your typography look more considered. It’s not everything, and it’s possible to make good typography with Georgia and even Times New Roman, but your typography will look a bit better if you choose a custom typeface. Choose a font 2

Here are some useful resources for choosing typefaces. Typecast can also help – it let’s you try fonts from all the web font services without having to sign up for all of them and fiddle around with code to try out typefaces properly. hellohappy.org/beautiful-web-type/ www.typography.com justmytype.co

Chad Mazzola has chosen some of the best typefaces from Google’s Font library. He’s put his selection online at hellohappy.org/beautiful-web-type This is Cardo. www.google.com/fonts/specimen/Cardo “I personally would rather do the existentially essential things in life on foot. If you live in England and your girlfriend is in Sicily, and it is clear you want to marry her, then you should walk to Sicily to propose. For these things travel by car or aeroplane is not the right thing.” —Werner Herzog, Of Walking in Ice

As an aside, Chenglin Liu’s WhatFont Chrome Extension is a quick and easy way to find out what typeface is being used. It will even tell you what provider is being used. chengyinliu.com/whatfont.html “I personally would rather do the existentially essential things in life on foot. If you live in England and your girlfriend is in Sicily, and it is clear you want to marry her, then you should walk to Sicily to propose. For these things travel by car or aeroplane is not the right thing.” —Werner Herzog, Of Walking in Ice

Open Sans (heading) and Gentium (body copy) www.google.com/fonts/specimen/Open+Sans www.google.com/fonts/specimen/Gentium+Book+Basic On the GENEALOGY of MORALS At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the “bad conscience”: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced—that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and “suspended.” From now on they had to walk on their feet and “bear themselves” whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their “consciousness,” their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications. FRIEDRICH NIETZSCHE

Lato – www.google.com/fonts/specimen/Lato UNITY RHYTHM BALANCE EMPHASIS PROXIMITY HIERARCHY

Pairing typefaces is another way to give your type a considered look. It generally works best when the typefaces are very different. Dan Eden has made a great resource for type pairs from the TypeKit and Hoefler Frere Jones libraries. justmytype.co Pairings with a price label indicate that certain fonts are only available on one of Typekit’s paid plans. Return to the to see other pairings. home page £ Flesh it out Freight Sans Black is — make a statement. Tisa is more delicate; but it still packs a punch. Get with the Times, New Roman. Did you hear about the fight between the sans-serifs? The violence was Grotesk, but Akzidenz happen. strong —Frank Chimero “To delight someone is to give them a small lesson in seeing the world as something good.” Set in and Suggested by Freight Sans Pro Tisa Web Pro. Rory McCawl £ Serious fun. It started with a local hot-dog eating contest. Lou Verbain took first place, and moved on to the provincials, where he placed second. But the first-place contestant bowed out when his stomach ruptured, and Lou was on to the nationals. At internationals he placed a distant third to a whip-thin Japanese girl.

“Eating Everything There Ever Was” by . Patrick Johan neson £ PRINT IS DEAD Ok, print isn't dead. It's alive and well. In fact, why not go and buy a book right now? I'd recommend Long live print. really The Shape Of Design. —Robert Bringhurst “A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. If this wisdom needs updating, it is chiefly to add that a woman who would letterspace lower case would steal sheep as well .” Set in and Recommended by Brandon Grotesque Jubilat. Logan Galla. FREE Weathering the storm Japan [N A O T O K A N ] Even by the dismal standards of recent Japanese prime ministers, Naoto Kan could hardly be described as a people person. In the days and weeks that followed the unprecedented triple hit of a magnitude-nine earthquake, the devastating tidal wave and nuclear drama, it was not Prime Minister Kan’s first instinct to rush to the stricken north-east and comfort its homeless, shell-shocked citizens.

Set in and Suggested by Cubano PT Sans. Jake Giltsoff. £ That’s So Meta. Skolar makes a gentlemanly font for body copy. How do you do, madame? May I take your coat? Wait a second, what on is a serif face doing on a blueprint? Isn’t it usually the home of sans-serif lettering? Or at least the handwriting of an architect or an engineer? Earth big, bold S O R T A L I K E T H I S ? Right on. That’s more like it. Back to the drawing board, Mosby. Set in and Suggested by Meta Sans Skolar. Tyler Galpin. £ PROXIMA NOVA IS HONEST Its working title was "Honest Abe." Not really. Remember how we were talking about statistics earlier? I made that up. — Bruno Munari, Design As Art “It is enough to count the force of gravity as one of the components of an object. An old-fashioned chandelier without its frame at once becomes a pile of rubbish. Its form is obtained with the help of gravity.”

Headings typically form a hierarchy. HTML includes

all the way to

, but unless you’re writing a biochemistry textbook or a country’s constitution, you probably don’t need more than 2 or 3 levels of headings. If your content seems to require loads of headings, see if you can rethink it. The obvious stuff: headings should stand out from the body text and from one another. Headings 3

Here’s an example from GOV.UK. Adding space around the headings is often more effective than making the text really big. Popular pages Get started in business Starting a business Start your own business Set up as a sole trader Set up a business in the UK Running a business Running a limited company File your company’s accounts and tax... File an annual return with Companies... Business and self-employed Popular pages Get started in business Find out more about... Sectors and industries Departments and policy Search Home Trade Tariff Use this tool to search for import and export commodity codes and for tax, duty and licenses that apply to your goods. Use the Trade Tariff Start your own business Start with an idea Get funding Research your market Develop and plan Find partners, suppliers and premises Set up your business Register for Self Assessment Register for Self Assessment - forms including SA1, SA400, SA401, deadlines and your Unique Taxpayer Reference (UTR) number. Business fi nance and support fi nder Find business fi nance, support, grants and loans.

Use horizontal separation and vertical spacing to make the text stand out. Another trick is to make the odd-numbered and even-numbered ones different. h1 and h3 share a common style; h2 and h4 share a different style, that way h2 can’t be confused with h1 or h3. Services and information Departments and policy Driving, transport and travel Benefi ts Businesses and self-employed Employing people Education and learning Housing and local services Crime, justice and the law Money and tax Births, deaths, marriages and care Disabled people How government works Departments Topics Policies Publications Sectors and industries Farming Food, catering and retail Energy industry Manufacturing Maritime vessels and work at sea Scientifi c research and development The government is working to create the right conditions for companies to thrive and make it easier for people to start successful new businesses. See policies, publications and more Business and enterprise Latest in Business... Olympique de Marseille vs Arsenal published 17 September 2013 News story Notices and proceedings for the west of England updated 17 September 2013 Detailed guidance Applications and decisions for the west of England updated 17 September 2013 Detailed guidance Departments and policy

In general, simpler typography is more elegant. Try to use the fewer typefaces, fewer type sizes, fewer settings. Keep it simple 4

You could even try making your website using one typeface in one size, in one weight, in one colour, using attributes like capitals, letter spacing and vertical rhythm to create hierarchy and structure. Of course, you don’t have to keep it that way forever. But when you do introduce all the other elements, your design will be all the more elegant.

Grids give your designs structure. If you’ve got more than just a single column of body text, a grid will make your life a lot easier. By a grid, what I mean is a set of vertical guidelines you can align things to. Grids 5

gridsetapp.com is an interesting tool for creating grids. There are also some example grids on the webpage which show off gridset and grid-based typography in general. They’re all responsive and you can take a look at the code and see how it’s done. A layout derived from Marber’s classic grid for Penguin books 4 columns derived from the Golden Ratio This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962. It’s comprised of three uneven columns of three hundred pixels, one hundred and sixty pixels and five hundred and twenty two pixels. The gutters are thirty pixels and the overall width is one thousand, one hundred pixels wide. But because it is a fluid grid, the pixel values get turned into percentages. This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962. It’s comprised of three uneven columns of three hundred pixels, one hundred and sixty pixels and five hundred and twenty two pixels. The gutters are thirty pixels and the overall width is one thousand, one hundred pixels wide. But Show grid Show grid The Marber This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962.

I’ve heard that people think grids are restrictive, because they can’t just put stuff anywhere. In fact it’s just the opposite, because: A – instead of worrying about exactly where you’re going to hang that text-box, just line it up on one of your grid lines and spend that time worrying about more important stuff, like the body copy, or what you’re going to do at the weekend; and B – it’s not one of the ten commandments, you can still put stuff wherever you like when you feel like breaking the rules. A layout derived from Marber’s classic grid for Penguin books 4 columns derived from the Golden Ratio This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962. It’s comprised of three uneven columns of three hundred pixels, one hundred and sixty pixels and five hundred and twenty two pixels. The gutters are thirty pixels and the overall width is one thousand, one hundred pixels wide. But because it is a fluid grid, the pixel values get turned into percentages. This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962. It’s comprised of three uneven columns of three hundred pixels, one hundred and sixty pixels and five hundred and twenty two pixels. The gutters are thirty pixels and the overall width is one thousand, one hundred pixels wide. But Show grid Hide grid The Marber This specimen sheet is derived from Marber’s golden-ratio-based grid for Penguin book covers, designed in 1962. d1 d2 d3 d4

This example uses a 4-column grid overlaid with a 6-column grid. This is a popular and flexible combination and mirrors what we do on GOV.UK. A compound grid based on Gerstner’s Capital Magazine Introduction This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout.It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the Show grid Show grid The Gerstner 6 column + 4 column overlaid at the same breakpoint

If you have a grid, you won’t have to worry about making everything line up because it just will, and your design will look considered. A compound grid based on Gerstner’s Capital Magazine Introduction This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout.It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the unusual 5 column, asymmetric column configuration which is the basis for this layout. This layout is designed using a recreation of Karl Gerstner’s compound grid that was designed for Capital Magazine in the 1960’s. It’s a compound – meaning combined – grid of 6 column and 4 columns. This allows for very flexible layout combinations, including the Show grid Hide grid The Gerstner 6 column + 4 column overlaid at the same breakpoint da1 da2 da3 da4 da5 da6 db1 db2 db3 db4

There’s loads more to know about typography. A really good book is Practical Typography by Matthew Butterick – practicaltypography.com It tells you everything you need to know, and nothing you don’t need to worry about. It’s also online and you can take a look for free. If you like it, buy it! Further reading Practical Typography – Matthew Butterick • Typography in ten minutes • Maxims of page layout • Summary of key rules • What is good typography?

You probably know that I work for the Government Digital Service. I thought I’d spend a couple of minutes explaining how the typography works on GOV.UK. We’ve tried to make the typography and the layout one and the same. The typography is the layout. As far as possible, no extra details. First I’ll show you some old layouts and then how we’ve improved things. Case study – GOV.UK

Here’s the old layout for ‘When do the clocks change?’ We have a digital paperclip to make sure the Related box stays attached to the main content area.

This is the old layout for the guide to Income Tax. This shows the importance of having a consistent reading line on the left – a single guide which everything aligns to. Here the type bounces in and out, making it harder to read.

Here’s an old design for paying your Council Tax. There are a lot of boxes.

No content

Here’s the new(ish) homepage. We’ve tried to use the typography to create the design and use fewer boxed-in areas. Driving and transport Includes car tax, MOT and driving licences Benefits Includes tax credits, eligibility and appeals Businesses and self-employed Tools and guidance for businesses Employing people Includes pay, contracts and hiring Passports, travel and living abroad Includes renewing passports and travel advice by country Education and learning Includes student loans and admissions Working, jobs and pensions Includes holidays and finding a job Housing and local services Owning or renting and council services Crime, justice and the law Legal processes, courts and the police Money and tax Includes debt and Self Assessment Births, deaths, marriages and care Parenting, civil partnerships, divorce and Lasting Power of Attorney Disabled people Includes carers, your rights, benefits and the Equality Act Citizenship and living in the UK Voting, community participation, life in the UK, international projects This website replaces Services and information Welcome to GOV.UK The best place to find government services and information Simpler, clearer, faster Contents Services and information Departments and policy More on GOV.UK Search GOV.UK

Driving and transport Includes car tax, MOT and driving licences Benefits Includes tax credits, eligibility and appeals Businesses and self-employed Tools and guidance for businesses Employing people Includes pay, contracts and hiring Passports, travel and living abroad Includes renewing passports and travel advice by country Education and learning Includes student loans and admissions Working, jobs and pensions Includes holidays and finding a job Housing and local services Owning or renting and council services Crime, justice and the law Legal processes, courts and the police Money and tax Includes debt and Self Assessment Births, deaths, marriages and care Parenting, civil partnerships, divorce and Lasting Power of Attorney Disabled people Includes carers, your rights, benefits and the Equality Act Citizenship and living in the UK Voting, community participation, life in the UK, international projects This website replaces Services and information Welcome to GOV.UK The best place to find government services and information Simpler, clearer, faster Contents Services and information Departments and policy More on GOV.UK Search GOV.UK We’re (sort-of) using a 3-column grid overlaid with a 4-column grid. This is a classic grid system – easy to get started with but useful even for complex projects.

Home Driving and transport Tax discs, car tax and SORN Car tax: get a tax disc for your vehicle Make a SORN (Statutory Off Road Notification) Calculate vehicle tax rates Apply for a duplicate tax disc Apply for an HGV vehicle licence (tax disc) - form V85 More Tax discs, car tax and SORN Getting an MOT More Driving and transport Search Buy or renew your tax disc (vehicle licence) online - get tax for your car, motorbike, lorry, bus or other vehicle that needs a tax disc. on the DVLA website You can pay for your tax disc online if all of the following apply: you’re the vehicle’s registered keeper DVLA already has your correct name, address and vehicle details you have your reminder letter (V11 or V85/1) or registration certificate (V5C) your vehicle is insured your vehicle has an MOT if it needs one You may also need a Goods Vehicle or PSV test certificate to tax a heavy goods vehicle (HGV) or passenger service vehicle (PSV). Start now Other ways to apply Before you start

You don’t have to use all the different divisions – you can pick the division which is appropriate in each context. Home Driving and transport Tax discs, car tax and SORN Car tax: get a tax disc for your vehicle Make a SORN (Statutory Off Road Notification) Calculate vehicle tax rates Apply for a duplicate tax disc Apply for an HGV vehicle licence (tax disc) - form V85 More Tax discs, car tax and SORN Getting an MOT More Driving and transport Search Buy or renew your tax disc (vehicle licence) online - get tax for your car, motorbike, lorry, bus or other vehicle that needs a tax disc. on the DVLA website You can pay for your tax disc online if all of the following apply: you’re the vehicle’s registered keeper DVLA already has your correct name, address and vehicle details you have your reminder letter (V11 or V85/1) or registration certificate (V5C) your vehicle is insured your vehicle has an MOT if it needs one Start now Other ways to apply Before you start

Home Business and self-employed Running a limited company Running a limited company 1. Directors' responsibilities 2. Taking money out of a limited company 3. Company changes you must report 4. Company and accounting records 5. Company annual return 6. Signs, stationery and promotional material This page replaces Accounts and tax returns for private limited companies File an annual return with Companies House File your company accounts and tax return Register a private limited company online Business support helplines More Running a limited company Complain about a limited company Elsewhere on GOV.UK Search As a director of a limited company, the law says you must: try to make the company a success, using your skills, experience and judgment follow the company’s rules, shown in its articles of association make decisions for the benefit of the company, not yourself tell other shareholders if you might personally benefit from a transaction the company makes keep company records and report changes to Companies House and HM Revenue & Customs make sure the company’s accounts are a ‘true and fair view’ of the business’ finances register for Self Assessment and send a personal Self Assessment 1. Directors' responsibilities

We’ve moved the parts of the guide inline to give a consistent reading line in the main content area. The grid gives consistency across layouts. Home Business and self-employed Running a limited company Running a limited company 1. Directors' responsibilities 2. Taking money out of a limited company 3. Company changes you must report 4. Company and accounting records 5. Company annual return 6. Signs, stationery and promotional material This page replaces Accounts and tax returns for private limited companies File an annual return with Companies House File your company accounts and tax return Register a private limited company online Business support helplines More Running a limited company Complain about a limited company Elsewhere on GOV.UK Search As a director of a limited company, the law says you must: try to make the company a success, using your skills, experience and judgment follow the company’s rules, shown in its articles of association make decisions for the benefit of the company, not yourself tell other shareholders if you might personally benefit from a transaction the company makes keep company records and report changes to Companies House and HM Revenue & Customs 1. Directors' responsibilities

The 4+3 grid really comes into its own with richer, more complex layouts. Departments Topics Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements Find tools and guidance for business Find guidance on jobs and pensions Learn about export control Find business finance and grants 7 December 2013 — Press release Government sets out new support on Small Business Saturday Enterprise Minister Matthew Hancock sets out the government’s offer to make it easier for small businesses to grow and create jobs. Department for Business Innovation & Skills Search

Here we’re using the 3-column divisions. Departments Topics Worldwide How government works Get involved Policies Publications Consultations Statistics Announcements Find tools and guidance for business Find guidance on jobs and pensions Learn about export control Find business finance and grants 7 December 2013 — Press release Government sets out new support on Small Business Saturday Enterprise Minister Matthew Hancock sets out the government’s offer to make it easier for small businesses to grow and create jobs. Department for Business Innovation & Skills Search

Here we’re using the 4-column divisions, combined to make 2 columns. 13 December 2013 Press release 13 December 2013 Press release Our announcements Crispin Simon to take over as Acting Chief Executive of UKTI £15 million boost for local business growth at universities See all our announcements 13 December 2013 Closed consultation 10 December 2013 Consultation outcome Our consultations Pub companies and tenants consultation A new approach to financial regulation: transferring consumer credit regulation to the Financial Conduct Authority See all our consultations 13 December 2013 Research and analysis 13 December 2013 Policy paper Our publications Apprenticeship grant for employers: evaluation UK NCP initial assessment: complaint against the KPO Consortium in Kazakhstan See all our publications 12 December 2013 Statistics 4 December 2013 Statistics Our statistics Further education for benefit claimants: December 2013 Building materials and components statistics: Novermber 2013 See all our statistics Documents Our ministers

And here we’re using all the 4-column divisions. Our ministers Our management The Rt Hon Dr Vince Cable MP Secretary of State for Business, Innovation and Skills and President of the Board of Trade The Rt Hon David Willetts MP Minister of State for Universities and Science The Rt Hon Michael Fallon MP Minister of State for Business and Energy Lord Livingston of Parkhead Minister of State for Trade and Investment Unpaid Matthew Hancock MP Minister of State for Skills and Enterprise Jo Swinson MP Parliamentary Under Secretary of State for Employment Relations and Consumer Affairs Viscount Younger of Leckie Parliamentary Under Secretary of State for Intellectual Property Amanda Rowlatt CBE Nick Baird Bernadette Kelly

Thanks!

@HenryHadlow manofscience.co.uk