Skip to main content

On the Role of Font Formats in Building Efficient Web Applications

  • Conference paper
  • First Online:
Product-Focused Software Process Improvement (PROFES 2023)

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.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 79.99
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 99.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

References

  1. 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)

    Google Scholar 

  2. Barashkov, A.: Advanced web font optimization techniques - Pixel Point (2022)

    Google Scholar 

  3. 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

    Article  Google Scholar 

  4. 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)

  5. 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

    Article  MATH  Google Scholar 

  6. Bühler, P., Schlaich, P., Sinner, D., Bühler, P., Schlaich, P., Sinner, D.: Schrifttechnologie. Typografie: Schrifttechnologie-Typografische Gestaltung-Lesbarkeit, pp. 73–84 (2017)

    Google Scholar 

  7. 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

  8. Cohen, J.: Statistical Power Analysis for the Behavioral Sciences. Lawrence Erlbaum Associates (1988)

    Google Scholar 

  9. Cook, T.D., Campbell, D.T.: Quasi-Experimentation: Design & Analysis Issues for Field Settings. Houghton Mifflin, Boston (1979)

    Google Scholar 

  10. 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

  11. 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

    Article  Google Scholar 

  12. Firefox, M.: Firefox profiler (2023)

    Google Scholar 

  13. Froidure, N.: Ttf2woff2 - npm (2022)

    Google Scholar 

  14. Gray, S., Mallet, C.: AutoHotkey. https://www.autohotkey.com/

  15. Grigorik, I.: Optimize WebFont loading and rendering (2020)

    Google Scholar 

  16. 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

  17. 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

  18. Hempenius, K., Pollard, B.: Best practices for fonts. Optimize web fonts for Core Web Vitals. (2022)

    Google Scholar 

  19. Hunt, P.: Adobe-fonts/source-sans: Sans serif font family for user interface environments (2023)

    Google Scholar 

  20. 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

    Article  Google Scholar 

  21. Kaleev, N.: 8 font loading strategies to improve your core web vitals (2022) (2023)

    Google Scholar 

  22. Kew, J., van Blokland, E., Leming, T.: WOFF file format 1.0. W3C recommendation, W3C (2012)

    Google Scholar 

  23. Li, Z.: Cross-Layer Optimization for Video Delivery on Wireless Networks. Princeton University, Doctor (2023)

    Google Scholar 

  24. Liew, Z.: The best font loading strategies and how to execute them | CSS-Tricks - CSS-Tricks (2021)

    Google Scholar 

  25. 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

    Article  Google Scholar 

  26. 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

    Article  Google Scholar 

  27. McInerney, M.: Impallari/Raleway: Raleway fonts (2016)

    Google Scholar 

  28. Morey, R.: A guide to web font optimization (2022)

    Google Scholar 

  29. mozilla: Window: DOMContentLoaded event - web APIs MDN (2023)

    Google Scholar 

  30. mozilla: Window: Load event - web APIs MDN (2023)

    Google Scholar 

  31. Nielsen, J.: Designing Web Usability: The Practice of Simplicity. New Riders Publishing, USA (1999)

    Google Scholar 

  32. Olsson, M.: Font. CSS3 quick syntax reference: a pocket guide to the cascading style sheets language, pp. 67–70 (2019)

    Google Scholar 

  33. 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

  34. Pearrow, M.: Web Site Usability Handbook with Cdrom. Charles River Media Inc, USA (2000)

    Google Scholar 

  35. 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

  36. Rodriguez Fernandez, M., Zalama Casanova, E., Gonzalez Alonso, I.: Review of display technologies focusing on power consumption. Sustainability 7(8), 10854–10875 (2015)

    Article  Google Scholar 

  37. Semykin, V.: Ttf2woff2 - npm (2021)

    Google Scholar 

  38. Stein, B.: The 2022 Web Almanac: Fonts. Tech. Rep. 5, HTTP Archive (2022)

    Google Scholar 

  39. Tidwell, J., Brewer, C., Valencia, A.: Designing Interfaces: Patterns for Effective Interaction Design. O’Reilly Media, Sebastopol, CA, third edition edn. (2020)

    Google Scholar 

  40. 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)

    Google Scholar 

  41. Ulanovsky, J.: Montserrat/Montserrat-SemiBold.otf at master \(\cdot \) JulietaUla/Montserrat \(\cdot \) GitHub (2021)

    Google Scholar 

  42. 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

    Article  Google Scholar 

  43. Wagner, J.L., Marcotte, E.: Web Performance in Action: Building Fast Web Pages. Manning Publications Co, Shelter Island, NY (2017)

    Google Scholar 

  44. 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

  45. Wright, T.: History and technology of computer fonts. IEEE Ann. Hist. Comput. 20(2), 30–34 (1998). https://doi.org/10.1109/85.667294

    Article  Google Scholar 

  46. 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)

    Google Scholar 

Download references

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

Authors

Corresponding author

Correspondence to Benedikt Dornauer .

Editor information

Editors and Affiliations

Rights and permissions

Reprints and permissions

Copyright information

© 2024 The Author(s), under exclusive license to Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

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)

Publish with us

Policies and ethics