A Look Into: Better Typography For Modern Websites

Digital text can be formatted in so many flavors. With the further advancement of web fonts and browser scripts, we have seen new project code for developers to utilize. Web designers, too, are looking for the best strategy to code their websites and build a uniform typographic style between all of their pages.
Plenty of professional web designers have written on the topic including updated features and services. You have to consider each web page as a singular document breaking off your root layout design. Under this view it’s easy to see how typography can flow from page-to-page and offer a unique outlet for creativity. And this becomes especially apparent building unique classes for your paragraphs and headings.

Below I’ll be going into some fantastic ideas for aspiring typography designers interested in building for the web. Blogs, social networks, and businesses are always looking to update their current website. And CSS styles for web typography provide an excellent source to begin refreshing your pages.

Differences in Today’s Internet

The modern web has advanced dramatically since early 2000. There are loads of new features for web designers to create fantastic works of graphic design, logos, banners, and practically anything else. The release of HTML5 and CSS3 specifications have also taken their toll on the old way of building web fonts.
It is now entirely possible to include your own fonts with the CSS @font-face property. You can use any TrueType(.ttf) or OpenType(.otf) file and store a copy locally on your server. Then with some CSS3 magic include the family anywhere on your webpage!

Under this technique alone it’s possible to see how developed our modern Internet has become.
And with jQuery growing in popularity every day it’s no surprise we can build astounding animation effects coupled with custom fonts. As an alternative to the method above the TTFGen plugin for jQuery lets you include any TrueType font onto your webpage.

This method is a bit more reliable since you don’t need a modern browser supporting CSS3 standards to make it work. But of course legacy browsers such as Internet Explorer 6 will struggle to render properly.
But thank goodness most users have switched over to newer browsing software that do support these standards! And when you’re developing for the web you should consider exactly who your market is for. You can’t please everybody all the time, but you can sure try to get close enough.

The Purpose of Digital Typography

Sort of a strange idea to consider, but what is the real purpose of digital text? To convey information, share sources, and offer your opinion to the world of Internet users. Text is the most simplistic form of media for sharing thoughts and ideas. But it’s also very complex and contains major details that photos/videos just can’t use.
Your visitors are likely to find your website based on keywords in your text or headings – just another reason to pay careful attention to your web copy. And once you’ve gained some attention to your website you need to hold onto their concentration. This is most easily done with bold headings and even-spaced page text.

If you’re writing an article or tutorial then you need to use clear language. It’s equally as important how your page text looks and the quality of your content. The larger your text appears the easier it’ll be to read and scan for keywords. And since paragraphs will contain the majority of your content, you should spend a lot of time prototyping for the right fit. Paragraphs are used to convey your message in bit-sized chunks broken down into sentences. Understand how you write and plan ahead to get a fitting page layout.
Additionally with your page text comes media and secondary content. If your paragraphs contain primary information, maybe you have graphs or imagery to spice up the page. These accents are just the right touch keeping users moving through your site.

Videos and images are able to break up your content and make it seem like readers are moving faster through your article. But use these items sparingly and don’t let anything overwhelm your core message. Users are (mostly) coming to your site for information and don’t want too many distractions.
All of the other formatting options are used to specify functionality or purpose. For example, hyperlink text is often a different color from the rest to stand out as “clickable”. You may work with bold or italicised words adding emphasis into your sentences. And the use of blockquotes or preformatted text can help to delineate fundamental statements or web code, respectively.

Webpage Headers

One of the most important assets to your web typography are heading tags. If you’re unfamiliar with HTML headings range from <h1> to <h6> with the former holding the most importance and latter the least. This markup is useful to understand since Google also ranks your domain and web pages based on content structure. Thus you ultimately have control over which keywords you use and what tier of headings you would require.

Even though the standard HTML5 specification includes up to 6 different heading styles, I would recommend using between 3-4. It’s not necessary to include them all in your pages. And it’s also highly unlikely you’ll find a use for 6 different headings. When first sitting down to build your styles try drafting a few examples for headings to see what you like.
Photoshop is excellent for this scenario. You could also try coding out different headings in HTML to see how they look in browser. What’s important is to work with your page flow and design headings according to their rank.
For example, your <h1> tags should standout the most among all your page headings. <h1> and <h2> are the most popular tags and recommended by Google for crawling page content. Using design effects such as bold font, underlines, dashed borders, or different colors will help your titles jump off the page.

Spacing is also important when it comes to headings, or any piece of your content for that matter. Make sure you add additional margins between your headings and main content area. If you’ve made your font large enough, each heading should stand out as it’s own core block. This look is ideal if you want to grab your readers’ attention with a clear message.

Building Unique Hyperlinks

There is plenty to say on the topic of page links. One way or another you’ll have to use hyperlinks in your code. They are extremely important as the main navigation interface between different pages on your site. You may also link to other blogs or even your archived blog posts for reference at a later date.
You should pick the holding text for your link very carefully. This is the specific content which will be accented by a link style. For example "click here" is very popular and used for direct downloads most of the time. Try to avoid this systematic approach and instead get a bit creative with your hyperlink text. Your visitors are much more likely to click a link if they can also recognize context and maybe figure out what the new page will contain.
When going to style your links you should consider the following – how changes would look in your page setup, what type of background color are you working on, and what color is the text for contrast?

Links should appear blatantly off the page as click-able items – after all, that is their function. This is why the old blue with underline text effect works so well. But if you find that an alternate color works better you should try it out. There is no one-size-fits-all solution for link designs. Just browse around the web a bit and you’ll surely put together something outstanding.

One point of interest is a few features you should try avoiding. Things such as changing the text font family or font size can be very annoying. This will cause the text to distort and move, which may place the mouse cursor just out of the link zone. In a similar manner you should avoid adding extra margins/padding to your links or hover effects. These work much better when you stay simple. A color change or added underline goes a long way in user experience.

Construction of Styled Lists

Chances are good you’ll have to also work with lists at some point. Included is both ordered and unordered lists in HTML. These are perfect for offering a small collection of ideas, products, people, or links online in a very small amount of space. Styling isn’t all that different than paragraphs or headings, either.
Your visitors should understand immediately that they are looking at a list of items. Keep each list item separate and located on a new line in your page. Add some extra space between them, if possible. This will give some breathing room and appear as a nice breakup for article text. If you’d like you can even bold the font or indent lists a bit to stand away from the standard layout margins.

Adding additional features to help your list stand out isn’t a requirement. But if you enjoy the block-layout style it really holds focus on your lists. You could try adding a light background or icons. A List Apart has a great writeup on taming lists which I think includes some very powerful tidbits of knowledge. But if you’re keeping page content linear and using list blocks only when needed, you shouldn’t run into any design setbacks.

How to Create In-Page Quotes

The appearance of quotations and citations are very limited these days. In the early web you wouldn’t see very much of these elements in use. Perhaps in editorials, essays, or educational papers. But HTML5 has certainly updated the rules a bit which makes citing blockquotes a whole lot easier.

The HTML5 Doctor website includes a fascinating resource for discussing this exact topic. They discuss the use of content inside blockquotes as appearing internal to the document structure. So you can include headings, paragraphs, and even lists and footers, too. The main use of a <footer> tag would be to seclude your sources or citation. The new HTML5 blockquote element includes an attribute cite. You could add a website address into this value citing where you found an original quote working within web semantics.
To design your standard blockquote element doesn’t take too much creativity. Forum software has often used a great system for quotes with an embossed background and indented division. You’ll also often see quotation marks used as a light background image to spice up the block element.

Quotes are frequently used in web pages to pull out content even from the current article and have it stand out among the rest of your text. Use this effect to repeat important information and drill it into your reader’s subconscious.

Using Custom Webfonts

It’s possible through today’s technology to work with fonts not installed on your visitor’s machine. You can include a few lines of script to update your website working with almost any type of font you wish. There are a few services online which let you do this. The most popular is easily Google Web Fonts which you gain access to under a free Google Account.
As an alternative typekit is a fantastic competitor which does offer a free plan. Your page should be pulling under 25k pageviews monthly and will only have access to their trial library of fonts. The highest member access is full library which would cost $49/year on unlimited websites.
I’ll be walking you through a quick setup of both starting first with Typekit.

Typekit

To get started first register your free account. If you’re sure you want to spend money feel free to register under another plan, however for this demonstration a free account is more than enough. After a few pages you’ll be directed to enter your site name and URL.
If you’d like to go live with your script then enter your root domain URL with no http://. You can also offer localhost if you’ll be testing on your machine.

Once that’s all set you’ll be redirected to a page where you can grab the web code. Only 2 lines of JavaScript are required into your page header. When this is all set hit their fonts page and start choosing your library. When you click on a font a new window will appear. From here it’s possible to play around and include additional options for your new font family. This includes options such as bold, oblique, light, and many others.
For your CSS styles Typekit will automatically create a selector. By default this is a class type which includes the font name prefixed with “tk-”. So for example using Sovba I would simply include the class tk-sovba onto any page content. You’re also allowed to add new selectors specific to your page stylesheet.
All you have to do now is include this class somewhere into your page. Refresh and make sure you’ve cleared your cache if nothing appears right away. It can take up to 5-10 minutes for their servers to update your list as well. For all WordPress users they offer a free typekit plugin which makes including your fonts a lot easier.

Google Web Fonts

Web Fonts is another great service provided by Internet search giant Google. They offer a huge collection of fonts online absolutely free. But notice their service behaves slightly different than TypeKit, and actually works a little easier.
You are initially greeted with a wall of text and many different font families. You should choose the fonts you wish to include in your website at first and add them into a single collection. Be conservative with your choices since it does take a lot of bandwidth and loading time to include each resource from Google’s servers.

Try to limit yourself to using 1-3 fonts at most, 5 maximum. Once you’ve chosen your fonts Google will offer you 3 different embedding styles:

• Classic CSS,
• @import CSS, and
• JavaScript include

The @import works great directly inside your main stylesheet. This will clear up a lot of room in your header as well, most notably since Google’s include statement would be moved elsewhere. I wouldn’t recommend the JavaScript code since it’s very lengthy and a lot slower than either CSS style. But notice how Google does not create default selectors and classes for you.
Instead you’re given the fonts as possible properties for your font-family attributes. Most of the time you can include your font as-is with regular single quotation marks.
As an example including the font family Varela Round would work as such: font-family: 'Valera Round', Helvetica, Arial, sans-serif;
This is one particular reason I enjoy Google’s service over Typekit. Not to say that Typekit is lacking in options or usability tactics. But Google has the power to offer many more type faces and you can choose which classes/IDs will get to display them. As a web developer you are given more creativity and fluid motion to build as you see fit.

Conclusion+Resources

Out of the many topics we’ve covered here I hope there are a few to spark your interest. Webpage typography is an extremely important part to any user experience. The Internet is a growing platform for building powerful web applications and communicating with anybody worldwide. These resources are not only free, but have vast support groups by techies everywhere.
If you’re looking for more in-depth content to cover I’ve shared a few of my favorite links below. These include tutorials and some fantastic articles showcasing interface design related to typography. And designing for the web creates a whole new atmosphere to engulf your users in a rich and creative layout.