How a Style Guide Impacts Your WordPress Website

Having a style guide provides several benefits to businesses and other organizations. It helps maintain credibility by establishing clear standards for design elements, such as colors, fonts, and formatting.

Additionally, a style guide streamlines the content creation process, saving time and effort by providing designers with a reference point for creating cohesive and polished materials, such as sales collateral and your WordPress website. Overall, a well-implemented style guide enhances brand recognition, strengthens marketing efforts, and reinforces a cohesive brand identity.

Consistency in Branding and Messaging

A style guide ensures that all branded materials, whether digital or analog, maintain a consistent look, style, and visual identity. This consistency helps reinforce brand recognition and trust among the target audience by presenting a cohesive and unified brand image across various platforms and touchpoints.

Streamlined Content Creation Process

A style guide facilitates content creation by providing clear formatting and design elements guidelines. Content creators can refer to the style guide for direction, which helps save time and effort, ensuring that materials are produced efficiently and effectively.

Professional Standards

With a style guide in place, businesses can uphold a high standard of professionalism and credibility in their marketing efforts. Clear branding and design standards ensure that your WordPress website is polished and error-free, enhancing the overall quality and perception of the brand.

Enhanced Collaboration and Consensus

A style guide serves as a reference point for all stakeholders involved in creating and approving your WordPress website. A common set of standards and guidelines promotes collaboration and consensus among team members, ensuring everyone is aligned on the brand’s messaging and visual identity.

This is especially important when enlisting the help of a WordPress agency. As WebDevStudios COO Lisa Sabin-Wilson recently stated in our monthly newsletter:

Without a style guide, developers can end up playing a game of ‘Guess What the Client Wants.’ And trust me, that game never ends well.

Improved Brand Recognition

Consistent use of branding elements, such as logos, colors, and typography, as outlined in the style guide, helps strengthen brand recognition. When consumers encounter materials that consistently reflect the brand’s identity, they are more likely to remember and engage with it, ultimately contributing to its overall success and growth.

What a Style Guide Is Not

Now that you understand the importance of having a style guide for your WordPress website and your marketing strategy let’s go over what a style guide is not. You might be under the impression the following pieces qualify as a style guide, but they do not. Whether working with your internal team or an outside WordPress development vendor, the following items do not constitute a style guide and will not be helpful:

• Verbal Descriptions: While helpful for conveying ideas, verbal descriptions can be subjective and open to interpretation, leading to inconsistencies in style.
• Mockups: Mockups are visualizations of a design concept, not a set of rules for applying styles across different elements.
• Previous Design Samples: Previous design samples might not be relevant to the current project’s specific goals or target audience.
• Mood Boards: Mood boards establish a general aesthetic direction but lack the specifics needed to ensure consistent stylistic choices throughout a marketing project and your WordPress website.
• Someone Else’s Designs: Your brand is distinctive, so your style guide should also be unique. Designs from another source might not align with your brand identity or resonate with your target audience. They also do not convey your specific standards and brand identity to your internal design team or WordPress agency partner.

Style Guide Checklist

A well-defined style guide is your secret weapon for marketing and WordPress website consistency. It empowers designers and developers with clear direction, saving time and getting everyone on the same page. This translates to high-quality, consistent marketing and content strategies that effectively deliver your brand’s message and values. Keep reading for the elements to include in your style guide.

Brand Identity

Nail down your mission, vision, values, and brand personality. Doing so helps guide every strategy and design choice you make.

Logo Usage

Provide guidelines for logo usage. Include size, spacing, placement, and acceptable variations. Specify when and how the logo should be used in different contexts, such as digital display versus tangible sales collateral.

Color Palette

Establish your brand’s color palette. Define primary, secondary, and accent colors with hex or RGB codes for use across all digital and print materials. Consistency is crucial.

Typography

Define the primary and secondary typefaces for headings, body text, and other elements. Specify font sizes, line heights, and styles (e.g., bold, italic) for different contexts.

Imagery Guidelines

Outline guidelines for using photography, illustrations, icons, and other visual elements. Specify preferred styles, image sources, and any brand-specific imagery requirements.

UI/UX Design

Provide guidelines for user interface (UI) and user experience (UX) design, including layout principles, navigation patterns, and interactive elements. Specify design patterns, button styles, form fields, and other UI components.

Accessibility

Include guidelines for designing accessible content and interfaces, following web accessibility standards (e.g., WCAG). Provide recommendations for ensuring readability, usability, and inclusivity for all users.

Print and Digital Guidelines

Differentiate guidelines for print materials (e.g., letterheads, business cards, brochures) and digital assets (e.g., websites, social media graphics, email templates). Specify dimensions, file formats, and printing requirements.

Need a WordPress Website Now, But Don’t Have a Style Guide?

No style guide? No worries. At WebDevStudios, we build custom style guides for clients needing our help with WordPress design and development but who don’t have a style guide. Contact us, and let’s chat about your new style guide and website.

The post The Importance of Having a Style Guide for Your WordPress Website appeared first on WebDevStudios.

The design comps used a web-safe non-system font called Canaro, which we set as the default in our sans-serif font stack. The client provided a Chinese language font that was unfortunately not web-safe, so we set Hiragino Sans GB and Microsoft YaHei as the other two fonts in the stack.

Hiragino is a beautiful font and the latest version of OSX El Capitan does some pretty nifty stuff with it when you’re typing in Japanese (so I hear). However, we started to get bug reports that the Russian language site was looking a little odd in Safari on OS X.

At first, I thought it was an issue with the dynamic text resizing in El Capitan, since I hadn’t duplicated the issue in Yosemite. However, some major cache clearing ensued and I was finally able to duplicate it and quickly figured out (thanks to Google) that while Hiragino Sans includes Cyrillic characters, they are kerned at the width of the kanji blocks.

Kerning is the word for the space between letters. If you know anything about typography, you might say that kerning is the word for the relationship between letters (don’t even get me started on ligatures).

Changing the kerning via CSS wasn’t really an appropriate solution for this issue; it’s resource intensive and is better used sparingly on larger text like headlines.

Adding more fonts via @font-face wasn’t really ideal either, especially considering the difficulties we’d had with custom fonts in non-Latin alphabets not being web-safe.

So I changed the font stack.

.body {
     font-family: "Canaro", sans-serif;
}

.body.ru {
     font-family: Helvetica, Arial, sans-serif;
}

.body.cn {
     font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

Now we’re relying on system fonts for Russian and Chinese and the custom font for any language using a Latin character. In this instance we’re using WPML for internationalization, but the two other WordPress plugins I’ve used for this also set the country code as the body class, so it makes styling for specific languages easier.

That’s it! One weird edge case I may not encounter again, but it’s worth a mention if you’re developing sites with multilingual content that uses characters other than the Latin alphabet. Windows and OSX offer system fonts that display beautifully in any alphabet, but you may need to define different fonts based on the language being used.

The post Internationalization: Beautiful Typography in any Language appeared first on WebDevStudios.

Font Size

What device are you currently reading this article on, and how far away are you sitting? Most people sit between 18 and 24 inches from a desktop or laptop display, but hold a phone or tablet significantly closer. To make up for this distance, you can use larger type for larger displays and smaller type on mobile displays. However, the line length needs to be considered along with the type size and layout.

Line Length and Line Height

An often-overlooked element of typography on the web is line length. According Robert Bringhurst, in The Elements of Typographic Style, the optimal line length is between 45 and 75 characters, with 66 characters being the “ideal”. Setting the body text of a website in this range allows the user to read quicker and stay engaged longer.

Line height should go along with line length. As the screen becomes wider and the line becomes longer, the space between lines needs to increase so that the eye can quickly find the next line. Too much space between lines can look awkward on smaller screens. So whereas a line-height of around 1.5 may work well for desktop displays, a line-height of 1.2 may be better for mobile devices. However, there is no ideal line-height, so it may take some adjustments to find the best line height for the various screen sizes.

Web Fonts on Mobile

Should you include web fonts for narrow screens, or use them only on desktop displays? Web fonts by now are a standard practice for many reasons — consistency between browsers and OSes, better designed typefaces, and giving the site a unique look. But if you use more than one, they can quickly add on 300–400KB to a page’s size, increasing load time and bandwidth usage, which is especially important to consider for mobile devices.

One of the issues with using the system fonts on mobile devices is inconsistency. Android devices only come with 4 fonts, which are not included on iOS, Windows, or Mac devices. If we want to provide a consistent experience for our website across devices, we will have to include at least some web fonts.

How can this be done without adding on too much weight to a page? Reduce the number of fonts loaded on mobile. This is easily done with media queries and mobile-first practices. Even if a font is defined with @font-face, it will only be downloaded by the browser if it is used somewhere in the site’s CSS. A mobile browser will disregard any fonts mentioned within media queries that don’t apply to the device, so if you load the heaviest fonts inside of your min-width media queries, you can avoid downloading them on mobile devices.This way, you can create a subset of your web fonts to be loaded on a mobile device.

Here, I’m only downloading Open Sans at two font weights on mobile, and adding in a different typeface for desktop users. The user will see a bit more consistency because we’re at least using Open Sans for both mobile and desktop, but they can avoid downloading any extra fonts beyond that.

/* Declare the font-faces, but they won't necessarily be downloaded until they're used */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://fonts.gstatic.com/s/ptserif/v8/QABk9IxT-LFTJ_dQzv7xpJQV2lvL5Ba9FjAYK6Lx0Qk.woff2) format('woff2');
}


/* Mobile layout by default */
/* We'll only use one web font here */
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

/* Use the same font for headings on mobile */
h1 {
    font-weight: bold;
    font-size: 36px;
}

h2 {
    font-weight: bold;
    font-size: 24px
}

@media (min-width: 768px) {
    body {
        line-height: 1.5;
    }
    
    /* Now that we're at a larger screen size, we'll load the second font */
    /* The browser will only download PT Serif if the screen size is wider than 768px */
    h1, h2 {
        font-family: "PT Serif", serif;
    }
}

Read More:

“Fluid Type” by Trent Walton

“What Screens Want” by Frank Chimero

On Web Typography by Jason Santa Maria

The post Better Responsive Typography appeared first on WebDevStudios.