Friendly Fonts for your Design

Similar documents
User-Centered Website Development: A Human- Computer Interaction Approach

Chapter 12: FORMATTING TEXT

TYPE BASICS Cartographic Design & Principles Winter 2016

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

MODULE CM 2004 / STAGE 2 / SEMESTER 2 / SESSION Module title Design Principles and Context

Windows Standard Fonts

Typography. is the foundation of good web design

TYPOGRAPHY. ascender arm (as on the capital T) descender bar (as on the capital H) counter ear (as on the lower case g and r)

TYPE ANATOMY jtittle

TEMPLATE ORDER GUIDE /

Chapter 7 Typography, Style Sheets, and Color. Mrs. Johnson

In your lifetime you ve seen billions of letters and millions of words, yet you might never have consciously noticed the typefaces you read.

What is Accessibility?

Selecting fonts from the WIRIS editor user interface Configuring fonts in the plugins and low level configuration... 2

Admin. Midterm 1 on. Oct. 13 th (2 weeks from today) Coursework:

FONT CLARITY: CANDIDATES VIEWS

Type on the Web: Dos, Don ts and Maybes Ilene Strizver

How to Create Accessible Word (2016) Documents

> what is a font? Times New Roman [10 pts] Times New Roman [12 pts] Times New Roman [14 pts] Times New Roman [18 pts] Times New Roman [24 pts]

LECTURE 4 THE USES OF TEXT IN MULTIMEDIA

Guiding Principles for PowerPoint Presentations

Representing Characters, Strings and Text

Chapter 7. Representing Information Digitally

Principles of Typography

The use of eye-tracker technology to evaluate typefaces, Greek fonts and publication design for screen.

BETTER LOOKING S

IDM 221. Web Design I. IDM 221: Web Authoring I 1

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)

limelightplatform.com

Evaluative Approach towards Text Steganographic Techniques

EnvSci360 Computer and Analytical Cartography

VOICE OF TYPE LECTURE 1

Font, Typeface, Typeface Family. Selected Typographical Variables

Controlling Appearance the Old Way

Typesetting Tips. Put your best type forward.

Putting type on a page without incorporating typographic principles is merely word processing. Terry Rydberg, Author Exploring InDesign 3

Content Design. Jason Withrow

Floats, Grids, and Fonts

BDA Dyslexia Style Guide

Pan-Unicode Fonts. Text Layout Summit 2007 Glasgow, July 4-6. Ben Laenen, DejaVu Fonts

UTF and Turkish. İstinye University. Representing Text

How to create and edit a CSS rule

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

How to Create Accessible PowerPoint (2016) Documents

Representing Characters and Text

CSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson

Longware, Inc INTERNAL STYLE GUIDE

Document Design Chunking Similar Information Together

Detailed Format Instructions for Authors of the SPB Encyclopedia

5. Text CHAPTER HIGHLIGHTS 10/12/2016 CHAPTER. Text tradition. Codes for computer text. t. Font technologies. Multimedia text.

SAPGUI for Windows - I18N User s Guide

Easy-to-see Distinguishable and recognizable with legibility. User-friendly Eye friendly with beauty and grace.

Lecture 3. Jamshaid Yousaf Department of Computer Sciences Cristian college of Business, Arts and Technology Gujranwala.

A Crash Course in Typography: Principles for Combining Typefaces - noupe

Character Encodings. Fabian M. Suchanek

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).

Trust runs deep. Brand Communications Guidelines. Version 12.1,

Introduction to Informatics

Cindex 3.0 for Windows. Release Notes

understanding typography

5/17/2009. Digitizing Discrete Information. Ordering Symbols. Analog vs. Digital

How Typography Determines Readability: Serif vs. Sans Serif, and How To Combine Fonts.

RECOMMENDATION FOR THE AUTHORING OF PATENT APPLICATIONS FOR THE PURPOSE OF FACILITATING OPTICAL CHARACTER RECOGNITION (OCR)

Chapter 4: Computer Codes. In this chapter you will learn about:

Document and Web design has five goals:

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

Font classification review

Step by Step: Scientific Poster Making Using PowerPoint 2010

Word processing. Computer Literacy 2 23 February 2005

M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs

Notes on legibility Compiled by Alexander J. Quinn in 2007

CS144: Content Encoding

Typography Main typography EC Square Sans Pro

INTRODUCING THE Transition family

WHAT IS A POSTER SESSION?

A comprehensive view of software in detail.

The Future of Web Typography. Richard Rutter

Graphic Design Tips for PowerPoint

Before & After. Use the Principles Cheatsheet! From The Non-Designer s Design Book, Robin Williams Non-Designer s Design 8

City of Peterborough Guide to Accessible Documents A O D A

DESIGNING FOR THE WEB

TYPOGRAPHY. The art of type

WEB DESIGN: CONSTRUCTION, FILES, CODE AND COLOURS UNIT NUMBER: H383 34

Skill Exam Objective Objective Number. Highlight text selections. Modify existing style attributes.

Font size. Tabl:e 2-4 Font Size Examples. Chapter 2.. Page Layout and Design 47. (font si ze="3"> (fo nt s ize="+l"> (font size="-l">

Design that Enhances Readability

Part 1. Introduction. Chapter 1 Why Use ODS? 3. Chapter 2 ODS Basics 13

Presenting Data Effectively

History of Typography. (History of Digital Font)

Using non-latin alphabets in Blaise

Adobe Photoshop CS Design Professional PLACING TYPE IN AN IMAGE

Web Page Creation Part I. CS27101 Introduction to Web Interface Design Prof. Angela Guercio

Character Formatting

Presented by: Mitch Boretz University of California, Riverside. and Colleen Jolly 24 Hour Company

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference

Data Representation From 0s and 1s to images CPSC 101

The Essentials of Digital Accessibility: Making Instructional Materials and Websites Accessible to Persons with Disabilities

ISAE2013 Conference Proceedings Format Sample File

CHAPTER 3 WEB DESIGN BASICS KEY CONCEPTS

Transcription:

Friendly Fonts for your Design Choosing the right typeface for your website copy is important, since it will affect the way your readers perceive your page (serious and formal, or friendly and casual). Aside from this, there are also important usability concerns. For example, some font types are more easily readable than others, and some are more widely available. You want to choose font types that: 1. fit the character of your site, 2. are easy to read on a computer screen, and 3. are widely available across many browsers and operating systems. There are basically two types of fonts: serif and sans serif. E Serif E Sans Serif Serif fonts are those that have fine cross-lines at the extremities of the letter. Sans Serif fonts ("sans" being the French word for "without") are fonts that don't have serifs. The most common serif font is probably Times New Roman. Arial is an example of a common sans serif font. Let's go briefly through the most popular font types and evaluate their availability, readability and character: ARIAL Availability: Thoroughly available. It is probably the most common sans serif font. It is the default font for Windows, and it first shipped as a standard font with Windows 3.1. Readability On Screen: Not the worse but definitely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters are too small. Character: Has a streamlined, modern look but is also plain and boring. Page 1 of 6

*For Mac users, the equivalent of Arial is Helvetica. Lesson 2: Fonts TIMES NEW ROMAN Availability: Thoroughly available. It is probably the most common serif font. It is the default font for web browsers. It was first shipped as a standard font with Windows 3.1 Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes. Character: Serious, formal and old fashioned. * For Mac users, the equivalent of Times New Roman is Times. VERDANA Availability: A widely available sans serif font, Verdana was first shipped with Internet Explorer version 3, when the exponential growth of the Internet demanded a new font that was easy to read on the screen. Readability On Screen: Exceptional. Its wide body makes it the clearest font for on-screen reading, even at small sizes. Character: Modern, friendly and professional. GEORGIA Availability: Good. It is a serif font introduced by Microsoft with Internet Explorer version 4, when the need for a serif font with much better readability than Times New Roman became evident. Readability On Screen: Very good. It is the best serif font for online reading, since it was specifically designed for that purpose. Character: Modern, friendly and professional. Microsoft has also popularized two more fonts: Comic Sans Serif and Trebuchet. Page 2 of 6

COMIC SANS SERIF Comic Sans Serif was launched with Internet Explorer version 3 and mimics the hand writing used in comics. It is easy to read and is informal and friendly, but it is not considered appropriate for more serious, professional sites. TREBUCHET MS Trebuchet is another sans serif font, similar to Arial but with more character, although it can be difficult to read in small sizes. COURIER NEW Finally, we can mention Courier New, a serif font that was widely popular with old, mechanical typewriters, and that is now used only to present simulated computer code (if you need to present snippets of sample HTML code in your web pages, this is the font to use ). Therefore, from a usability perspective, the clear winner is Verdana. If you are inclined to use a serif font, Georgia is the best option. Arial remains a good option for specific parts of text, like headlines and titles, where a different font must be used and you can use larger sizes. Page 3 of 6

Below is a table showing the different fonts and their availability on different browsers. Generic Font Windows 9x/2K/XP Windows Vista Mac Classic Mac OS X Linux Unix Cambria Constantia Serif Times New Roman Times Georgia Andale Mono Arial Arial Black Calibri Candara Sans Serif Century Gothic Corbel Helvetica Impact Trebuchet MS Verdana Cursive Comic Sans MS Consolas Monospace Courier New Courier suggest the font is likely available but was not present on all versions created; while suggest it is highly likely the font is available. Page 4 of 6

Character Sets and Alphabets Cases: Fonts have two cases: UPPER and lower. For passwords, it is said to be case-sensitive which means that the computer recognize both the UPPER and the lower cases. Studies however, showed that sentences with mixed UPPER and lower case letters are easier to read than words or sentences in all caps (uppercase). The ASCII Character Set The American Standard Code for Information Interchange is a 7-bit character coding system that computers use. ASCII assigns a number or value to 128 characters which include both UPPER and lowercase letters, punctuation marks, Arabic numbers and math symbols, and 32 control characters. Examples of ASCII Code Character Decimal Equivalent Binary Code Space 32 010 0000! 33 010 0001 % 37 010 0101 & 38 010 0110? 63 011 1111 @ 64 100 0000 A 65 100 0001 B 66 100 0010 C 67 100 0011 The Extended Character Set A byte is consisted of 8 bits, the ASCII uses only 7 bits to code 128 characters. The ANSI (American National Standards Institute) uses the extra bit (another 128 character set) for an extended character set such as or. The Unicode As the computer market became more international, there is a need to distinguish for example the kanji script used by the Japanese writers and the Roman script used by western Europeans. The Unicode standard which is a 16-bit architecture a concerted effort of the linguistics, engineers and IT professionals - can accommodate 65,000 characters. Languages in the World of Computers Different countries use different languages. For others, alphabets are used, still others have their own symbols that represent a word. The English Alphabet has 26 Roman or Latin Letters. The Arabic numbers are 0-9 which is easier that the Roman or Greek Numerals. Localization is translating or designing a multimedia into a language other than the one in which it was originally designed. When designing your multimedia project, it might be wise to consider one that has more than one language. Page 5 of 6

Font Editing and Design Tools Special font editing tools may be used if you want to design your own designs. However, one must be careful in making sure that the typeface does not fall into any industrial designs protected by patent. Hypermedia and Hypertext Multimedia projects become a hypertext when the designer provides a structure of linked elements through which a user can navigate and interact. When the hypermedia projects include large amounts of text or symbolic content, the contents can be indexed and its elements linked together for easy retrieval, hence the hypertext system. In a fully indexed hypertext system, all words can be found immediately. Google's search engine produces more than 1.2 billion hits in less than a quarter of a second. Page 6 of 6