Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Typography

Henry Hadlow
December 13, 2013

 Typography

Basic typography for internet people – a talk I gave at Untangle the Web. www.meetup.com/Untangling-the-Web-London/

Henry Hadlow

December 13, 2013
Tweet

More Decks by Henry Hadlow

Other Decks in Design

Transcript

  1. 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

    View full-size slide

  2. 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

    View full-size slide

  3. 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.

    View full-size slide

  4. 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.

    View full-size slide

  5. 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.

    View full-size slide

  6. 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

    View full-size slide

  7. 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?

    View full-size slide

  8. 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

    View full-size slide

  9. 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.

    View full-size slide

  10. 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

    View full-size slide

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

    View full-size slide

  12. 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.

    View full-size slide

  13. 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.

    View full-size slide

  14. 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.

    View full-size slide

  15. 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

    View full-size slide

  16. 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

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  19. 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

    View full-size slide

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

    View full-size slide

  21. 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.

    View full-size slide

  22. “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.

    View full-size slide

  23. 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.”

    View full-size slide

  24. 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

    View full-size slide

  25. 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.

    View full-size slide

  26. 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

    View full-size slide

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

    View full-size slide

  28. 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.

    View full-size slide

  29. 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

    View full-size slide

  30. 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.

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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?

    View full-size slide

  35. 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

    View full-size slide

  36. 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.

    View full-size slide

  37. 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.

    View full-size slide

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

    View full-size slide

  39. 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

    View full-size slide

  40. 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.

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. 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

    View full-size slide

  46. 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

    View full-size slide

  47. 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

    View full-size slide

  48. 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

    View full-size slide

  49. @HenryHadlow
    manofscience.co.uk

    View full-size slide