International Journal of Interactive Mobile Technologies(iJIM) – eISSN: 1865-7923 – Vol 16 No 11 (2022) Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic https://doi.org/10.3991/ijim.v16i11.31137 Diana Bratić(), Nikolina Stanić Loknar, Tajana Koren Ivančević Faculty of Graphic Arts, University of Zagreb, Zagreb, Croatia diana.bratic@grf.unizg.hr Abstract—According to the OpenType standard, variable font is a single font file which contains all style versions of one typeface family, as opposed to standard font families that use different files for each style version. Therefore, they are suitable for use on web because one file with all the necessary typeface styles is significantly smaller in size than classic families with multiple files. This shortens the font loading time, which enables wide range of typographical use on various devices. This paper investigates the readability of handwritten variable fonts in a responsible web environment on four screen sizes: extra small, small, medium, and large. Seven letter cuts were made from basic monoline handwritten font: thin, ultra-light, light, regular, semi-bold, bold, and ultra-bold. This paper presents model of readability evaluation using the fuzzy logic based postpro- cessing method for segmentation values related to evaluation criteria. Linguistic variable’s values are used to rate readability level against each of the criteria i.e., attributes. Prototype of a variable handwritten fonts are tested in responsive web environment, using CSS technology. The results show that readability evalua- tion has measurable output because the score combine various numeral factors affecting the readability of particular letter cut. Also, the results indicate that this type of font is not suitable for displays on extra small and medium screens such as mobile phones and tablets. That knowledge opens advanced possibilities to designers when designing for web because variable handwritten fonts are rela- tively simple, uniform and easily manageable. Using of proposed model in short time can show readability level of some font type on a new web. Keywords—handwritten variable font, screen size, responsive web, text readability, fuzzy logic 1 Introduction Today users of internet expect customized multimedia content. Thus, a space was opened up to generate a model for creating intelligent content in real time. This con- tent must also be optimized to be displayed equally on all devices. To achieve this, it is necessary to integrate personalization technologies that operate on the principle of ontology and semantically based information. iJIM ‒ Vol. 16, No. 11, 2022 121 https://doi.org/10.3991/ijim.v16i11.31137 mailto:diana.bratic@grf.unizg.hr Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Web typography takes important place in this process because it takes the place between design and front-end development. This is a tool to put information into the shape, content ready to be consumed [18]. So, typography needs a special attention, just like other parts of web design process and the main goal is to improve web typography. One way is to use variable fonts in develop and design. According to the newest version of OpenType standard [22] variable font is a single font file which contains all style versions of one typeface family, as opposed to standard font families that use different files for each style version. This characteristic is advan- tageous in web use, because of the fact that one file with all typeface styles (bold, italic, regular etc.) is significantly smaller in size than classic families with multiple files. The time needed for loading fonts is shorter which enables wide range of typographical use on various devices. Therefore, space was opened up for extensive research on how to integrate the optimization and personalization of multimedia content into a responsive web envi- ronment. In the first part of the research, the emphasis is on typography because text is still the dominant element of a website. However, a step forward has been made and a variable handwriting font that is not so common in web design has been tested. Respon- siveness from the aspect of font cut and font size was observed. Readability from the aspect of a font size is described in the paper “Fuzzy Logic-Based Evaluation Model of Handwritten Font Sizes Readability”. The next step in the research will include static images, as well as animations and video elements. The results of this extensive research will contribute to the easier creation of optimized personalized content in a responsive environment that requires the creation of a website using a single code for all devices. All of the above is far more complex if it is to be placed in the context of personaliz- ing content for the user. Therefore, in order to create and test a technological model that is capable to create intelligent and readable content for responsive environment it was necessary to study two different segments of the past research. The works that guided this research are described below. 2 Literature review A lot of technical details affect the responsiveness of the web, but from the user’s perspective, the key to describing a responsive web site is that things can change size and move around to fit on the screen [24]. When it comes to images it is a much smaller problem than when it comes to text because there is a problem of readability of all letter forms on different devices. There are numerous studies of a web text readability. Read- ability is directly linked to web page layout and font type, formal clarity, simplicity, and proportions, especially unusual types of fonts such as handwritten forms. Handwritten fonts are neglected when it comes to web design and variable fonts. Many authors investigated responsive web and technical variable fonts. But there are few papers in which these two key elements are related and placed in the function of readability of the text. It has become challenging to keep web sites functional and user friendly in a wide range of devices. Responsive web design steps up to facilitate the necessary support to overcome dose challenges [21]. Therefore, responsive website has to provide an optimal 122 http://www.i-jim.org Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic viewing experience without resizing, zooming, or scrolling across most devices [10]. Responsively designed web pages adjust their layout according to the viewport width of the device in use. For this purpose, some tools detecting common responsive layout failure. Some of them are VISER and REDECHECK [5]. However, it is better to avoid these mistakes when designing the web by choosing the right structural elements. The automated approach presented by Walsh and co-authors [34] certainly contributes to providing a good user experience on variety of devices to browse the web and helps to web developers design web pages so that they dynamically resize and rearrange content to best fit the dimensions of a device’s screen. They also explored two different usage scenarios for tools for supporting the detection of failures in layout on a dif- ferent devices [33]. The group of authors [12] used artificial intelligence technology to develop of multi-language interactive device for visual impairment person. A few testing have been made to test the functionality and accuracy of the reading device. The testing is functionality, performance test and usability test. Therefore, Harjoseputro, Handrarkho and Adie [11] according, the performance on mobile devices and problems resulting from the limitation of computation resource on the platform that proposed a 2-tier architecture by placing the mobile app as a client that invokes a Javanese letters classifier service, which is based on CNN, and implemented in the webserver through the Application Program Interface (API). Also, responsive web design allows applications for adapting dynamically to diverse screen proportions and orientations beside screen sizes [6]. It is preferable that the browser makes dynamic adjustments to the way the web content is rendered based on the context of usage. The adjustments include font size, color and contrast, and web page layout. The system makes this adjustments constantly by monitoring the user’s usage patterns and interactions with the device and calculating and applying the changes via a feedback mechanism [31]. Huelves and Marco [15] presented a model that lays the foundations for providing variable fonts with a semantic use in graphic interfaces, establishing a relationship between typography and the data collected by different sensors. Jameel et al. [17] demonstrated that responsive websites architecture could keep up the user encoun- ter nature of webpages home usefulness, content coherence, and satisfaction utilizing site. Seixas et al. [28] also emphasized that nowadays users have multiple devices to access a web. So, they propose the XIS-Web technology as a model-driven approach to focused on the development of responsive web applications. Turan and Sahin [32] also proposed criteria necessary for choosing a powerful and effective framework for designing a responsive web. Shahzad [29] made a review of the state-of-the-art technologies, third-part libraries, and frameworks for quick interactive development which increases developers’ effi- ciency to quickly write responsive content. Many other authors have addressed the issue of responsiveness and readability on various devices in their works, and some of them are Almeida and Monteiro [4], Boss and Teague [7], Perakakis and Ghinea [23], Pinandito et al. [25], Lee and Noh [19], Leiva [20], Sittisaman and Panawong [30] etc. Also, many authors have linked fuzzy logic and some quality criteria testing, and some of them are Honamore and Rath [13], Garcia-Plaza et al. [9], Agusta et al. [2], Agrawal et al. [1], Rekik [26] etc. iJIM ‒ Vol. 16, No. 11, 2022 123 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Ahmad and Hamid [3] in their study conducted a usability evaluation on multi-platform applications according to usability attributes defined in ISO 9241-11 standard: efficiency, effectiveness, and satisfaction. The evaluation was conducted using the think-aloud protocol on both platforms, web and mobile applications, and fifty participants. The results discovered the suitability of think-aloud protocol on multi-platform usability evaluation and revealed some usability issues. 3 Methodology 3.1 Problem formulation Readability is crucial part of web usefulness and is closely related to suitability, clarity and resolution which are other components of the typography. Traditional meth- ods of readability evaluation do not provide precision readability score compared to data-driven methods. Artificial intelligence methods offer cheaper and faster evaluation process with easier results analysis. From this reason, space has opened up to use arti- ficial intelligence to develop a model of readability evaluation that is based on math- ematical principles, linguistically understandable, quick, precise, and allowing to get single-value score. It is important to point out that evaluating the readability of text in a responsive web environment is only the first step in modeling optimized and person- alized web content for each individual user and on different devices. In this paper the same methodology was used as in the paper “Fuzzy Logic-Based Evaluation Model of Handwritten Font Sizes Readability” [8]. 3.2 Model of fuzzy readability evaluation Fuzzy logic principle and model definition. Fuzzy logic is an artificial intelligence method which represents a new approach to the problems of managing complex systems, so as a fuzzy expert inference system it is suitable for solving the problem of readability detection in accordance with the needs of users of different devices. It is convenient for the reason that it approaches the measurement of things by scaling based on scales. Unlike classical logic, which uses only two values, 1 (true) and 0 (false), fuzzy logic increases the range of values to all real numbers between 1 and 0. The standard logistic function is defined as: S x x ( ) � � � 1 1 e (1) which has the following symmetry property: S(x) + S(–x) = 1 (2) 124 http://www.i-jim.org Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic and from this it follows that: (S(x) + S(–x))·(S(y) + S(–y))·(S(z) + S(–z)) = 1 (3) General fuzzy model consists of the following: a few crisp input values, fuzzification, fuzzy inference engine, defuzzification, and one crisp output value. Inputs are numer- ical values which are fuzzified by fuzzifier meaning that the inputs are represented as fuzzy logic. This process is known as the fuzzification. Secondly, Refined rules and the fuzzification results are collectively fed to the fuzzy reasoning system. The rules where the conditions are satisfied for the input are fired. Further, the application of correlation, inference, and defuzzification is done. A degree of membership describing the results is obtained and converted back into the crisp value and this process is known as defuzzi- fication [16]. In addition to the above, a flow diagram can be generated (Figure 1). Problem specification and definition of linguistic variables Determining the fuzzy set Determining the fuzzy rules Encryption of fuzzy set, fuzzy rules, and procedures for performing fuzzy interference in expert system System evaluation and adjustment Fig. 1. Fuzzy-logic flow diagram Model of fuzzy readability evaluation is based on generic model with set of criteria. These criteria are selected according to the characteristics of the target investigation environment (Figure 2). So, the methodology of fuzzy readability evaluation provides guideline how to perform this process and finally obtain readability score i.e., under- standable results. Hub and Zatloukal [14] had a similar approach when analyzing the usability of the web. The model of fuzzy readability evaluation is a multi-layer process of obtaining readability score and the key aspect of accuracy and significance of the fuzzy readability evaluation model is the proper determination of the criteria. The model therefore has multiple inputs and single output. In next step it is necessary to define the empirical scale that explains which values represent the evaluation expressions. This is done by inquiring a group of testing users that evaluates the readability both by using word expression and by numeric score of each criteria [14]. iJIM ‒ Vol. 16, No. 11, 2022 125 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Proposed Method Results Defining Criteria Content Analysis Evaluation Criteria Fuzzy Evaluator Fig. 2. Model of readability evaluation Object of the evaluation. This paper explores readability of prototype of a variable font tested in responsive web environment, using CSS technology (Figure 3) on the same way as a pervious paper “Fuzzy Logic-Based Evaluation Model of Handwritten Font Sizes Readability”. The principle of a variable font lies in fact that variable font is a single font file which contains all style versions of one typeface family. Standard font families use different files for each style version which is more complex. Also, variable fonts are suitable for use on web because one file with all the necessary typeface styles is significantly smaller in size than classic families with multiple files. This shortens the font loading time, which enables wide range of typographical use on various devices which is the basis of responsive web design. Regarding Rutter [27] testing typography prototype should be a single web page that preferably consists of some real content and be tested in different con texts: different devices, different screens, different reading distances. Therefore, a test website was cre- ated with a variable handwritten font in seven letter cuts: thin, ultra-light, light, regular, bold, semi-bold, and ultra-bold (Figure 3). Typography is the foundation of design by starting with the fundamen tals, the content and the typography, and adding hierarchy before layout and color. For this purpose, it is important to test the cut type of the char- acters. Selected font cut types were used for the block text. 126 http://www.i-jim.org Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Fig. 3. Tested variable handwritten font in seven letter cuts Web content has to be flexible and adaptable to different screens and devices which is provided by responsive design. Four devices with four different screen sizes were used in this study as shown in the Table 1. iJIM ‒ Vol. 16, No. 11, 2022 127 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Table 1. Max screen width of tested devices XS < 768 px SM ≥ 768 px MD ≥ 992 px LG ≥ 1200 px Extra small devices (mobile phones) Small devices (tablets) Medium devices (desktops) Large devices (desktops, TV screens) Evaluation criteria. As stated in chapter 3.1, the first step was to determine the prob- lem input and output variables and their range. In this study, these were one set of seven main linguistic variables, text readability in seven letter cuts: thin, ultra-light, light, regular, bold, semi-bold, and ultra-bold (Table 2). Typography readability, typography suitability, typography clarity, and typography resolution could be in one word named text usability. Text usability is directly related to the dynamism. Too much consistency leads to a monotonous design while too much contrast leads to chaotic noise. One way to balance the contrast and consistency is to create a regular typographical dynamism. Table 2. Evaluation criteria No. Evaluation Criteria 1 text readability letter thin cut 2 text readability letter ultra-light cut 3 text readability letter light cut 4 text readability letter regular cut 5 text readability letter semi-bold cut 6 text readability letter bold cut 7 text readability letter ultra-bold cut For this purpose, the Likert scale was used. The questionnaire consisted of four questions. Users have been evaluated text by assigning values from 1 to 7, where 1 means that user strongly disagree, and 7 that user strongly agree (Table 3). Table 3. Validation scale No. Criteria/Scale 1 Text in thin cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 2 Text in ultra-light cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 3 Text in light cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 4 Text in regular cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 5 Text in semi-bold cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 6 Text in bold cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 7 Text in ultra-bold cut on Web site is readable: Strongly disagree 1 2 3 4 5 6 7 Strongly agree 128 http://www.i-jim.org Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic 4 Results The primary objective of the study is to perform readability evaluation of web text on four tested devices (WTOTD). The results were validated by evaluation set of criteria affecting the readability of web text. The main goals of this study have to obtain read- ability score of each criteria and due to analyzed results make appropriate conclusions which could lead to better understand responsive environment design, ultimately in the function of content personalization. In process of defuzzification two methods were used: Center of Gravity Method (COG), and Centre of Sums Method (COS). Other possible methods are Centre of Largest Area (CLA), Weighted Center of Area (WCA), Weighted Average Method (WAM), Maxima Methods (MM) etc. [14]. Center of Gravity (COG) method is calculated using a formula: X x x x i n i i i n i � � � � � � � 1 1 � � ( ) ( ) (4) Centre of Sums (COS) method is calculated using a formula: X A x x i N i l i N i � � � � � � � 1 1 �( ) (5) Centre of Sums (COS) method was used as a control method. Five users evaluated readability of displayed web text on four different devices regarding seven letter cuts. Users were not classified by age, sex, education level or other criteria. For two tested variables (thin and ultra-light letter cut) scores are below average value (Tables 4 and 5). For other tested variables there is no one score below average value (Tables 6–10). Also is visible that the average scores of two different defuzzifica- tion methods are very similar. COS method produced slightly lower scores than COG method. Table 4. Results by tested devices/thin cut Score WTOTD COG COS 1st XS devices 47.91 44.89 2nd LG devices 44.87 44.47 3rd MD devices 43.13 41.19 4th SM devices 40.24 42.32 iJIM ‒ Vol. 16, No. 11, 2022 129 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Table 5. Results by tested devices/ultra-light cut Score WTOTD COG COS 1st XS devices 47.41 47.12 2nd MD devices 46.29 40.92 3rd SM devices 43.89 34.78 4th LG devices 41.56 36.28 Table 6. Results by tested devices/light cut Score WTOTD COG COS 1st XS devices 55.21 43.76 2nd MD devices 54.94 55.19 3rd SM devices 52.63 46.12 4th LG devices 50.29 48.25 Table 7. Results by tested devices/regular cut Score WTOTD COG COS 1st XS devices 68.78 59.12 2nd LG devices 68.43 53.64 3rd MD devices 60.31 61.33 4th SM devices 57.98 52.19 Table 8. Results by tested devices/semi-bold cut Score WTOTD COG COS 1st XS devices 71.34 68.46 2nd LG devices 69.47 70.23 3rd MD devices 68.91 56.24 4th SM devices 66.41 55.29 Table 9. Results by tested devices/bold cut Score WTOTD COG COS 1st XS devices 81.28 82.46 2nd LG devices 80.74 74.19 3rd MD devices 73.49 77.92 4th SM devices 70.66 60.28 130 http://www.i-jim.org Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Table 10. Results by tested devices/ultra-bold cut Score WTOTD COG COS 1st XS devices 81.36 74.24 2nd LG devices 79.92 70.77 3rd MD devices 74.21 75.26 4th SM devices 70.43 68.33 Further SUS score was calculated. SUS score or System Usability Scale score giving a global view of subjective assessments of system usability in order that users evalu- ate the fact by choosing the value of scale in simple questionnaire. SUS score is not percentage, it calculates by the formula based on several different aspects. SUS score >80.30 means excellent adjective rating, 68.00–80.30 good adjective rating, 68.00 okay adjective rating, and 51.00–68.00 poor adjective rating (Table 11). Table 11. Results by tested devices/thin cut Score WTOTD Evaluation No. COG SUS 1st 2nd 3rd 4th 5th 6th 7th User 1 XS devices 1 2 3 5 6 7 7 81.43 93.00 SM devices 1 1 2 2 3 4 5 46.39 54.00 MD devices 1 1 2 3 4 6 5 51.23 66.00 LG devices 1 1 2 4 5 7 6 62.92 78.00 User 2 XS devices 1 2 2 4 5 6 7 74.68 81.00 SM devices 1 1 2 2 4 4 5 47.21 57.00 MD devices 1 1 2 3 5 6 5 58.34 69.00 LG devices 1 1 2 3 5 6 6 66.29 72.00 User 3 XS devices 1 1 3 4 6 7 6 71.89 84.00 SM devices 1 1 2 3 4 4 5 48.23 60.00 MD devices 1 1 2 3 4 6 6 57.65 69.00 LG devices 1 1 2 4 5 7 6 70.24 78.00 User 4 XS devices 1 2 4 4 5 7 7 79.63 90.00 SM devices 1 1 3 4 4 4 6 61.85 69.00 MD devices 1 1 2 4 5 5 5 60.78 69.00 LG devices 1 1 2 3 3 4 4 42.19 54.00 User 5 XS devices 1 2 3 5 6 7 6 77.92 87.00 SM devices 1 2 3 4 4 4 5 62.85 69.00 MD devices 1 2 2 3 4 5 5 51.49 66.00 LG devices 1 1 2 4 4 6 5 59.08 69.00 The results of chosen WTOTDs evaluated by both methods show very good level of consistency as in a previous font size readability study. Some different might be caused by lover precision of the SUS score method or by user’s biological predispositions. This point of view could expand this research. iJIM ‒ Vol. 16, No. 11, 2022 131 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic Given results shows the higher score for text written with handwritten font in semi- bold, bold, and ultra-bold letter cut displayed on extra small or large devices. The lower score is achieved for text written with thinner letter cuts of tested handwritten font displayed on all tested devices. Finally, tested monoline handwritten font is not suitable for block text on web sites although it is often part of logos. Some bold letter cuts could be used for emphasis or short forms, but not in responsive environment. 5 Conclusion Developing and designing a website for a responsive environment is in itself a demanding process. When content personalization and variable fonts, which are an increasingly common design element, are placed in the same context, there are prob- lems with readability on different devices. This is where artificial intelligence comes into play in a way that provides a model for clusters of similar data that can be used to optimize and customize content for each user and each device as well. Higher responsiveness will increase readability of web text, and this is very important fact for handwritten fonts that are not so common in web design. Handwritten font readability model proposed in this paper can be recommended for web prototype testing because gives the perfect opportunity to properly test web design before the launch of web site. The same analogy can be used for other elements of web site such as photos, animations, colors, content management system elements etc. Also, the results of this research can be significant for creating content for users with different accessibility characteristics such as older age groups, users with visual impairments and dyslexia as it facilitates their consumption of web content because this type of font is not suitable for displays on extra small and medium screens such as mobile phones and tablets. 6 Acknowledgment This paper was supported by the Financial Support of University of Zagreb “Optimization and personalization of multimedia content using artificial intelligence”. 7 References [1] Agrawal, A. et al. (2020). A Unified Fuzzy-Based Symmetrical Multi-Criteria Decision-Making Method for Evaluating Sustainable-Security of Web Applications. Symmetry, 12(3), pp. 1–22. https://doi.org/10.3390/sym12030448 [2] Agusta, S. et al. (2018). Effort Estimation Development Model for Web-based Mobile Appli- cation Using Fuzzy Logic. Telkomnika, 16(5), pp. 2082–2090. https://doi.org/10.12928/ telkomnika.v16i5.6561 [3] Ahmad, N. A. N. and Hamid, N. I. M. (2021). Performing Usability Evaluation on Multi- Platform Based Application for Efficiency, Effectiveness and Satisfaction Enhancement. International Journal of Interactive Mobile Technologies, 15(10), pp. 103–117. https://doi. org/10.3991/ijim.v15i10.20429 132 http://www.i-jim.org https://doi.org/10.3390/sym12030448 https://doi.org/10.12928/telkomnika.v16i5.6561 https://doi.org/10.12928/telkomnika.v16i5.6561 https://doi.org/10.3991/ijim.v15i10.20429 https://doi.org/10.3991/ijim.v15i10.20429 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic [4] Almeida, F. and Monteiro, J. (2017). The Role of Responsive Design in Web Development. Webology, 14(2), pp. 48–65. [5] Althomali, I. et al. (2019). Automatic Visual Verification of Layout Failures in Responsively Designed Web Pages. Proceedings of IEEE 12th Conference on Software Testing, Vali- dation, and Verification (ICST 2019). Xian, China, pp. 183–193. https://doi.org/10.1109/ ICST.2019.00027 [6] Bernacki, J. et al. (2016). Responsive Web Design: Testing Usability of Mobile Web Applications. Proceedings of the 8th Asian Conference on Intelligent Information and Database Systems (ACIIDS 2016). Da Nang, Vietnam, pp. 257–269. https://doi. org/10.1007/978-3-662-49381-6_25 [7] Boss, S. and Teague, J. C. (2017). The New Web Typography: Create a Visual Hierarchy with Responsive Web Design, Boca Raton, Florida, USA: Taylor & Francis Group, pp. 59–97. [8] Bratić, D. et al. (2021). Fuzzy Logic-Based Evaluation Model of Handwritten Font Sizes Readability. Proceedings of the 3rd International Conference on Applied Research in Science, Engineering and Technology (ARSETCONF 2021). Vienna, Austria, pp. 1–12. [9] Garcia-Plaza, A. P. et al. (2017). Using Fuzzy Logic to Leverage HTML Markup for Web Page Representation. IEEE Transactions on Fuzzy Systems, 25(4), pp. 919–933. https://doi. org/10.1109/TFUZZ.2016.2586971 [10] Giurgiu, L. and Mosteanu, D. (2019). Quality in Web Design – Trends and responsiveness techniques. Quality-Access to Success, Vol. 20, pp. 335–340. [11] Harjoseputro, Y., Handrarkho, Y. D. and Adie, H. T. R. (2019). The Javanese Letters Classifier with Mobile Client-Server Architecture and Convolution Neural Network Method. International Journal of Interactive Mobile Technologies, 13(12), pp. 67–80. https://doi. org/10.3991/ijim.v13i12.11492 [12] Harum, N. et. al. (2021). A Development of Multi-Language Interactive Device using Artificial Intelligence Technology for Visual Impairment Person. International Journal of Interactive Mobile Technologies, 15(19), pp. 79–92. https://doi.org/10.3991/ijim. v15i19.24139 [13] Honamore, S. and Rath, S. K. (2016). A Web Service Reliability Prediction using HMM and Fuzzy Logic models. Proceedings of the 6th International Conference on Advances in Computing and Communications (ICACC 2016). Cochin, India, pp. 886–892. https://doi. org/10.1016/j.procs.2016.07.273 [14] Hub, M. and Zatloukal, M. (2010). Model of Usability of Web Portals Based on the Fuzzy Logic. WSEAS Transactions on Information Science and Applications, 7(4), pp. 1–10. [15] Huelves, I. and Marco, L. (2019). Sensor Variable Font: A Model Based on IoT to Give Semantic Use to Variable Typography in Graphic Interfaces. Proceedings of the 3rd International Conference on Design and Digital Communication (DIGICOM 2019). Barce- los, Portugal, pp. 389–398. [16] Iram, N. et al. (2018). Web Content Readability Evaluation Using Fuzzy Logic. Proceedings of International Conference on Advancements in Computational Sciences (ICACS 2018). Lahore, Pakistan, pp. 1–8. https://doi.org/10.1109/ICACS.2018.8333281 [17] Jameel, A. et al. (2018). The Users Experience Quality of Responsive Web Design on Multiple Devices. Proceedings of the 2nd International Conference on Future Networks and Distributed Systems (ICFNDS 2018). Amman, Jordan, pp. 1–6. https://doi. org/10.1145/3231053.3234632 [18] Latin, M. (2017). Typography for a Better Web, London, UK: Matej Latin, pp. 8–10; 133–184. [19] Lee, H. J. and Noh, H. W. (2018). A Study on Mobile-first Based Responsive Web Design. Journal of Advanced Research in Dynamical and Control System, 10(14), pp. 344–351. iJIM ‒ Vol. 16, No. 11, 2022 133 https://doi.org/10.1109/ICST.2019.00027 https://doi.org/10.1109/ICST.2019.00027 https://doi.org/10.1007/978-3-662-49381-6_25 https://doi.org/10.1007/978-3-662-49381-6_25 https://doi.org/10.1109/TFUZZ.2016.2586971 https://doi.org/10.1109/TFUZZ.2016.2586971 https://doi.org/10.3991/ijim.v13i12.11492 https://doi.org/10.3991/ijim.v13i12.11492 https://doi.org/10.3991/ijim.v15i19.24139 https://doi.org/10.3991/ijim.v15i19.24139 https://doi.org/10.1016/j.procs.2016.07.273 https://doi.org/10.1016/j.procs.2016.07.273 https://doi.org/10.1109/ICACS.2018.8333281 https://doi.org/10.1145/3231053.3234632 https://doi.org/10.1145/3231053.3234632 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic [20] Leiva, L. A. (2018). Responsive Text Summarization. Information Processing Letters, vol. 130, pp. 52–57. https://doi.org/10.1016/j.ipl.2017.10.007 [21] Moyeen, M. A. et al. (2016). An Automatic Layout Faults Detection Technique in Responsive Web Pages Considering JavaScript Defined Dynamic Layouts. Proceedings of the 3rd International Conference on Electrical Engineering and Information Communication Technology (ICEEICT 2016). Dhaka, Bangladesh, pp. 1–5. https://doi.org/10.1109/ CEEICT.2016.7873146 [22] OpenType (2021). Microsoft Typography Documentation: OpenType Specification. Available: https://docs.microsoft.com/en-us/typography/opentype/spec/ [23] Perakakis, E. and Ghinea, G. (2017). Smart Enoughfor the Web? A Responsive Web Design Approach to Enhancing the User web Browsing Experience on Smart TVs. IEEE Transactions on Human-Machine Systems, 47(6), pp. 860–872. https://doi.org/10.1109/ THMS.2017.2726821 [24] Peterson, L. (2014). Learning Responsive Web Design, Sebastapol, Canada: O’Reilly Media, pp. 3–17. [25] Pinandito, A. et al. (2017). Analysis of Web Content Delivery Effectiveness and Effi- ciency in Responsive Web Design Using Material Design and Guidelines and User Centered Design. Proceedings of 2017 International Conference on Sustainable Infor- mation Engineering and Technology (SIET 2017). Batu, Indonesia, 435–441. https://doi. org/10.1109/SIET.2017.8304178 [26] Rekik, R. (2021). An Integrated Fuzzy ANP-TOPSIS Approach to Rank and Assess E-Commerce Web Sites. Advances in Intelligent Systems and Computing, vol. 1179, pp. 197–209. https://doi.org/10.1007/978-3-030-49336-3_20 [27] Rutter, R. (2017). Web Typography: A Handbook for Designing Beautiful and Effective Responsive Typography, Brighton, UK: Ampersand Type, pp. 57–64; 195–201. [28] Seixas, J. et al. (2019). A Model-Driven Approach for Developing Responsive Web Apps. Proceedings of the 14th International Conference on Evaluation of Novel Approaches to Software Engineering (ENASE 2019). Heraklion, Greece, pp. 257–264. https://doi. org/10.5220/0007678302570264 [29] Shahzad, F. (2017). Modern and Responsive Mobile-enabled Web Applications. Proceedings of the 14th International Conference on Mobile Systems and Pervasive Computing (MOBISPC 2017). Leuven, Belgium, pp. 410–415. https://doi.org/10.1016/j. procs.2017.06.105 [30] Sittisaman, A. and Panawong, N. (2019). A Development of Real-time Tourism Informa- tion Recommendation System for Smart Phone Using Responsive Web Design, Spatial and Temporal Ontology. International Journal of Engineering and Advanced Technology, 8(5), pp. 994–999. [31] Sunkara, S. et al. (2014). Responsive, Adaptive and User Personalized Rendering on Mobile Browsers. Proceedings of International Conference on Advances in Computing, Communications and Informatics (ICACCI 2014). New Delhi, India, pp. 259–265. https:// doi.org/10.1109/ICACCI.2014.6968602 [32] Turan, B. O. and Sahin, K. (2017). Responsive Web Design and Comparative Analysis of Development Frameworks. Turkish Online Journal of Design Art and Communication, 7(1), pp. 110–121. https://doi.org/10.7456/10701100/010 [33] Walsh, T. A. et al. (2017). ReDeCheck: An Automatic Layout Failure Checking Tool for Responsively Designed Web Pages. Proceedings of International Symposium on Software Testing and Analysis (ISSTA 2017). Santa Barbara, California, USA, pp. 360–363. https:// doi.org/10.1145/3092703.3098221 134 http://www.i-jim.org https://doi.org/10.1016/j.ipl.2017.10.007 https://doi.org/10.1109/CEEICT.2016.7873146 https://doi.org/10.1109/CEEICT.2016.7873146 https://docs.microsoft.com/en-us/typography/opentype/spec/ https://doi.org/10.1109/THMS.2017.2726821 https://doi.org/10.1109/THMS.2017.2726821 https://doi.org/10.1109/SIET.2017.8304178 https://doi.org/10.1109/SIET.2017.8304178 https://doi.org/10.1007/978-3-030-49336-3_20 https://doi.org/10.5220/0007678302570264 https://doi.org/10.5220/0007678302570264 https://doi.org/10.1016/j.procs.2017.06.105 https://doi.org/10.1016/j.procs.2017.06.105 https://doi.org/10.1109/ICACCI.2014.6968602 https://doi.org/10.1109/ICACCI.2014.6968602 https://doi.org/10.7456/10701100/010 https://doi.org/10.1145/3092703.3098221 https://doi.org/10.1145/3092703.3098221 Paper—Readability Evaluation of Variable Handwritten Fonts on Different Screen Sizes Using Fuzzy Logic [34] Walsh, T. A. et al. (2020). Automatically Identifying Potential Regressions in the Layout of Responsive Web Pages. Software Testing Verification and Reliability, 30(6), pp. 1–46. https://doi.org/10.1002/stvr.1748 8 Authors Diana Bratić is an Assistant Professor at Department of Printing Processes on the Faculty of Graphic Arts, University of Zagreb, Croatia. Her field of scientific research includes informatics, AI algorithms, process optimization, multimedia optimization and personalization, multimedia tools. E-mail: diana.bratic@grf.unizg.hr Nikolina Stanić Loknar is an Assistant Professor at Department of Computer Graph- ics and multimedia systems on the Faculty of Graphic Arts, University of Zagreb and Libertas University Zagreb, Croatia. Her field of scientific research includes informatics, typography, computer and security graphics. E-mail: nikolina.stanic.loknar@grf.unizg.hr Tajana Koren Ivančević is an Assistant Professor at Department of Computer Graphics and Multimedia Systems on the Faculty of Graphic Arts, University of Zagreb, Croatia. Her field of scientific research includes web technologies, computer graphics, multimedia, steganography. E-mail: tajana.koren.ivancevic@grf.unizg.hr Article submitted 2022–02–24. Resubmitted 2022–03–27. Final acceptance 2022–03–29. Final version published as submitted by the authors. iJIM ‒ Vol. 16, No. 11, 2022 135 https://doi.org/10.1002/stvr.1748 mailto:diana.bratic@grf.unizg.hr mailto:nikolina.stanic.loknar@grf.unizg.hr mailto:tajana.koren.ivancevic@grf.unizg.hr