Section C

Font Recommendation System based on User Evaluation of Font Attributes

Soon-Bum Lim1,*, Yeon-Hee Park2, Seong-Kyeong Min3
Author Information & Copyright
1IT Engineering, Sookmyung Women’s University, Seoul, Korea, sblim@sm.ac.kr
2IT Engineering, Sookmyung Women’s University, Seoul, Korea, hyee0504@hanmail.net
3IT Engineering, Sookmyung Women’s University, Seoul, Korea, msk0209@naver.com
*Corresponding Author: Soon-Bum Lim, Cheongpa-ro 47gil 100, Yongsan-gu, Seoul, Korea, +82-2-710-9424, sblim@sm.ac.kr.

© Copyright 2017 Korea Multimedia Society. This is an Open-Access article distributed under the terms of the Creative Commons Attribution Non-Commercial License (http://creativecommons.org/licenses/by-nc/4.0/) which permits unrestricted non-commercial use, distribution, and reproduction in any medium, provided the original work is properly cited.

Received: Nov 27, 2017 ; Revised: Dec 7, 2017 ; Accepted: Dec 9, 2017

Published Online: Dec 31, 2017

Abstract

The visual impact of fonts on lots of documents and design work is significant. Accordingly, the users desire to appropriately use fonts suitable for their intention. However, existing font recommendation programs are difficult to consider what users want. Therefore, we propose a font recommendation system based on user-evaluated font attribute value. The properties of a font are called attributes. In this paper, we propose a font recommendation module that recommends a user ‘s desired font using the attributes of the font. In addition, we classify each attribute into three types of usage, personality, and shape, suggesting the font that is closest to the desired font, and suggest an optimal font recommendation algorithm. In addition, weights can be set for each use, personality, and shape category to increase the weight of each category, and when a weight is used, a more suitable font can be recommended to the user.

Keywords: Font Attributes; Font Matching; Font Recommendation; User Evaluation Score

I. INTRODUCTION

Recently we can see that various fonts are used in various places around us. Numerous fonts are used in writing or designing various kinds of documents as well as presentations and posters. And at this point, the visual effect that fonts have on people is significant. Thus we want to use the right fonts for the situation, but it is not easy to find the font that user wanted to use. Therefore, this paper proposes a font recommendation system that recommends users to find the desired font in various purposes and situations.

Various font sites and programs are now available as the demand for fonts increases[1~4]. All of these programs have formats for recommending and providing fonts based on certain keywords or criteria, but since the criteria for dividing each keyword are ambiguous and ambiguous, users can not easily access the fonts that are appropriate for the situation. Therefore, we created a ‘Find your font’ program to help users find the fonts they want easily and accurately.

Our previous work has improved the fact that existing font recommendation programs are incoherent when selecting fonts[5,6]. First, the font category was clearly divided into ‘use’, ‘personality’, and ‘shape’. However, there are limitations in that the number of attributes is too large for each of the three categories, and the attribute itself is ambiguous, making it difficult for the user to intuitively select. In addition, the data for font recommendation was accumulated from the user through the ‘evaluation of the font attribute value’, but there was a limit in that the accuracy of the font recommendation was deteriorated because the degree of expertise of the user was not considered. In addition, when the recommendation result is presented, only the font name and the set text are displayed, so that the user can not know the satisfaction and accuracy of the recommended result.

In this paper, we tried to overcome limitations of previous work and improve the user interface to make more accurate and convenient font evaluation and recommendation system. The composition of this paper is as follows. In section 2 compares existing research with font related sites. In section 3 describes the system design and in section 4 details the modules of the actual system. Finally, in section 5 presents conclusions and future research directions.

II. RELATED WORKS

2.1 Dafont

Dafont [1] is provided with fonts alphabetically from A to Z by default. In the A list, fonts whose font names start with the letter a are provided. Or fonts such as Fancy, Gothic, Basic, Script, etc. are divided into keyword. However, the criteria for these keywords are fairly vague. In other words, the limit of this program is that users need to know the name of the font, check all the lists and check whether they want to get the fonts they want

jmis-4-4-279-g1
Fig. 1. Screenshot of Dafont [1].
Download Original Figure
2.2 1001freefonts

1001freefonts [2] must select the attributes you want to find for the font to find the font you want. 1001freefonts classifies font attributes into 64 and presents them in alphabetical order. Since properties are not classified by their characteristics but are simply listed in alphabetical order, so they can not be intuitively selected by the user. Moreover, there is a limitation that the user can select only one attribute at a time.

jmis-4-4-279-g2
Fig. 2. Screenshot of 1001freefonts [2].
Download Original Figure
2.3 Fontco

Fontco [3] is a comprehensive store of typography-based general design company Yoon Design Group. It sells various fonts, provides related articles and information, and sells self-made design books. Therefore, Fontco is not just providing fonts, it also provides content like articles. Therefore, when users use fonts to refer to them, Fontco only has fonts that are affiliated with the company’s fonts or its own. Furthermore, since Fontco is a fee-based service, there is a limit to the inflow of users

jmis-4-4-279-g3
Fig. 3. Screenshot of Fontco [3].
Download Original Figure
2.4 Fonttong

Fonttong [4] was developed by Asiasoft as a font installation tool that allows users who can not easily access fonts to easily and quickly use various fonts legally and easily without authentication or login. Fonttong provides fonts classified as basic, design, handwriting, ornament. A limitation of Fonttong is that there is a “Related Search” feature that makes it possible to search fonts quickly and easily, but there are limits to the search because there are no valid criteria for the search terms.

jmis-4-4-279-g4
Fig. 4. Screenshot of Fonttong [4].
Download Original Figure

III. DESIGN OF FONT RECOMMENDATION SYSTEM

3.1 System Objectives

The goal of this system is a font recommendation web service that presents the font that the user wants. First of all, through the font attribute evaluation module, which is the basis of the font recommendation, the user directly evaluates the attribute of the font as a score, and the font is recommended based on the accumulated attribute value for each font. The font recommendation module recommends the most appropriate font based on the properties you are looking for. The font matching module recommends different fonts that match the user’s specified font or that have the most similar characteristics.

3.2 Font Attribute Evaluation Process

The font attribute evaluation module selects a font to be evaluated by the user and evaluates and stores the attribute value of the font. The user selects a font to be evaluated from the list of fonts to be evaluated, and information on the font selected by the user can be efficiently evaluated by the user through the font preview and the representative font for each attribute. In the font preview, the example text appears to have the corresponding font applied. The representative font of each attribute shows the font which is closest to the value of each standard value point as to whether or not the different fonts are given a score for each attribute.

In this system, the attribute value of the font is more systematically classified to improve the accuracy of the font recommended to the user [5, 6]. Unlike the existing programs, in which font attributes are simply listed, the proposed system classifies font attributes into three categories: usage, personality, and appearance, and systematically selects the types of attribute values for each category do.

In addition, we divide the user into four levels from expert to non-expert, so that the evaluation of the font is made objectively. The flow of the font attribute evaluation module is shown in Figure 5

jmis-4-4-279-g5
Fig. 5. Process of Font Evaluation.
Download Original Figure

The font recommendation module is a function for presenting the closest font when the user selects desired attributes. At this time, since the user can recommend the font recommendation result as the Korean font and the English font, first, the user selects the language of the font to be recommended as a result. Then weights can be set for each category of use, personality, and shape, and the attributes to be searched in each category are selected. By setting the weights, the font that the user is looking for can be more accurately recommended. When the user completes the weight setting and the attribute selection, it is recommended as a result from the font having the highest score in the attributes desired by the user through the recommended index calculation. It also includes a feature that allows the user to preview the font in a recommended font by typing the sentence directly so that the user can determine whether the recommended font is appropriate.

3.3 Font Recommendation Algorithm

Font recommendation algorithm uses recommendation score. The recommendation score is calculated considering only the attributes selected by the user. Since the maximum value is 5 points for each attribute, the square of the font-specific error (attribute value of each 5-font) is calculated for each category and added. If the user sets a weight for each category, it is calculated by multiplying the weights after the calculation of the squared error. Since the user has calculated the error of the desired attribute and the attribute value of the font, the lower the recommendation score, the closer the user is to the desired font. The recommended score calculation used in the font recommendation algorithm is shown in the equation (1).

Re c o m m e n d a t i o n S c o r e = k = 1 n a ( M A k ) 2 * W A + k = 1 n b ( M B k ) 2 * W B + k = 1 n c ( M C k ) 2 * W C
(1)

where

M: Maximum score for font attributes

Ak, Bk, Ck,: User score for each font attribute in the categories of usage, shape, and emotion.

na, nb, nc : Number of user selected attributes in the categories of usage, shape, and emotion

WA, WB, WC : Weight of score for each categories of usage, shape, and emotion

3.4 Font Matching Algorithm

The font matching module is to match other fonts that match the one selected by the user or have the most similar characteristics. When a user selects a font to be used as a matching criterion and a language of a font to be recommended as a result, the font matching the reference font is recommended as a result through calculation of a matching score. If the user wants to perform more weighting among the three categories of usage, personality, and shape, it can be reflected in the calculation of the matching score by setting the weight for each category. The matching score is designed to be presented to the user from the font having the closest score to the reference font score. In addition, as with the font recommendation module, it provides a preview function that allows you to check in advance whether a recommended font is appropriate.

The font matching algorithm uses a matching score. The matching score is calculated in consideration of all the attribute values of the usage, personality, and shape category of the font selected by the user as a reference. Accordingly, the matching obtains the squared error of each font (the attribute value of the reference font - the attribute value of the comparison font) for each category, and adds the obtained values. It is the biggest difference from the recommendation score which is based on the maximum value of 5, that the attribute value of the reference font is used as the matching function. Similar to the recommendation function, if the user sets the weight for each category, the weight is multiplied by the weight after the calculation of the square of the error. As the matching score is lower, it is similar to the reference font because the error with the attribute values of the user-specified reference font is calculated. And a font that matches a font with a lower matching score better is recommended. The matching score calculation used in the font matching algorithm is shown in the equation (2).

M a t c h i n g S c o r e = k = 1 n a ( X k A k ) 2 * W A + k = 1 n b ( X k B k ) 2 * W B + k = 1 n c ( X k C k ) 2 * W C
(2)

where

Xk : The score for attributes of the font to be matched

Ak, Bk, Ck,: User score for each font attribute in the categories of usage, shape, and emotion.

na, nb, nc : Number of user selected attributes in the categories of usage, shape, and emotion

WA, WB, WC : Weight of score for each categories of usage, shape, and emotion

IV. IMPLEMENTATION OF FONT RECOMMENDATION SYSTEM

4.1 System Overview

The font recommendation system includes a font attribute evaluation module for evaluating a font attribute, a font recommendation module for recommending a font desired by a user based on the font attribute evaluation module, and a font matching module for matching a font matching the user designated font. The font recommendation system was developed using HTML, JavaScript, CSS, JQuery, etc. to design the whole screen UI and can be used on the web based on the Chrome browser. We used PHP, Apache server, and MySQL database to store the data obtained from the evaluation of the font attribute value and to perform recommendation and matching based on the data. The overall system configuration is shown in Figure 6.

jmis-4-4-279-g6
Fig. 6. System Overview.
Download Original Figure
4.2 Font Attribute Evaluation Module

In order to evaluate the attribute values of each font, the fonts were classified into three types: use, personality, and shape [5, 7]. Usage is divided into four categories of paper print, web publishing, electronic document, and entertainment based on where the font is to be used. Each use was systematically organized into attribute values for specific purposes such as newspapers, business cards, and posters. Personality is categorized as emotional properties of the feeling of the font. Since the personality can be classified by the opposite attribute value, the attribute value is implemented so that the user can perform more accurate emotion evaluation through pairwise comparison such as positive / negative, dynamic / static, and the like [8]. The shape is classified as the attribute value, not the visual characteristic of the font. The shape is also divided into four types of print, handwriting, engraving, and embellishment, each of which has attribute values such as serif, brush, and woodcarving.

To evaluate the attribute values of a font, first a list of fonts is loaded. A list of fonts can be loaded in either Korean, English or full fonts, and one of these fonts is selected and evaluation starts. In order to proceed with the evaluation, a sentence with the font selected by the user is displayed at the top, and the user views the attribute and evaluates the attribute values of the three categories of use, personality, and shape. The purpose is to check whether the attribute value is suitable for the purpose of use, and the personality score is given up to 5 points by comparing the opposite attribute values.

The shape gives a score from 0 to 5 considering the visual characteristics of the font. After completing the evaluation, the user completes the evaluation. If the evaluation cannot be completed inevitably, the user can temporarily save the result through the temporary saving function. The data temporarily stored by the user is not reflected in the font recommendation and matching module. When the user completes the evaluation, the user’s expertise level is taken into consideration, and the higher the user’s expertise, the more the weight is reflected in the database.

jmis-4-4-279-g7
Fig. 7. Font attribute evaluation module.
Download Original Figure
4.3 Font Recommendation Module

The font recommendation module first selects the language of the font to be displayed as a recommendation result. If you want to recommend Korean fonts, select English if you want to get Korean or English fonts. Next, the recommendation function selects multiple attributes desired by the user. You can select the desired attributes in three categories: Usage, Personality, and Shape. However, personality categories with opposite attributes can only select one of two attribute values. Moreover, if you want to get a recommendation by assigning different weight to the three categories of usage, personality, and shape, you can get a recommendation by calculating the weight at the top of the attribute value and calculating a specific category as a higher weight. Finally, according to the font recommendation algorithm, a font suitable for the attribute desired by the user is recommended as a result, and the user can directly input a desired sentence and confirm in advance how the fonts are applied when the fonts are applied.

jmis-4-4-279-g8
Fig. 8. Font recommendation module.
Download Original Figure
4.4 Font Matching Module

The font matching module first selects a font to be a reference in the font list, and then selects a font language to be displayed as a matching result. If you want to recommend Hangul fonts matching the fonts selected as the standard, select English if you want to get Korean or English fonts. Afterwards, the matching function sets appropriate weights for the user in three categories: usage, personality, and shape. Unless otherwise adjusted, the calculation is performed at a ratio of 1: 1; 1, and the user does not need to select a specific attribute value since the attribute values of the selected font are compared. Finally, according to the font matching algorithm, a font matched with the font selected by the user is matched with the result, and the user can directly input a desired sentence and confirm in advance how the fonts are applied when the fonts are applied.

jmis-4-4-279-g9
Fig. 9. Implementation of font matching module.
Download Original Figure

V. CONCLUSION AND FUTURE WORK

The proposed system is aimed at recommending fonts appropriately according to the systematically classified font attributes. In this system, the attributes of the font are classified into three categories, and then each attribute is systematically classified through the middle classification, so that the user can evaluate the attributes of the font. In addition, in order to recommend the font desired by the user, various attributes can be selected in duplicate, and weights are set for each category to reflect more specifically the situation desired by the user. In addition, we have implemented a user-customized font recommendation service by recommending other fonts that match the user’s specified font or have the most similar characteristics.

We will improve it to expand the fonts used by the system itself by adding a feature that allows users to add fonts directly in the future, and it is expected that the user satisfaction will be improved if the user evaluates the satisfaction and accuracy of the recommendation result and reflects it in the improvement of the system rather than simply showing and ending the recommendation result. In addition, if we expand the site scalability by applying the web font system, we can expect more effect as font recommendation system.

Acknowledgement

This work was supported by ICT Convergence Research Center in Sookmyung Women’s University.

REFERENCES

[1].

DaFont website,available at htp://www.dafont.com (accessed 15 December, 2016)

[2].

101freefonts website,available at, http://www.1001freefonts.com (accessed 15 December, 2016)

[3].

Fontco website, available at http://font.co.kr (accessed 15 December, 2016)

[4].

Fonttong website, available at http://www.asiafont.kr (accessed 15 December, 2016)

[5].

H. Y. Kim, Y. H.Park and S. B. Lim,”Hangul Property Study for Font Matching and Recommendation System,” International Conference MITA2016, Laos, 2016.

[6].

H. Y. Kimand S. B. Lim,”Standardizing design-based font classification system for Hangul font services,”Computer Standards and Interfaces, online, April, 2017.

[7].

H. J. Lee, Y. M. Hong and E. M. Son, “Research on Hangeul Typeface Classification Systems in Digital Environment,”Design Research, vol 51, 2003.

[8].

P. Donovan, J. Libeks, A. Agarwala and A. Hertzmann, “Exploratory Font Selection Using Crowdsourced Attributes,” ACM Transactions on Graphics, Vol. 33, No. 4, 2014.