Abstract
The success of a web application is closely linked to its performance, which positively impacts user satisfaction and contributes to energy-saving efforts. Among the various optimization techniques, one specific subject focuses on improving the utilization of web fonts. This study investigates the impact of different font formats on client-side resource consumption, such as CPU, memory, load time, and energy. In a controlled experiment, we evaluate performance metrics using the four font formats: OTF, TTF, WOFF, and WOFF2. The results of the study show that there are significant differences between all pair-wise format comparisons regarding all performance metrics. Overall, WOFF2 performs best, except in terms of memory allocation. Through the study and examination of literature, this research contributes (1) an overview of methodologies to enhance web performance through font utilization, (2) a specific exploration of the four prevalent font formats in an experimental setup, and (3) practical recommendations for scientific professionals and practitioners.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
References
An, D.: Find out how you stack up to new industry benchmarks for mobile page speed. Think with Google-Mobile, Data and Measurement, p. 24 (2017)
Barashkov, A.: Advanced web font optimization techniques - Pixel Point (2022)
Beyer, D., Löwe, S., Wendler, P.: Reliable benchmarking: requirements and solutions. Int. J. Softw. Tools Technol. Transfer 21(1), 1–29 (2019). https://doi.org/10.1007/s10009-017-0469-y
Bhatia, S.K., Samal, A., Rajan, N., Kiviniemi, M.T.: Effect of font size, italics, and colour count on web usability. Int. J. Comput. Vision Robot. 2(2), https://doi.org/10.1504/IJCVR.2011.042271 (2011)
Brown, M.B., Forsythe, A.B.: Robust tests for the equality of variances. J. Am. Stat. Assoc. 69(346), 364–367 (1974). https://doi.org/10.1080/01621459.1974.10482955
Bühler, P., Schlaich, P., Sinner, D., Bühler, P., Schlaich, P., Sinner, D.: Schrifttechnologie. Typografie: Schrifttechnologie-Typografische Gestaltung-Lesbarkeit, pp. 73–84 (2017)
Cao, B., Shi, M., Li, C.: The solution of web font-end performance optimization. In: 2017 10th International Congress on Image and Signal Processing, BioMedical Engineering and Informatics (CISP-BMEI), pp. 1–5. IEEE, Shanghai (2017). https://doi.org/10.1109/CISP-BMEI.2017.8302083
Cohen, J.: Statistical Power Analysis for the Behavioral Sciences. Lawrence Erlbaum Associates (1988)
Cook, T.D., Campbell, D.T.: Quasi-Experimentation: Design & Analysis Issues for Field Settings. Houghton Mifflin, Boston (1979)
Dornauer, B., Felderer, M.: Energy-saving strategies for mobile web apps and their measurement: results from a decade of research. In: 2023 IEEE/ACM 10th International Conference on Mobile Software Engineering and Systems (MOBILESoft), pp. 75–86. IEEE, Melbourne, Australia (2023). https://doi.org/10.1109/MOBILSoft59058.2023.00017
Dornauer, B., Vigl, W., Felderer, M.: On the role of font formats in building efficient web applications - replication package (2023). https://doi.org/10.5281/zenodo.8391883
Firefox, M.: Firefox profiler (2023)
Froidure, N.: Ttf2woff2 - npm (2022)
Gray, S., Mallet, C.: AutoHotkey. https://www.autohotkey.com/
Grigorik, I.: Optimize WebFont loading and rendering (2020)
Gupta, P., M, I.O.P.: A survey of application layer protocols for internet of things. In: 2021 International Conference on Communication Information and Computing Technology (ICCICT), pp. 1–6. IEEE, Mumbai, India (2021). https://doi.org/10.1109/ICCICT50803.2021.9510140
Hackenberg, D., Ilsche, T., Schone, R., Molka, D., Schmidt, M., Nagel, W.E.: Power measurement techniques on standard compute nodes: a quantitative comparison. In: IEEE International Symposium on Performance Analysis of Systems and Software (ISPASS 2013), pp. 194–204. IEEE Computer Society (2013). https://doi.org/10.1109/ISPASS.2013.6557170
Hempenius, K., Pollard, B.: Best practices for fonts. Optimize web fonts for Core Web Vitals. (2022)
Hunt, P.: Adobe-fonts/source-sans: Sans serif font family for user interface environments (2023)
Johansen, M.B., Christensen, P.A.: A simple transformation independent method for outlier definition. Clin. Chem. Lab. Med. (CCLM) 56(9), 1524–1532 (2018). https://doi.org/10.1515/cclm-2018-0025
Kaleev, N.: 8 font loading strategies to improve your core web vitals (2022) (2023)
Kew, J., van Blokland, E., Leming, T.: WOFF file format 1.0. W3C recommendation, W3C (2012)
Li, Z.: Cross-Layer Optimization for Video Delivery on Wireless Networks. Princeton University, Doctor (2023)
Liew, Z.: The best font loading strategies and how to execute them | CSS-Tricks - CSS-Tricks (2021)
Lilliefors, H.W.: On the Kolmogorov-Smirnov test for normality with mean and variance unknown. J. Am. Stat. Assoc. 62(318), 399–402 (1967). https://doi.org/10.1080/01621459.1967.10482916
Ling, J., van Schaik, P.: The influence of font type and line length on visual search and information retrieval in web pages. Int. J. Hum Comput Stud. 64(5), 395–404 (2006). https://doi.org/10.1016/j.ijhcs.2005.08.015
McInerney, M.: Impallari/Raleway: Raleway fonts (2016)
Morey, R.: A guide to web font optimization (2022)
mozilla: Window: DOMContentLoaded event - web APIs MDN (2023)
mozilla: Window: Load event - web APIs MDN (2023)
Nielsen, J.: Designing Web Usability: The Practice of Simplicity. New Riders Publishing, USA (1999)
Olsson, M.: Font. CSS3 quick syntax reference: a pocket guide to the cascading style sheets language, pp. 67–70 (2019)
Ouyang, J., Luo, H., Wang, Z., Tian, J., Liu, C., Sheng, K.: FPGA implementation of GZIP compression and decompression for IDC services. In: 2010 International Conference on Field-Programmable Technology, pp. 265–268 (2010). https://doi.org/10.1109/FPT.2010.5681489
Pearrow, M.: Web Site Usability Handbook with Cdrom. Charles River Media Inc, USA (2000)
Rello, L., Pielot, M., Marcos, M.C.: Make it big! the effect of font size and line spacing on online readability. In: Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, pp. 3637–3648. CHI ’16, Association for Computing Machinery, New York, NY, USA (2016). https://doi.org/10.1145/2858036.2858204
Rodriguez Fernandez, M., Zalama Casanova, E., Gonzalez Alonso, I.: Review of display technologies focusing on power consumption. Sustainability 7(8), 10854–10875 (2015)
Semykin, V.: Ttf2woff2 - npm (2021)
Stein, B.: The 2022 Web Almanac: Fonts. Tech. Rep. 5, HTTP Archive (2022)
Tidwell, J., Brewer, C., Valencia, A.: Designing Interfaces: Patterns for Effective Interaction Design. O’Reilly Media, Sebastopol, CA, third edition edn. (2020)
Took, R.: Putting design into practice: Formal specification and the user interface. In: Formal Methods in Human-Computer Interaction, pp. 63–96. Cambridge University Press, USA (1990)
Ulanovsky, J.: Montserrat/Montserrat-SemiBold.otf at master \(\cdot \) JulietaUla/Montserrat \(\cdot \) GitHub (2021)
Van Riet, J., Malavolta, I., Ghaleb, T.A.: Optimize along the way: an industrial case study on web performance. J. Syst. Softw. 198, 111593 (2023). https://doi.org/10.1016/j.jss.2022.111593
Wagner, J.L., Marcotte, E.: Web Performance in Action: Building Fast Web Pages. Manning Publications Co, Shelter Island, NY (2017)
Willis, M., Hanna, J., Encinas, E., Auger, J.: Low power web: legacy design and the path to sustainable net futures. In: Extended Abstracts of the 2020 CHI Conference on Human Factors in Computing Systems, pp. 1–14. CHI EA ’20, Association for Computing Machinery, New York, NY, USA (Apr 2020). https://doi.org/10.1145/3334480.3381829
Wright, T.: History and technology of computer fonts. IEEE Ann. Hist. Comput. 20(2), 30–34 (1998). https://doi.org/10.1109/85.667294
Zhao, N., Cao, Y., Lau, R.W.: Modeling fonts in context: font prediction on web designs. In: Computer Graphics Forum. vol. 37, pp. 385–395. Wiley Online Library (2018)
Acknowledgment
This work has been supported by and done in the scope of the ITEA3-SmartDelta project, which has been funded by the Austrian Research Promotion Agency (FFG, Grant No. 890417).
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2024 The Author(s), under exclusive license to Springer Nature Switzerland AG
About this paper
Cite this paper
Dornauer, B., Vigl, W., Felderer, M. (2024). On the Role of Font Formats in Building Efficient Web Applications. In: Kadgien, R., Jedlitschka, A., Janes, A., Lenarduzzi, V., Li, X. (eds) Product-Focused Software Process Improvement. PROFES 2023. Lecture Notes in Computer Science, vol 14483. Springer, Cham. https://doi.org/10.1007/978-3-031-49266-2_8
Download citation
DOI: https://doi.org/10.1007/978-3-031-49266-2_8
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-031-49265-5
Online ISBN: 978-3-031-49266-2
eBook Packages: Computer ScienceComputer Science (R0)