David on Typography 1 - HCI

WHAT DO WE NEED TO CONSIDER WHEN DESIGNING FOR MOBILE? So the how do we make good looking type that is also readable. There are numerous rules out there that suggest good ways to set out your type. Lookswise, well there is no accounting for taste. Go nuts. Readability on the otherhand, you should probably listen to the rules. And like I mentioned before, if a user cant read what youre saying then you stuffedup. From what I could gather there are 8 main features of typography that factor into anice reading block of text.

MEASURE Measure is the horizontal length of a line of text. The length of a line affects readability because our eyes can become fatigued fromthe long back and forth strokes involved in going across the pages. It also increases the likeliness of getting lost on our way down to the next line. Keeping lines to about 45-65 characters seems to be the suggested golden number.

KERNING AND TRACKING Kerning is altering the gap between two individual letters . Tracking is altering the gap between all letters in a single word or group of words. They both have a similar impact on readability . If we create too much white space between individual letters our eyes find it hard totrack and our eye movement across the pages is fragmented even more than normal . If we go the opposite way and push the letters too close together we find it hard todistinguish letters apart .

LEADING Leading is the space between two lines . A general rule of thumb is 1.25 - 1.5 times the size of the font. It’s a similar affect to tracking in that too close or too far and our eyes have troubletracking smoothly from line to line. Or we can find it difficult distinguishing words and letters apart.

RAGS Rags are the jagged edges of a paragraph . If a section of text is too jagged it becomes unappealing to look at. It makes it difficult for our eyes to go from line to line . We can get lost on our way down.

JUSTIFICATION Justification tidies up rags. However it can have a negative side affect . Justification is prone to creating uneven gaps between words. This again is unsightly and hard to read.

ORPHANS AND WIDOWS An orpan is a single word sitting at the bottom of a paragraph . In this case its not so much a readability issue, more an aesthetics one. A widow is a single word from the end of a paragraph sitting in a new section of text. This is a readability issue because it breaks the normal flow of the sentence. It’s a single word situated away from its friends. The easiest way of dealing with rags, widows, and ophans is to manually alter yourlines of text to break at better points in the sentence or by alter tracking.

CASE The use of all uppercase is generally frowned upon for large sections of text but is okfor headings. The same goes for most of these tips, in the right situation you can ignore any of theserules. Uppercase is bad because one of the techniques we use to read is to pick up onshapes of words as opposed to actual letters . By noticing the outlines of words we quickly skip across the text deciphering what theword is as we go. By using all caps we loose this ability because all the letters are the same heightgiving the words a rectangular appearance .

SANS VS SERIF The final factor is sans vs serif. Serif fonts have been main body text for a long time due to their ease of reading inprint media. The serif detailing on fonts make it easier to tell each letter apart. However, on mobile devices where the dpi is a third of print, and viewing is on smallscreens the serif details can “bleed” together making the text hard to look at. So we go sans on mobile devices for body content as the lack of serifs helps keepindividual letters apart as font shrinks and words are squashed together.

WHAT ABOUT SIZE? Text size factors immensly into whether our text is readable on small screens. The problem with size is that we have no control over the end user. Devices make it extremely easy to alter the size of text. This means all our hard work laying type in our development environment can bequickly erased. Screen sizes, resolutions, old peoples eyes. They are all different, and they all affectwhat the user sees on their device.

RESPONSIVE DESIGN Using websites as an example. Our typography has too look good across all devices. It has to be able to deal with bigger or smaller screens. From desktop to phone. Realistiaclly we have one true option for dealing with this. Responsive design. Ultimatly, across all devices we want our typography to remain consistent, even if theuser alters the text size. So we need to pick a font that scales well and we need to use relative sizing like ems. Ems allows the screen size to change while maintaining the proper proportions we laidout for our text. Pixels are not a good choice for mobile design as the size can vary greatlydepending on the resolution of the screen.

WHAT ABOUT THE FONT ITSELF? What useful aspects of font should we worry about. When designing for the mobile device we want a font that can be seen as clearly aspossible at small sizes, one that scales well. In general a font that is good on a mobile device has four characteristics. Low contrast and simple strokes with a consistent weight and thickness. Font contrast isthe difference in thickness of the relative parts of a letter. High contrast means a bigdifference, and this is bad because as the text shrinks the think parts can disappear. Generous x-height. The x-height is the size of lower case letters. A large x-heightmeans the non-capitalized letters are large relative to the capitals, and so as the textshrinks theses letter maintain their form and visibility. Generous width and letter spacing. Generous punch width (space within letters). These two factors are again related tohow legible font remains as it shrinks in size.

WHAT FONTS DO WE HAVE ACCESS TO ON MOBILE DEVICES? In order to use a font the device must have it installed. Desktops have a tonne of fonts installed but mobiles have limited space so this isn’talways possible. From what I could find windows phone has 23 generic fonts installed. iOs6 has a tonne, I couldn’t be bothered counting. For the latest android there is 4. Continuing the website example, you want to use fonts that are unique but at the sametime you need to select fonts that are close to generic fonts. This is because if a font isn’t available on mobile device than a generic one is used. The closer your actual font is to the generice ones, the more similar your site will lookacross multiple devices.

CAN WE USE OTHER FONTS? You can use other fonts in your app/website but the font must either be installed ordownloaded when the site is viewed. Embedding fonts can be expensive due to licencing issues and increases the size ofyour app. It is an option though and there are free fonts available. We can also use a webfont service that allows us to use a font we like and it will bedownloaded to the page. Depending on how you go about this you can run into issues. Bandwidth is one as the fonts do need to download. Also the amount of code . Typekit is easy to implement but can increase page loadtimes. FONTFACE is faster but has increased code implementation. So for the most part, you are probably better off using the default device fonts, butthe option to go unique is there.

AND WHAT ABOUT COLOR? Color is magical. Don’t really know how to define color, don’t really think I need to. For the most part these days, even low end smartphones and tablets have gooddisplays with good reproduction of color. Your color scheme is to you own taste but you would try to put some effort into it. There are numerous color scheme websites out there designed to help you decide onthe best color to go with.

COLOR COMBOS? Quite a bit goes into choosing a good looking color scheme. We can start searching for color ideas from color wheels. These provide a visual tool showing the relationships between primary colors,secondary colors, complimentary colors, and other color combinations. As mentioned just before, there are websites and apps designed to help take theguess work out of color choice.

DO USERS CARE? At the end of the day, do users even care about the color choices you have made. Colors you have chosen can influence the user in various ways. There are color preference differences across age groups and between sexes, andacross different cultures. Color is the first thing a user notices about a logo, it also something that will turn aperson off about a business. Certain colors provoke certain emotional responses, so choosing colors that evokeemotions you want your design to portray is important. A survey by entrepreneur.com found that for health related designs people preferfour colors, blue, purple, orange, and white. And they definitely don’t like to see blackassociated with it. So color is good at emphasising your message and tying your brand together, peopledo care.

CONTRAST IS KEY In terms of readability the main color issue that matters when designing for mobile iscontrast. Contrast is the difference between foreground and background colors. It is key for three reasons. In normal use condidtions, if contrast is low a user has a hard time distinguishingbetween the foreground color and the background color. So carrying on with our typography example and readability, if the front color cannotbe easily distinguished from the background then you cant easily read the words. The best contrast to use is black on white.

BRIGHTNESS KILLS CONTRAST Secondly, we have no control over where an end user will use their mobile device. conditions where bright lights are shining directly on the screen or the user has turned the brightness of the screen right down, if our design has low contrast the difference between forgeround and backgroundbecomes even harder to distinguish.

COLOR BLINDNESS Thirdly, a health related point, color blindness. What we emphasise in color can be lost on people who cant tell the colors apart. Where a normal user would see red and yellow, the color blind person may only seeshades of yellow. We can help in a couple of ways. High contrast color combos increase the contrast a color blind person sees aswell. They wont see the colors we see, but they will see the difference in shade. Unrelated to color, we can also identify important features like links with underlines orother identifying features.

SO TO SUM UP There aint no accounting for taste but we should strive to keep our text readable. Color means a lot to people. Don’t forget the colorblind, they are people too.