Twenty Fourteen

twentyfourteen-home

The default theme for 2014 is a magazine theme with a sleek, modern, and beautifully crafted responsive design. Twenty Fourteen is a great fit for content-rich sites. It allows you to highlight specific articles on the home page, and to balance readability with a powerful use of photography — all in a layout that works on any device.

Featured Content and Featured Images

The home page features your choice of up to six posts that are prominently displayed in a grid or a slider, and controlled by the “featured” post tag. You can change the tag and the layout in Appearance → Customize. Use this “Featured Content” area to make sure your best articles get noticed.

featured-content-customizer

This theme rewards the use of Featured Images for posts. Displayed with great visibility in both the Featured Content area and above post and pages titles in the normal layout, the images quickly grab readers’ attention.

Widgets

The theme offers three widget-ready areas for your further customization: a footer area and two sidebars. The primary sidebar is on the left, with an optional “content” sidebar to the right of the article. Twenty Fourteen also comes with a unique Ephemera widget to show off your latest videos, music, links, and more.

Page Templates

Tailor content pages to your needs with two special page templates: a full-width page to remove the right sidebar, and a Contributor page to spotlight the blog’s authors.

Design Details

Readability is a key element in Twenty Fourteen, with a balanced combination of line height and line length, optimized for 55-75 characters per line. The font, Lato, is a beautiful typeface and a perfect fit for a magazine theme: it looks great in larger sizes, such as post or page titles, yet remains neutral when used in body text.

mobile-view

Twenty Fourteen’s header area is fixed to the top of the page, meaning that even when scrolling far down a page you can access the menu directly without needing to scroll all the way back up.

Pull quotes can be enhanced on wider screens by simply adding a class of alignleft or alignright to a blockquote element, and the quote will float into the margin accordingly. It’s a subtle visual treatment, yet it makes posts look more dynamic, and helps draw attention to your key points. See an example of pull quotes in action.

As a responsive, design-agnostic theme, it can be viewed on devices of all sizes, from smartphones and tablets up to the latest and greatest HiDPI screens. Your site will look beautiful, readable, and usable no matter how your readers visit it.

Customize

You can set up menus in two locations: a primary navigation menu in the header, and a secondary menu in the left sidebar. While the theme looks great out of the box, you can also add a header image and a background image/color if you wish. Note: the background image/color may only show on very wide screens.

Quick Specs (all measurements in pixels)

  1. The main column width is 474.
  2. Featured images work best with images that are least 1038 wide.
  3. The primary sidebar (left) width is 162.
  4. The secondary “content” sidebar (right) width is 306.
  5. Widgets in the footer widget area are 255 wide.
  6. The header image size is 1260 wide and 240 high.
  7. Single image pages are full-width and 810 wide.