Showing posts with label typography. Show all posts
Showing posts with label typography. Show all posts

Sunday, May 03, 2015

More Control over Text Decoration

More Control over Text Decoration

Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You're probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; - which you can remove with text-decoration: none;.

Wednesday, March 18, 2015

6 advanced web typography tips

6 advanced web typography tips

Elliot Jay Stocks reveals how to take your web-based typography to the next level.

Typography on the web has made huge leaps forward in recent years, allowing web designers to realise their designs with an almost print-like level of control. However, the details surrounding that control can still be challenging, and bleeding-edge technology like OpenType support is still in flux.



In his talk at Generate London, Typekit's creative director and 8 Faces founder Stocks took attendees through some of the most exciting recent developments that allow us to take web-based typography to the next level. Here are six tips of Stock's tips for upping your type game on the web…

01. Use font-feature-settings

Ligatures are very widely supported – they're on by default in Firefox and are very easy to turn on. This is often how people turn on ligatures and a bunch of other Open Type features: text-rendering: optimizeLegibility;

However, use with caution. A far more powerful way of doing so is: font-feature-settings.

This allows you to be a little more granular; to go in and say: "I want to turn this specific Open Type feature on or off". Also, optimizeLegibility isn't standardised and is a little bit buggy so generally not recommended – especially for body text.

02. Consider the typeface

The typeface is the design – the thing that exists in the ether that was created by the designer. Does the actual design contain swashes? Ligatures?

If it's not in the actual design, it's never going to make it into the font file and will certainly never make it to your browser. At the base level: did the person who designed this typeface actually design your secondary A style set option? Possibly not.

03. Consider the font file

Is it actually an OpenType font file being served? You're never going to be able to turn on an OpenType setting if you're serving a TrueType font, so this is a really important thing to consider. Even if it is OpenType, are the actual glyphs that you need inside the font file? Possibly not.

04. Consider the browser

Some browsers support some features, some they don't, some it's different on different operating systems. No matter how robust your CSS is, if you're testing it in a browser that physically doesn't support that feature, you're not going to see it.

05. Consider the user

Will the design break if ligatures are missing? Probably not. But it quite possibly will if the swash characters are missing and you're actually representing the company logo in web type. Perhaps, in that circumstance, you need to find another way of doing it.

06. Be responsible

Responsive web design is where our heads are at – but it's also about responsible web design. All these cool new shiny features are great, but we need to be mindful of when we use them. Pick the right features you want for the right scenario. This is a really exciting time to be working not he web because we've essentially caught up with what you can do in print.

Words: Elliot Jay Stocks

Tuesday, February 24, 2015

Effective Web Typography: Rules, Techniques and Responsive Design

Effective Web Typography: Rules, Techniques and Responsive Design

Responsive Web Design isn't just about columns, grids, images and icons. All of this will not make sense without text for content. As Bill Gates once said "Content is King".

When it comes to content, we need to talk about web typography. Looking at modern web design trends, having responsive typography is a big factor every web designer and web developer shouldn't miss.

Here, we will discuss creating responsive web typography and factors you need to know about it.

Typography Basics

Good typography is all about selecting the right type for web or printed media. From font type, color of the text to the length and font-size on different viewports, good typography ensures that the final letter forms generate the highest quality end result.

Before we dive in to the process of creating successful responsive web typography, here are a few terms that you need to understand.

Typeface

Typeface

Also known as font family. This is a collection of design of characters with a complete set of letters, numbers, symbols, special characters and weight.

Font

Font

This is the actual computer file that contains information about the lettering used, such as typeface, weight, width, style and so on.

Baseline

Baseline

This is the line where the letters rest and where descenders extend.

Cap Height

Cap Height

This is the height of the capital letters above the baseline.

X-height

X-height

Also known as corpus size. This to the distance between the baseline and midline (half the distance from the baseline to cap height)

Descenders

Descenders

This is the part of a letter that extends below the baseline.

Tracking

Also known as letter spacing. This is the consistent increase or decrease of space between letters uniformly.

Kerning

The process of adjusting the space between individual characters in glyphs of varying widths.

Leading

Also known as line height in CSS. The distance between the baselines of successive lines or types.

Points to Consider on Web Typography

Words, phrases and sentences have meaning but each character can have emotion. Aside from being responsive, you must also consider presenting better web typography to your audience.

The complete design will not make sense if your audience will not understand or is not attracted to your content. In web typography there are four basic elements:

  • Type
  • Color
  • Texture
  • Image

All of these will have a big effect to your typography end-result but the type will magnify the expressiveness of your message.

There are five factors that can help you create presentable web typography.

1. Choose the best typeface that corresponds to your topic

Most sites nowadays are using the same typefaces. Yeah, you guessed it right; I am talking about Arial and Helvetica. However, it would make a lot of sense if you could align typefaces with your message.

For instance, your web pages talks about a children's book would it be good if you'll use something like DK Crayon Crumble or Little Miss Priss in your header text?

I am not suggesting you need to do this all of the time but the point is make sure that typography aligns with your target audience and the text is clear and readable.

2. Use web fonts

One of the greatest improvements of web design nowadays is the support for Web fonts on all modern browsers via @import command and standard link tag. Check out the demo below.

Using @import tag:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Using the standard link tag:


This means that you can use any font that is available on the hosted web font site such as Google Font, Typekit and Fontdeck. Here are the following the advantages of using web fonts:

  • It saves money. You don't need to purchase fonts online.
  • It saves time. While you can integrate fonts manually in your folders file, using web fonts can be done with a line of code.
  • They are compatible on all new versions of web browsers and are SEO-friendly.

3. Use proper color combinations

One of the major issues web designers commit nowadays is throwing unnecessary color combinations to their sites. Remember good web design can be identified by how well the site functions and how good the design is.

Speaking of design, you don't just design your web pages randomly and throw a lot of colors that doesn't mix especially with your text and background of your site. This will make your text unreadable and will bring pain to your visitor's eyes.

But how do you use proper color combinations? While there is no general rule, there are some guidelines.

  • Use proper contrast or distinction colors between text and the background as suggested by W3C. Colors that have the same value but different hue may be easily read with a person with a good vision but not on color blind person. It is important to check the contrast before applying it to your design. You can use this great tool to simulate contrast.
  • Use flat UI colors if possible. These colors are light and have great combinations that are not painful to the eyes. Check out flatuicolors.com for more information, based on Flat UI.

4. Use text instead of images

As we all know images make web pages slower. Most often images are the only way to force the web browser to display a preferred font and the exact layout you want. However this might not work. Using real text is the best way to go especially with responsive web design. Remember, search engines can't read images but they can read text.

5. Use fallback text style when clipping text

There might be a time wherein you need to clip text on images to create a textured or image text. The problem here is that not all browsers support this technique.

The best way to do this is using Paul Irish's CSS Browser Selector plugin. This is a lightweight plugin that detect the browser and manipulates the styles you want to appear on specific browsers. Here's how to use this cool plugin.

  • Download the plugin here and then link it to your head section:

  • Set CSS attributes (either id or class) with the code of each browser you want to change specifically on your stylesheet.

    .opera #header { margin: 20px; }
    .webkit #header { margin: 30px;  }
    .ie #header{ margin: 10px; }
    .ff3 #header {margin: 15px; }

For more information about this cool plugin check out this site.

Responsive Typography Ground Rules

Most of the fundamental typographic elements can be manipulated with CSS. However, it actually more than just adapting or optimizing the size of the text on each viewport. Now that we've discussed how you can achieve presentable web typography, it's now time to talk about the basic ground rules that we can apply to achieve better responsive typography.

1. Use rem instead of pixels and ems

The use of both pixels and ems is popular. While pixels are fixed, ems are relative units to the parent element. This means when you resize the browser it's hard to figure it out the size you need to set to achieve the output you want to attain.

A better option is using rems. Rems or also known as "root em" are always equal to the font size of the root HTML element and what's more exciting with this is that it was being supported by modern browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 1.9rem // 19px }
h2 { font-size: 1.8rem // 18px }

In this example I'm defining a base font-size of 16px which is the reference of the font-size of the other element. The size of the h1 and h2 will change as the viewport changes.

For older versions of Internet Explorer, we can specify the font-size in px units first and define the rem units along with it and we can have a resizable text on all browsers.

html { font-size: 16px;   // 1rem = 16px }
h1 { font-size: 19px; font-size: 1.9rem; }
h2 { font-size: 18px; font-size: 1.8rem; }

2. Experiment rem units on different viewports

Now that you know how to use rem, you need experiment on different sizes of screens via @media queries. The output will depend on the typeface. You need also to use actual font sizes and see if you'll get the result you want.

@media (max-width: 640px) {
h1 { font-size:1.7rem }
h2 { font-size: 1.6rem }
}
 
@media (min-width: 480) {
h1 { font-size:1.9rem }
h2 { font-size: 1.8rem}
}

Notice that on smaller screens the font size is a bit bigger compared to the wider screens. This will make text more readable as users read via phone or tablet.

3. Use CSS3 pseudo-classes to specify specific styles

One of the great features of CSS3 is that it can target a specific letter, line or paragraph and give it a different style. This gives designers the freedom to resize or adjust the text on different sizes.


As you can see on the example below, we use the following the CSS3 pseudo-classes:

  • first-of-type – selects the first child of the paragraph tag
  • first-line – selects the first line of the the paragraph tag
  • first-letter – selects the first letter of the paragraph tag

4. Control your measure

As suggested by Robert Bringhurst, the most ideal measure or line-length is around 45 to 75 characters per line. For responsive web design, the measure is not that easy to control especially on smaller viewports. If you can't control measure, you can't control legibility of your text.

There is a good article by Elliot Jay Stocks that talks about this topic on how to use media queries to achieve a desirable line height and measure.

Using Plugins

While there are a lot of jQuery plugins that we can use for responsive web typography online, the most popular one is the FlowType.js. This jQuery plugin counts character per line and set font sizes at definite line length at any viewports.

Let's take a closer look on how this works.

Step 1: Set Typography Values

Start adding CSS basic set up for FlowType.js.

body {
   font-size: 16px;
   line-height: 20px;
}
 
h1,h2,h3,h4,p {
   font-family: inherit;
   font-size: inherit;
}
 
h1 {
   font-size: 3em;
   line-height: 1em;
}
 
h2 {
   font-size: 2em;
   line-height: 1em;
}
 
p {
   font-size: 1em;
   line-height: 1em;
}

These values will be used by FlowType.js and change each values as the viewport resizes. Setting up font size and line height will enable you to access and set up your web pages when JavaScript was disabled.

Step 2: Link FlowType.js to your head section

Download FlowType.js and include it the head section of your html document.


Step 3: Call FlowType.js

Activate FlowType.js, we just need to add the following codes just before the closing tag.


Step 4: Customize FlowType.js Settings

There are some values that FlowType.js has by default, however you tweak them to the settings you want it to be set up. To do this, you just need to include some other options on your jQuery code.

$('body').flowtype({
   minimum   : 500,
   maximum   : 1920,
   minFont   : 16,
   maxFont   : 40,
   fontRatio : 34,
   lineRatio : 1.50
});

Aside from flowtype.js there are some other jQuery plugins that might help to create responsive web typography. Check out the following jQuery plugins:

  • FitText – A jQuery plugin that makes font-sizes flexible making text and headlines fluid or responsive.
  • js – A great plugin for radical web typography. It helps control the kerning of text in a just a line of jQuery code.
  • Responsive Measures – A simple script that enables you to create ideal measures for a container’s text.

What's Next?

Responsive design is becoming more and more advanced. We may think that images, layout and grids are what matters. However, we must not forget that the content or the text is what’s read by people and search engines.

Just like putting effort on layouts and images, you must also put some effort on how your text will appear. After all what matters most is that your text is readable, understandable and is easy for eyes on all viewports.


Tuesday, January 07, 2014

50 Free Graffiti Fonts for Designers

Free Graffiti Fonts - Inner City

In recent decades, graffiti has moved from an urban nuisance to a professional business - thanks to the work of some incredible street artists. And with the art form ever growing in popularity, there are now tons of graffiti font styles available online for creatives use in urban artwork.

Friday, November 15, 2013

Which CSS Measurements To Use When

CSS Measurements
Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.

What follows is a list of suggestions, not absolute rules.

Tuesday, August 20, 2013

The Importance of Designing for Readability

The Importance of Designing for Readability
Text is not an afterthought in the design process. It should be your first consideration.

Readability should be one of the top concerns when it comes to any design project. If text can’t be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability is a big part of comprehension. Today we’ll be discussing how you can plan a design around the words, so that your projects are easy to read.

Friday, August 02, 2013

Setting subheads with CSS

Setting subheads with CSS

Subheads are typographic devices that establish content structure for the reader, providing a short overview of the content that follows. We can use them as points of visual interest or as simple navigational aids that gradually disclose the content. However, default subhead styles rendered by the browser can be too generic. If you're looking for some variety, you can achieve some interesting effects with a pinch of CSS.

Tuesday, February 19, 2013

Getting Started with Responsive Typography

Responsive Typography

Responsive design is the "in" thing when it comes to website design. Responsiveness allows for one design scheme to work on websites, tablets and mobile devices and look great in a variety of sizes and orientations.

But have you thought about how this evolving, adaptable design outline relates to type?

Friday, December 14, 2012

Make your own webfont

Make your own webfont
There are many ways to find the perfect typeface for your site design: buying a font from a professional subscription service such as Typekit, Fonts.com or Webtype; finding a free font online, or making your own from scratch. In this article, I’ll focus on the latter two options.

Sunday, November 25, 2012

Optimizing typography in responsive web design

Optimizing typography in responsive web design

Each time a discussion pops up about responsive design, the common terminology and concepts that get the maximum attention include grids and images, and obviously the settings like fluid or flexible. Typography, though essentially always deemed important, is rarely given the weightage it deserves when it comes to responsive web design.

Tuesday, October 30, 2012

Fonts, fabulous fonts: How to use the @font-face rule with popular font services

How to use the @font-face

Studies show that five out of five web designers agree that the handful of fonts that come installed on most Windows and Mac computers offer a woefully inadequate choice for even the simplest design projects.

Wednesday, October 03, 2012

On widows and how to tame them

On widows and how to tame them

15/06/2012 · on a train between brighton and cardiff, uk · Dangling from the last line of a paragraph, a typographic> widow is a thought fragment severed from its context. They are the result of careless typography – and should be policed – but given the current fluid nature of our web, widows appear with impunity throughout our pages. They are a blind spot, because to notice would invite outrage on the current futility of fighting such details in our ever-responsive layouts.

Tuesday, October 02, 2012

Typographic hierarchy – size

Typographic hierarchy – size
I've struggled a bit with the latest addition to this "simple steps" typography series. Mostly because it's not so simple and it's a bit more of a grey area than the previous three articles.

Typographic hierarchy, put simply, is how different faces, weights and sizes of typefaces structure a document. Some of these hierarchical devices are well-established conventions, such as cross heads and folios, so I'm not going to touch on them in this post. To keep it simple I'm going to concentrate on two things – size and weight. The first of which is size.

Tuesday, October 02, 2012

Measure the measure

Measure the measure

The Measure is the name given to the width of a body of type. There are several units of measurement used for defining the Measure's width. The three basic units are:

  • One point = 1/72 of an inch
  • One pica = 12 points
  • One em = The distance horizontally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for correcting me on this.)

Tuesday, October 02, 2012

Web design is 95% typography

Web design is 95% typography
95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites:

Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer's task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.

Tuesday, October 02, 2012

Make a statement with type

Make a statement with type

Font choices can have an impact on how your message is communicated and how people feel about the words on the page.

Selecting typefaces for a design project is about much more than just how the letters look. It is about more than serifs and sans serifs.

Thursday, September 13, 2012

Creative Web Typography Styles

Creative Web Typography Styles

With a little bit of CSS magic we can transform text into beautiful typography and omit the use of images in many cases. In this tutorial we will be creating different web typography styles using the lettering.js jQuery plugin and various CSS techniques. For some of the examples we will also add hover transitions to make things a bit more interactive.

We'll use lettering.js in most of the cases.