B612: the PolarSys font Laurent SPAGGIARI, AIRBUS

Slides:



Advertisements
Similar presentations
The Key Element in Desktop Publishing Design
Advertisements

Word 2007 ® Business and Personal Communication How can you use Word 2007 to format your documents? Fonts Font Styles Lists.
Making Text Legible: Designing for People with Partial Sight CSCI 4800 Spring 2007 E. Kraemer.
& LOGO D E S I G N typography. PART 1 Review of The Basics.
Typography (The study of font).
1 LECTURE 4 THE USES OF TEXT IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.
Typography Basic terminology/concepts
© 2005 by Prentice Hall Chapter 3b Designing Forms and Reports Modern Systems Analysis and Design Fourth Edition Jeffrey A. Hoffer Joey F. George Joseph.
Text and Image Pertemuan 01 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10. Typography In this chapter you will learn about: The basic terminology and concepts of working.
TYPOGRAPHY vasuki belavadi reader dept. of communication s n school university of hyderabad.
Typography Font type Font size Font style (e.g., bold, italic) Color Font effects The first 3 of these can be set in the formatting toolbar, and all of.
Typography and Space for Web Design Important Issues From Web Style Guide.
Character Formatting MOAC Lesson 3.
10. Typography The basic terminology & concepts of working with type
Unit 4 – Multimedia Element: Text
Chapter 9 Text. So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast,
Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph.
Created with User Interface Aesthetics COMPSCI 345 / SOFTENG 350 Prepared by Safurah Abdul Jalil & Beryl Plimmer 2011.
Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 10 This presentation © 2004, MacAvon Media Productions Characters & Fonts.
B.Sc. Multimedia ComputingMedia Technologies Character Representation & Font Technology.
11-1 Chapter 11 Designing Forms and Reports Modern Systems Analysis and Design Fourth Edition.
MSOffice WORD.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
Anlab ( ) Kim, Yangjung Characters & Fonts.
(c) 2001 by The McGraw-Hill Companies, Inc. All rights reserved. 1 Multimedia Literacy.
Typography Graphic Design Fundamentals
Chapter 3 - Text Revamped by Hamzah Asyrani Sulaiman.
Headings and Text What makes headings stand out?.
Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall.
So many fonts, so much choice. More than 1000 fonts Just as an author struggles to find the right words, the graphic designer struggles to find the right.
Gothic lettering  Key Terms & Definitions  Gothic Lettering: Standard lettering style used in industries today. Gothic letters are made up of lines.
What are we interested in? 1. Understand Design 0 2. Digital Image design 3 3. Time-based media Webpage design 2 1.
Typography A Key Element in Design A. Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page.
Unit 5: Developing the Training Program 1 © SHRM 2009.
Digital Interactive Media
Introduction to typography
Enhancing documents with appropriate typography choices
Business System Development
Readability and Legibility
Microsoft Word - Formatting Pages
Typography Usability & Readability
HTML5 and CSS3 Illustrated Unit D: Formatting Text with CSS
Characters & Fonts Digital Multimedia, 2nd edition
SCA Introduction to Multimedia
Basic Desktop Terminology
Modern Systems Analysis and Design Fifth Edition
The Effect of Inter-letter Spacing on Reading Yu-Chi Tai, PhD James E
Chapter 13 Designing Forms and Reports
Understanding Spacing
Unit 2.1: Identifying design elements when preparing graphics
2.01 Investigate typefaces and fonts.
2.01 Investigate typefaces and fonts.
Design and Implementation of Software for the Web
Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.
Desktop Publishing Terminology
*** DELETE THIS TEXT BOX TO MAKE YOUR POSTER ***
.……Fast Feedback #TMMonkey.
Characters & Fonts Digital Multimedia, 2nd edition
NOTES 1. Poster Title • Replace the mock-up text of the poster title (”Joint Research Centre”) with the text of your own title. • Keep the original font.
SCA Introduction to Multimedia
Typography Usability & Readability
SCA Introduction to Multimedia
Digital Media Notes Your Name.
Typography Usability & Readability
Lesson 3 character/font formatting
SCA Introduction to Multimedia
*** REQUIREMENTS *** Do not modify the size of this template.
Character Formatting MOAC Lesson 3.
Presentation transcript:

B612: the PolarSys font Laurent SPAGGIARI, AIRBUS Laurent SPAGGIARI, Nicolas CHAUVEAU, Jean-Luc VINOT Eclipsecon France 2017, Toulouse, France

1 2 3 4 5 6 Agenda Why a new font Prototyping Design tests Industrialization 5 Validation tests 6 Product & Next steps

Why a new font 1 Main font used And other fonts used: Verdana, Blériot Airbus, Arial, Courier new

Why a new font 1 Different needs to be covered: Homogeneity Enhanced legibility (easiness of identification and discrimination of a character or a series) Comfort Safety (protection against error) Different constraints to take into account Distance, orientation, light, vibrations, color, …) Specific textual data (codes, abbreviations, etc.) Define criteria for font usability

Studies 1 One academic study on reading (by fixation and saccades, central vs. peripheral vision) and how it is affected by: Distance/orientation/position to screen Lighting conditions Screen (size, type, resolution, …) Font characters size and forms Contrast, color, spacing, … Fatigue, vibrations, … One technical study on the needs and the technical constraints: Current fonts used in Airbus cockpits (tech. analysis) Operational needs and real usage of textual information (observations in sim, during commercial flights and discussions with pilot crews) One study on the assessment techniques and typographic solutions: Experiments and algorithms Discussions with digital font specialist (école Estienne/Imprimerie Nationale) Transform criteria for font usability into recommendations for font design

Recommendations for the design 1 28 Recommendations for the design of the B612 font On the font and the sets of characters (10 rules) On the drawing of characters (11 rules) On the management of spacing (7 rules) R.1.1 The visual height (angle of vision) of the characters displayed must ensure a good readability of the text. This angle must not be smaller than 15 minutes of arc. R.2.1 The glyphs (results of the digital font) must be easily visually identified and discriminated in context (refer to need analysis report) R.3.1 A proportional alignment of the font is necessary to ensure a good letter shaping and the coherence of spacing. Monospacing is preferable for numbers. Prototype a font

Prototyping 2 Exploration of technical and typographical solutions to answer the criteria (legibility, comfort, robustness, …) Maximize the distance between the forms of the characters Respect the primitives of the different letters Harmonize the forms and their spacing Half bitting CDS Bleriot Verdana Gaussian blur => Strengthening of angles/curves Composition and alignment

Prototyping 2 Paper sketch Vector translation Digitalization Set of glyphs for design test Test the prototype

Calibration of the contrast Tests 3 Calibration of the contrast (Landolt rings) Good answer No answer Wrong answer => No impact of contact lens, spectacles, lighting conditions, etc. 3 fonts CDS, Verdana, New 2 distances (80cm, 100 cm) appearance time 17ms Confusion matrix

Tests 3 Same trend => tests in lab valid: go for quick design loops Lab: appearance time 17ms Sim: appearance time 40ms Same trend Good answer No answer Wrong answer => tests in lab valid: go for quick design loops V1 V2 V1 V2

Tests 3 Complementary lab tests Same trend Letter retrieval/counting pairings Same trend 3 thicknesses 3 polarities and 2 contrasts Once mature enough, industrialize the font

Industrialization 4 Discrimination Emphasis (variants) italic bold italic bold italic Spacing Identification with kerning regular

Industrialization 4 Optical corrections with hinting with antialiasing Validate the font and validation on sim with end-users

Validation tests 5 Same experiments as during previous steps New experiments (reading task and information retrieval on displays, pairings and questionnaires + discussion) + 8 Airbus pilots + other participants 2 lighting conditions (night + ¾ lum)

Validation tests 5 Questionnaire Pairing New CDS

Product 6 587 glyphs New font Punctuation & symbols monospace proportional italic bold Italic + bold regular 587 glyphs Punctuation & symbols Accents & ligatures Greek alphabet Roman numerals Subscripts & exponents Mathematics & measurement Arrows & directions General & specific pictograms

Product 6

Next steps 6 Next steps (2017?) Since 2013: Used by HMI designers in Airbus R&T (and in other entities) Next steps (2017?) “Hinting and kerning” to apply on special characters “Alpha instructions” to apply on all sizes New variants to develop (black, light, not condensed, etc.) Existing tables to complete (Latin extended A & B, etc.)

For those about to ask ‘Why B612?’ “I have serious reason to believe that the planet from which the little prince came is the asteroid known as B-612”. The Little Prince Antoine de Saint-Exupéry