Font Spot by Ayushi Medatwal

Design Project 3 Student - Ayushi Medatwal Guide - Rupesh Vyas Semester 4 M. Des Graphic Design

“ Typography is what language looks like.” - Ellen Lupton It’s more than just letters on a page.

Introduction In today’s digital landscape - more than ever - people are aware of typography, design and how the world looks around them. With tens of thousands of fonts in circulation, it’s tough to identify a specific font from memory, when you see it. Many times you’ve wanted to (or needed) to know the font that was used in a specific form.

Intent To identify, help and design a handy tool for easy filter of fonts from different mediums we see around us. To help someone looking for specific type details through a tool which further gives related information.

Design Process

Before digitization kicked in, typography was a specialized occupation, nowadays typography is something everybody has to deal with, at least everybody who uses or maintains a phone or computer.

Typography involves selecting typeface (font family), font size, line length, line-spacing and letter-spacing, etc.

People rely to some degree on a smartphone for accessing online services and information and for staying connected to the world around them. Today, people increasingly are accessing online services and information throughout the day, whenever and wherever they happen to be — and smartphones are often the primary vehicle for this “on the go” access.

People have low understanding of type and not everyone is aware.

Facilitate a huge number of people using phones.

They use type but might not have good understanding.

More about mobile users and typography in general.

â&#x20AC;&#x153;Users accessing the internet through their mobile devices has become a key driver for the growth of mobile apps.â&#x20AC;? - Ashay Padwal, Co-founder, Vserv

User Study

Type Enthusiast

Designer

Typographer

Curious Person (student or working professional)

What sets them apart from other potential users?

Special demands - needs when using devices

Typography - usage in their work

Comfortable - using a smartphone

Inspired - by ideas and creativity around

Interaction with Technology ●

3rd largest - India smartphone market in the world

●

Mobile phone owners > Personal computer users

●

Rapid transition - feature phones to smart phone

●

3G & 4G - increasing (82 million - 2014, 284 million - 2017)

●

Better User experience - smartphone deliver

●

Cross Platform, Cross-Device and Cross Region - compatible technology

●

10 months old - average smartphone in India

http://yourstory.com/2015/07/mobile-internet-report-2015/

2013 - 74 millions 2014 - 116 millions 2015 - 160 millions 2016 - 195 millions 2017 - 234 millions

http://yourstory.com/2015/07/mobile-internet-report-2015/

So why mobile application? -

Portability (click picture and identify font right there and then)

Directly - going where is your customer

Much faster

Launch - takes second to start app

More presence - on phones than a browser

Always visible - on phone screen

Connection - Seamless

App Study WhatTheFont -

Web + iOS App + Extension

Time consuming

No Android Application.

iOS App Rating: 2.5

Launch: 10 Feb 2009

Last Update: 16 Dec 2011

Compatibility: iOS 3.0 or later.

Compatible with iPhone, iPad, and iPod touch

If WhatTheFont canâ&#x20AC;&#x2122;t identify the font, you can post it to the forum.

http://www.myfonts.com/WhatTheFont/

https://chrome.google.com/webstore/detail/whatfont/

https://itunes.apple.com/in/app/whatthefont/

WhatFontis -

Web

upload a photo/scan/image of the font youâ&#x20AC;&#x2122;re trying to identify.

Forum also present

First try to put through tool, if not possible to identify, post to forum.

http://www.whatfontis.com/

IdentiFont -

Web

Launched: Nov 2011

Find fonts by: appearance, name, similarity, picture, other designers and publishers, font set

Will give you a set of questions on key features of the font

It will identify the font based on your answers.

http://www.identifont.com/identify.html

Flickr Typeface Identification -

Web based group

Post your found type and ask the local font snobs to help you identify the font(s) used.

photo sharing site

Members can post 5 things to the pool each week

http://www.whatfontis.com/

Problems -

Updates - no recent updates

No Android app

Portability missing

Visual - Congested

Interface - Tricky

Poor or no Image editor facility

Card Sorting Method to help design or evaluate the information architecture. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups. -

Build the structure

Decide what to put on the homepage

Label categories and navigation

47 cards

2 users

5 categories

Smartphone User Persona Report (SUPR) 2015 for India -

The growing smartphone penetration in the country is primarily driven by Indians under the age of 25 years who make up for 63% of the user base.

Smartphone users divided into six key user personas :-

App Junkies

Social Stars

Conversationalists

Entertainment Buffs

Utilitarians

Dabblers

http://yourstory.com/2015/07/smartphone-user-persona-report-vserv/

169 min/day Indian users spend on their device

6 personas

App Junkies -

24% in the smartphone user base

<18 years

3G connection

Students

High-end device 15k+

160 min/day (time spent)

18.5 Apps/Games (Installed per month)

6.7 GB/Month (Total Data Consumption)

Persona Personas make it easier for designers to create empathy with consumers throughout the design process.

Persona: the curious designer -

Age 20-35 years Tend to use design softwares and tools has limited time Conscious and curious of his surroundings Gets inspired Smart phone user

Uses applications often Typography enthusiast Spends 2-3 hours on internet browsing records/bookmarks design inspiration

Persona 1

Persona 2

Value Proposition Filling the gaps

Filling Gaps ●

Easy interface

●

Personal Font Inspiration Library in the click of your hand.

●

Saving time

●

Hassle free

●

Android App

●

Precise, simple instructions

●

Using standard controls and build-in device features

●

Android Material Design -clear and simple UI

●

Using phone camera and editor

●

Client side caching so they use the app even when no connection to internet.

●

Identifies font from less populated image reference / type samples.

How font database can be obtained? Google Fonts - Open Source Fonts All of the fonts are Open Source. And you can use them in every way you want, privately or commercially. Many of Google's own web pages are already using Google Fonts, such as Google's About page and Google's World Wonders Project which use Open Sans. â&#x20AC;&#x201D; The Google Fonts Team

How images will identify fonts? Image Processing Study of an algorithm that takes an image as input and return a vector as output. Application: -

Astronomy

Medical science

Medicine (MRI )

Biomatrix (security)

Environmental monitoring

Agriculture

Personal photos

Function of Image Processing used in application Includes:

Enhancement

Edge detection

Compression

Contrast enhancement

Segmentation

Features -

Identifies font from image sample

Click and image or upload from gallery

Results -

Font name, weight Family Classification Point size + Line height Designer name Color Code (foreground and background) Link (site where you can buy it from, Download link to font) Similar typefaces Different Weights and styles sample list Glyph Release year Date and time of Spot (FontSpot)

Features -

Identifies font from image sample

Click and image or upload from gallery

Results -

Walk Through Screens

Launch Screen

Home Screen

Material Design

App name

Type

Bliss

Font Quest

Font

Help

Font Quest

Typeface

Explore

Font Hunt

Inquire

Font Spot

Hunt

Quest

Type Quest

Find

Look

Delve

Tool

Type Hunt

Chase

Typography

Type Spot

Frenzy

Icons Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.

Blue 600 #1E88E5

Deep Orange 400 #FF7043

Typography Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.

Color Blue - trustworthy, dependability, loyal, aids intuition Orange - stimulates activity, optimistic, fun, inviting and vibrant

Blue 600 #1E88E5

Deep Orange 400 #FF7043

What more ?

Typefaces have personalities. Finding typefaces with the right personality or emotion can be a daunting task. Using tags to identify fonts.

Lorem ipsum dolor sit amet Font Pairing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Heading: Istok Web Body: Lora

Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Heading: Quicksand Body: EB Garamond