Simple to set up and super-customizable, Type & Grids is a responsive HTML5 template with nice typography.


Live site using Type & Grids

What is Type & Grids?

Type & Grids is a HTML5 template that focuses on typography and grids. It’s responsive which means it looks great on all devices from desktops to laptops to tablets and mobile phones. It’s super-customizable and comes with lots of nicely designed type and color themes. Download the free version to get started!

Customize the design with built-in themes

Type & Grids comes with 20 type themes and 29 color themes. You can easily mix and match the type and color themes to create a unique design for your site. No CSS knowledge is needed and all of the fonts shown in the demo are included. 58 background textures are included with the download as well.

Screenshots

Questions & answers

  1. What kind of skillset do I need to use Type & Grids? Do I need to know HTML and CSS?

    Basic HTML editing skills are helpful but not required. You shouldn’t need to write any code yourself – just edit and copy & paste the code that is already set up.

  2. Can I use an image for my logo?

    Yes. You can easily use your own image logo and can easily tweak its position as well. See the FAQ here.

  3. What software do I need to use Type & Grids?

    The only software you will need is a text editor and an image editing program (like Photoshop) to create JPGs of your work.

  4. How does purchasing work?

    Payment is made securely through PayPal or Google Wallet. Files are delivered instantly after payment. A third-party shopping cart service called E-junkie provides all of this functionality.

  5. Are the fonts included?

    Yes. All of the fonts shown in the demo are included. Please note that the fonts used on 2013.jeremiahshoaf.com are commercial fonts and are not included. If you would like to use those fonts on your site see the FAQ here.

  6. Is Type & Grids a WordPress theme?

    No. Type & Grids is a static HTML5 site that doesn’t require PHP or any server-side technology (unless you are an advanced user who wants to use the included PHP version).

  7. If there is an upgrade to a new version of Type & Grids do I need to repurchase?

    No. All Type & Grids customers are eligible for free product upgrades for life.

How it works

  1. Download and open the zip file.
  2. Edit the single “index.html” file to add your own content.
  3. Mix and match the included type and color CSS files to customize the design. All fonts shown in the demo are included.
  4. Upload your new website to your web host. Done!

Featured on

Creattica Webdesigner Depot FWA Shortlist

Pro version vs Free version

  • The Free version doesn’t include the custom-made, swipe-enabled image slider designed to work super-smoothly on touch devices
  • The Free version requires a “Powered by Type & Grids” link in the footer – the Pro version will look entirely like your own creation
  • The Pro version includes an additional PHP version for advanced users – it’s the same version that runs this website and is great for more complex sites with multiple pages

Features

  • Simple to set up and update – all of the content is inside a single “index.html” page
  • Contains 20 type themes and 29 color themes which gives you over 500 unique design combinations – 58 background textures are included as well
  • Each type theme is meticulously handcrafted to ensure attention is paid to the small typographic details
  • Fully responsive design – looks great on all devices from desktops to laptops to tablets and mobile phones
  • Swipe-enabled with hardware accelerated transitions – works super-smoothly on touch devices like the iPhone and iPad
  • Coded using the latest HTML5/CSS3 standards and all code is W3C valid and cross-browser compatible
  • Video support – easily embed your videos from Vimeo or YouTube
  • Clean and semantic SEO-friendly code
  • Works great for non-portfolio sites as well – the site you are viewing now is using Type & Grids
  • Free upgrades – I use Type & Grids for my own portfolio site so I’m always adding new features and fixes
  • Support and documentation is available but everything is so simple to set up you probably won’t need it

Buy a template, help the environment

10% of every sale is donated to the National Audubon Society. Audubon’s mission: To conserve and restore natural ecosystems, focusing on birds, other wildlife, and their habitats for the benefit of humanity and the earth’s biological diversity.

National Audubon Society

Sign up for email updates

Enter your email address below to receive the very occasional update about Type & Grids.

The philosophy behind Type & Grids

Typography and grids make up the foundations of graphic design. Nice typography adhering to a solid grid with whitespace and color is all that is needed for good design. With Type & Grids my goal is to distill these basic elements of design into a simple website framework that anyone can use. I aim to be the 37signals of templates. Other templates try to do everything but end up completely bloated with features and difficult to use. Type & Grids doesn’t try to do everything, but what it does, it does really well.