Web Design WorkFlows | Part Two


Web Typography

ArticleDesign2

Communication is emotional, words written by authors such as Fear and Loathing, To Be Or Not To Be, and The Horror have moved people to tears. Language has the ability to sparked movements while at times changing the course of nations. How words are presented visually affects how readers perceive them. Matching the right font with the right message is the role of the web designer. When conveying a serious message, for example, a designer should obviously avoid using an informal font like “Comic Sans”. Text is used throughout a web page for different purposes: headings, subheadings, navigation menu labels, main content, figure captions, small print in the footer and so on. CSS ( Cascading Style Sheets ) allows web designers to make compelling web type  for all these purposes.

( Also From Art Journal: Web Design Workflows-Part one )

“The difference between the almost-right word

and the right word is the difference between the

lightning bug and the lightning”

–Mark Twain

In part two of our web design workflow series, we explore  best practices for implementing web typography in your web layouts. Covering the basics (101) font stack of choice,   including how to use Google Web Fonts and Font Awesome as part of your development workflow. For WordPress users, a handful of useful plug-ins on how to use these amazing web services will also be provided.

Working With Web Type: 101

ArticleDesign1

Superior typography on the web is one of the main benefits of using CSS. A good idea for any web project is to explore type options for paragraphs, block-quotes, headings, footer and copy sections. To specify the font in a certain element, use the Font Family property as a basic guiding principle.

 

h1 {

font-family: Verdana, Arial, sans-serif;

}

p {

font-family: Georgia, "Times New Roman",

serif;

}

You’ll note that we can specify more than one font family here. How does the browser know which font to display? Macs, Win and Linux OS come installed with different fonts. A font that’s on a system you develop a site on and readily see in your web pages might not be installed on a site visitors computer. We will discuss alternatives for bypassing this problem with the use of services such as Font Awesome later on. As the CSS code (above) indicates, we create a list of similar fonts for a property. If the font is  not installed in the user’s operating system, then the browser moves on down the line until if finds a font that is.

( New To Web Design: Visit Code Academy Today )

Thats the reason we create a list of similar fonts for property in our CSS example. If the first font is installed in the users OS, then that font is used. If the first font is not installed, then the browser moves on down the line until it finds a font that is installed. The last font listed in our CSS example is a generic font family. The <p></p> tag is set to use serif fonts while the generic font type is serif, which displays the system’s default serif font. It’s advisable to include a generic font family like serif at the end of the value list just in case the user does not have one of the specific fonts in your style rule.

Never Count On Users’s Fonts:

While certain standard fonts are installed on Winm OSX, and linux

users have the option of uninstalling these, so you can never be

sure which fonts any particular user has installed

Specifying a generic font family ensures that your site will display in a font that is at least similar to the font you really want to use in your design. There are five different generic font family types:

  • Serif Fonts
  • Sans  Serif Fonts
  • Cursive Fonts
  • Fantasy Fonts
  • Monospace Fonts

Size Property And  Values

Web designers can use an array of available font measurements to determine web font sizes and properties. Our example uses a font measurement unit called an “em” 1 em is the width of an upper case “M” in any given size. For screen typography, its a base measure that maps to a browser default font size.

h1 { font-family: Verdana, Arial, sans-serif; font-size: 1.8em;

}

p { font-family: Georgia, "Times New Roman" ,

serif;

font-size: .9em;

}

Various units of measurement are available to set the size of your typeface. You can set the size using absolute units, which represent a static height. These include:

  • cm ( centimeters )
  • mm (millimeters )
  • in ( inches )
  • pt ( points- 1/72nd of an inch )
  • px ( pixels/96th of an inch traditionally, but technically varies depending on the device and distance to the user)
  • pc (picas-12 points )

Weights, Styles, Variants and Decorations

Beyond the basic “font-family” properties  we have been discussing hitherto, there are far more style choices you can implement in your web layouts. Weights, styles, variants and decorations can each be modified to give you more precision. There are three possible values: normal, oblique and italic. Oblique fonts are the normal font, but tilted a bit forward. Italic fonts are also tilted, but they are actually a separate typeface.

( Also From Art Journal: DIY WordPress Series )

Understanding HTML5 em and strong which are tags used in your doc structure. Which may seem to perform the same task as the font-weight and font-style tags within CSS is a clear distinction to grasp if you’re new to web design. The em element indicates emphasized text, the browser will rendered em as italic text. The strong element indicates more strongly emphasized text, and by default it is rendered as bold text. However, unlike CSS properties, these HTML elements are not really meant to control the presentation of the text. Rather, understanding a basic guiding principle between content and design is a critical benchmark behind rendering good typography on the web.

These basic guiding principles are meant to be seen as guidelines for those of you wishing to use web fonts as an expressive tool of communication. My basic approach as a professional web designer is to treat typography as a fundamental component of any project content strategy. While maintaining five integral areas to weight and consider when developing healthy feedback within your organizations daily workflow:

  1. Brainstorm
  2. Design
  3. Test
  4. Publish
  5. Iterate

p {
/* the font-weight property controls the weight (or thickness) of a font */
/* possible values include lighter (than the parent) normal, bold, bolder, 100(thin), 200, 300, 400(normal) 500, 600, 700, (bold) 800, 900 (black) */
font-weight: bold;
}

p {
font-style: oblique;
}

em {
font-style: normal;
color: red;
}

/*then, you separate your style (CSS) from your structure (HTML) as follows: */


 

<h1> separate your HTML Doc from your stylesheet CSS</h1>

<p>I was <em> very, happy</em> to hear she said yes, when I asked her out</p>

(Scroll sideways to see the entire example)

With Text-Decoration you can add various effects to text by using the text-decoration property:


p {
text-decoration:line-through;
}

del {
text-decoration: line-through;

Line through is of course a classic style to use for the omnipresent online price discount or an emphasis in your type content. It’s also perfect for showing text that has been changed or fixed so the viewer can see the old version. Couple the CSS value with del element for a complete attention grabber.

Letter Spacing And Height

In print design, there are two ways to adjust text spacing: tracking alters the spacing between letters, while leading changes the spacing between lines within the gutters of a layout. Using CSS you can adjust the horizontal spacing between the letters using the letter-spacing property.


h1{
letter-spacing: .1em</pre>
<pre>

You can easily assign a negative length ( such as -.2em ) to squeeze the letters more tightly together. Use a positive number to spread them farther apart. This level of control is particularly helpful to headings tags.

( Also From Art Journal: L.O.P Design Study )

Practicing Web Safe Typography

WebFontChart

Google Fonts

The ability to send content through the web from a server in able to leverage assets on the user’s computer is genius and innovative. Google Web Fonts is a service from Google, which allows the web designer the ability to perform two things. To creatively choose from a large catalog of available web fonts. While making page uploads extremely fast as you simply declare each font stack along your CSS and doctype head element.

We can declare Google Fonts as a starting point, making sure the content and the typography matches the aim of the projects’ call to action UX strategy. Start by declaring your fonts in the head of your documents using the <link href> tag within the head element. Then in your stylesheet, indicate which tags (h1, p, block-quote and so on) will receive  the desired styling.

GoogleFonts


 

GoogleFontsConfig3


 


GoogleFontsConfig2

Google Web Fonts: Quick Guide 101


 

GoogleFontsConfig1

With all the options presented when using the Google Web Font API, a best practice scenario should be to also include a fallback typeface. Your strategy as a web designer should be to select a font name that ideally would be installed on the user’s computer. Arial, sans-serif is a good fall back font to use in such instances.


{
font-family: h1, h2, "roboto", sans-serif;
font-family: "FF- Meta Web Pro" Arial, sans-serif;

font-family: "Arial" sans-serif;

}

Font Names With Spaces:

When there is a space in a font-family name, place quotation marks around the name. This lets the browser know that space is intentional and part of the font name.  Furthermore, if you think Tahoma, Verdana, and Arial are the same typeface, the font stacking probably isn’t for you. As web designers, I love implementing creative typography of the web using subtle nuances combined with great UX design.

To learn more about how to implement the Google Web Font API on your projects:

Font Awesome

FontA_overview

Good web typography goes beyond the heading, paragraphs and body text tags. In the old days, the only way designers could efficiently use vectors on a web page was to do so using vector.png files, and with CSS indicate the graphics placement within the DOM (document object model). These days, the last thing we want is to include png’s assets which will cause page load issues. A good call to action is to reduce the amount of img assets on our web templates.

“Font Awesome gives you scalable vector icons that can instantly  be customized

— size, color, drop shadow,

and anything that can be done with the power of CSS”

Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap3. Bootstrap is a front end web design framework for building scalable modern web sites that are responsive and mobile first out of the box.

Installing Font Awesome

Installing Font Awsome

Installing Font Awsome


 

FontA_overview2

CSS allows for embedding these font stacks into your stylesheets. This embedding process allows web designers to bring in fonts that are not installed on a site visitor computer and have them render properly on screen.

( Desktop, Mobile,  Smart Watchers, Tablet and Screen Readers )

Another technique when incorporating an external font file is to use the @font-face property and set the value of the font name of the typeface:


@font-face {

font-family: 'League Gothic Regular' ;

}

/*Then set the font-weight and style values: */

@font-face {

font-family: 'League Gothic Regular' ;

font-weight: normal;

font-style: normal;

}

/* Then reference the font file */

@font-face {

font-family: 'League Gothic Regular' ;

src: url('/fonts/League_Gothic-webfont.eot?#iefix')

font-weight: normal;

font-style: normal;

}

Only IE browsers understand Embedded Open Type (EOT) files, which they have been doing since IE4. In able to achieve embedded fonts files for other browsers, we need to apply a font file it can recognize. The font-face rule should reference file types for the same font.

Web Fonts & WordPress

Hitherto,  we have been discussing manual control behind implementing web fonts in your projects. Either by using fallback fonts users will have access or embedding Google Fonts in your stylesheets. When creating web projects with WordPress,  there are several plug-ins we can use to leverage creative typography.

( Also From Art Journal: First Steps With WP )

Google Web Fonts

Google Web Fonts WP Plug-In

Google Web Fonts WP Plug-In

Google’s free font directory is one of the most exciting developments in web typography in a very long time. The amazing rise of this new font resource has made this plugin the most popular font plugin on WordPress and it shows no signs of stopping.

The WP Google Font plugin makes it even easier to use Google’s free service to add high quality fonts to your WordPress powered site. Not only does this plugin add the necessary Google code, but it also gives you the ability to assign the Google fonts to specific CSS elements of your website from within the WordPress admin. Or if you would rather, you can target the Google fonts from your own theme’s stylesheet.

Better Font Awesome

FontAwsome

Better Font Awesome Plug-In

Better Font Awesome allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.

 

Features

Always up-to-date – automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.

Page Builder | Drag & Drop UX

The page builder plug-in is not a typography specific plug-in. Rather, Page Builder by SiteOrigin is the most popular page creation plugin for WordPress. It makes it easy to create responsive column based content, using the widgets you know and love. Your content will accurately adapt to all mobile devices, ensuring your site is mobile-ready.  The plugin does allow for unique typeface integration of both Google web fonts and Font Awesome using several widgets which are theme agnostic.

 

Next Steps

 

Categories: Design, Design Workflows, Digital Design, DIY Web Design, DIY Wordpress, Essay Non-Fiction, Technology, WordPressTags: , , , , , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: