Web Design and Typography

95% of web design is typography "¹. You may have heard Oliver Reichenstein, CEO and designer of iA (information Architects), a design firm that has designed information for many major clients such as NHK and Wikipedia, call on designers to do the same. Oliver Reichenstein, CEO and designer of iA (information Architects), a design firm that has designed information for many major clients including NHK and Wikipedia, has a message for designers. Typography is the technology that bridges the gap between writer and reader, enhancing the reading experience. After all, the majority of web content is composed of text.

In the vast amount of content available today, there is an increasing exposure to and absolute volume of text on display rather than in print. Web typography has historically received little attention as a specialized field, largely due to the limited number of fonts available and the narrower range of expression compared to print. As digital transformation is accelerating in various fields these days, technologies and theories related to digital design are constantly evolving. This article explores the history of typography and its growing potential in the digital age as technology continues to evolve.

What is typography?

A myriad of sensory and numerical techniques.

Typographic theory has long embraced certain laws and mathematical systems, such as numerology, the theory of proportion, and Corbusier's modulor. Typography began as a personal design intuition, gradually refined through countless examples and inherited wisdom into a specialized skill passed down through generations. Recently, academic research has accelerated as its principles have become explainable through numerical analysis.

The grid-based design process has provided designers with a means to be functional, logical, and aesthetically pleasing. Numerical aids bring order to design, support the authenticity of information, and are said to be effective in aiding comprehension and memory of textual content without visual burden for the reader ². On the other hand, while vision sometimes takes precedence over theory and numerical correctness in design, typographic theory can provide an opportunity to solve problems such as optical illusions.

.

.

Numerical ratio systems often become deified as the gold standard. However, it's crucial to create the best reading experience by drawing on the wisdom of predecessors, incorporating the latest typeface technology, and leveraging the designer's unique expressive strengths to create a cohesive whole.

Influence of typefaces.

The choice of typeface is an important part of the designer's job. Understanding the constraints of the medium and choosing a font that fits the context will give the text content a sense of temperature and inflection that will aid the reader's understanding. Let's compare web design to speech. If the venue corresponds to the web page and the text corresponds to the speech content, what impression does the speaker's attire give the audience?

Some suits are carefully tailored, others are ill-fitting and shabby; a T-shirt and denim may look clean and appropriate for the speaker, or modern and neat.

Beatrice Ward, an American typographic communicator, wrote in her 1955 essay "The Crystal Goblet" that

They will take a vivid interest in the clothes that the words wear. ."- Beatrice Warde
. "People who love ideas must have a love of words. They will take a vivid interest in the clothes that words wear .

Just as clothing can significantly influence first impressions, the choice of typeface can profoundly affect how writing is perceived. Typefaces are like clothes for words, and just as clothes express a person's taste, preference, and atmosphere, typefaces can also evoke a certain region or time period in the reader. From another perspective, the work of multisensory typographer Sarah Hindman has demonstrated that the choice of typeface can also affect the taste of a dish. For the same jelly beans, subjects perceived a sweeter taste when a rounded font was used for its descriptive text, while a hard and sharp font resulted in a sour taste. This effect is linked to the amygdala, where the relationship between impressions and sensations is stored and reinforced through experience. The choice of typeface does not merely convey information or affect sensation, feeling, or emotion; it can also stimulate preconceptions and memories of credibility, tone, and content.

.

The interface of letters

The production of letters has evolved from handwriting to woodblock printing, typography, manuscripts, and now digital fonts. Lettering is the basis of all typography, which has evolved from early plastic letters to abstract symbols, morphing into a variety of type forms, including Gothic, Italian and German Renaissance, and modern sans serif forms.

Calligraphy, derived from the Greek words 'calli' (beautiful) and 'graphein' (to write), has evolved as both an art form and technique through history and cultural shifts. Roman capitals" were used for Roman inscriptions, "uncials" were developed for ease of writing in manuscripts, "Carolingian" was created to unify typefaces, "Gothic" and "Blackletter" were used with small margins to write down more letters when paper was more expensive, "Italic" was used for faster writing, and "Gothic" and "Blackletter" were used to write in a more compact style when paper was more expensive. Although the invention of letterpress in the 15th century diminished the need for handwriting in everyday life, a recent study by John Hopkins University shows that writing down ideas by hand and keeping a diary are still important for our creativity and mental stability today. However, recent research at John Hopkins University shows that writing down ideas by hand and keeping a journal can contribute to our creativity and emotional stability even today.

Calligraphy and the Technology Industry

Apple founder Steve Jobs' fascination with the artistic posters of a calligraphy class he saw after dropping out of college and taking the class brought new creativity to the world of technology. In his famous 2005 Connecting the dots speech, Jobs said this about calligraphy, or rather typography

I learned about serif and san serif typefaces, about varying the amount of space between different letter combinations, about what makes great It was beautiful, historical, artistically subtle in a way that science can't capture, and I found it fascinating.
I learned about serif and sans serif styles, about the amount of space between different letter combinations, about what makes great typography great. I found it fascinating because it has a beautiful, historical, artistic subtlety that science can't capture, and I found it fascinating.

We rely on our vision for the majority of our learning. While we have a finite amount of time and vision, and can learn from others in the same community, examining the creative expressions of our predecessors across different industries can serve as a powerful catalyst for our own creativity. We are all creative, and we can all exercise and develop that creative muscle. Typography is the aesthetic expression we encounter most frequently in our daily lives, and it may be the art form that most powerfully stimulates our imagination.

Designing "reading".

As typeface designer Hermann Zapf asserted, "Typography is sometimes misunderstood as a form of personal self-expression." While typography is often viewed as an art form, it is fundamentally a craft with a clear purpose and practical use. Typography is rarely perceived as "a means of communicating information to a wide audience in the simplest and most efficient way.

Swiss typography master Emil Ruder, who influenced typographers and graphic designers around the world with his unique exploration of typography in terms of both function and form, defined typography in his 1967 book "Typography: A Guide to Typographic Form" ³ as Ruder defined typography as follows.

Typography has a clear obligation to convey information by means of letters. No discussion or consideration can free typography from this obligation. A printed work that cannot be read is a production that has lost its purpose.

Typography has been quantified and utilized on the basis of the sense of our ancestors, countless examples, and inherited wisdom. It is an expression based on technology, precision, and order, and is inherently practical rather than lofty and esoteric art. To facilitate the reader's exploration, categorization, and interpretation of information of interest, the designer selects the most appropriate typeface, keeping in mind the balance between the design components in which the text is incorporated and the page as a whole. Oliver Reichenstein, introduced at the beginning of this article, emphasizes that this process is the same not only for printed materials, but also for digital products. From customer reviews to reports, media articles, books, and posts on social networks, readability is the most important experience in the textual information that we constantly see from our own smartphones. Since the most important thing a user does in any web service is to read, Oliver recommends studying typography as a specialized field that brings together all the skills and know-how needed to convey information efficiently to others.

The knowledge that typographers have gained through their long history of research on the legibility of words and text as a whole, as well as the compositional theory of how the choice of typeface can change the overall impression of a design, are also important lessons for designers of today's digital products. There are a number of design guidelines that emphasize typography and optimize the overall graphic balance, such as the Human Interface Guideline⁴ proposed by Apple Inc. and Material Design⁵, a framework published by Google Inc. The following is a list of some of the most important design guidelines. As hardware specifications such as displays and expression technologies such as front-end engineering have become more sophisticated, typography has recently become a topic of active discussion among not only designers but also usability specialists, information architects, and various other professionals involved in web design. Typography has become a topic of active discussion among not only designers but also usability specialists, information designers, and other professionals involved in web design.

Impact of the Evolution of the Web

Adaptation to a medium that puts control in the reader's hands.

Internet technology, which began with packet communication research in the 1960s, continues to profoundly impact the field of typography today. Since the invention of the printing press, it has been easy for designers and printers to control the entire process of typography, from paper and type size standards to aesthetics and its use. The display of Web design was left to the browser and software used by each user, ultimately leaving the control to the user as the reader.

Although leaving control to the reader might sound negative, it actually offers a significant advantage by allowing users to tailor the interface to their specific needs, even within the same medium. For those who need a magnifying glass, standardized normal-size printed materials are not always the best interface, and in light of the fact that there have been situations where people have had trouble with large-size newspapers spread out on crowded trains, although they are less common today, the importance of digital typography is The importance of digital typography is even more apparent.

The role that typefaces play in the text that makes up the bulk of a website is not only to express the strength or weakness of the writer's message, such as highlighting a headline, but also to support the expression of the non-verbal impression of that message. Just as readers perceive different tones, textures, and textures in handwritten text depending on the writer, typeface selection on the Web also influences the impression readers receive and their receptiveness to the content. Compared to print, where the typeface is fixed, the Web often allows the reader to change the typeface from the browser or application settings. The user interface is becoming increasingly variable, not only in typeface selection but also in dark mode settings, and typography on the Web continues to evolve to adapt to such a highly scalable and flexible media environment.

Browsers and Web fonts

With the advent of CSS in the 1990s, Web typographers began to be able to create typographic environments, but few Web fonts were available, and even fewer browsers supported them. The history of Web fonts began in an environment where it was difficult for readers to distinguish between fonts due to the low screen resolution. While there were many restrictions for Web typographers, the advent of the Internet and the spread of the PC environment had a major impact on the spread of typography itself. Not only has it become easier to create new typefaces than in the traditional printing environment, but it has also become possible to offer a wide variety of fonts for sale to users around the world through online services.

Although CSS2 specifications were added in 1998 and Microsoft developed its own Web font format for Internet Explorer, it was not successful in spreading the technology. Later, DTP (DeskTop Publishing) became popular with the introduction of Apple's Machintosh, and in 2009, Safari released TTF (a web font developed by Apple and Micorosft, which is also supported by Windows as a standard, and is characterized by a beautiful curve independent of the scaling ratio). (TrueType) and OTF (OpenType, a highly functional font format developed jointly by Microsoft and Adobe Systems as an extension of TrueType), which led to the expansion of Web font support to other browsers as well. Web font support is expanding to other browsers as well.

In 2010, the Web Open Font Format (WOFF) was introduced as a standard, and many browsers quickly began supporting it, marking the beginning of the Web font era. WOFF makes it easier to manage the display of typography on the Internet by allowing target fonts to be displayed cleanly in the browser without the need to compress and install TTF and OTF files on the desktop. While font file sizes are relatively lighter than images or complex JavaScript code, they also affect page loading speeds when using multiple typefaces on a page, or when using typefaces with Opentype capabilities. 2014 saw the introduction of a new standard format, WOFF2, with improved compression technology. WOFF2 successfully reduces data volume by an average of 30% compared to WOFF ⁶.

In 2016, a new technology began to support OpenType Font Variations (commonly referred to as variable fonts), which allow a single font to diversify its expression as if it were multiple fonts.Adobe, Apple, Google, and Microsoft By simply devising the CSS definitions of font-weight, stretch, style, etc., you can create "regular", "light-condensed", "extra-condensed", "light-condensed", "extra-condensed", "light-condensed", "light-condensed", "light-condensed", and "extra-condensed" fonts. Light Condensed" and "Extra Bold Extended" can now be treated like separate fonts with a high degree of freedom. OpenType Font Variations not only reduces the file size, but also reduces the number of font requests to the server. OpenType Font Variations is a new technology that not only reduces file size, but also allows for highly precise and detailed adjustment of rendered fonts, making it possible to dynamically adapt to readers' ever-changing devices and environments. Two variable fonts are available from the engineer-friendly GitHub: the powerful and versatile Mona Sans, and Hubot Sans, whose more geometric accents have a technical and distinctive feel. ⁷

.

Typography and Collaboration

Not only web typography, but any typeface can deliver attractive and highly interesting value to the reader by combining it with text and various design components. Because Web design contains a greater amount of textual information than print, the use of unique typefaces can enhance the uniqueness of the overall design. An important aspect of successful Web design is to treat the text itself as a user interface. Web services that are loved by many users, such as Figma, Google, eBay, and YouTube, which were previously mentioned [in the article], have succeeded in combining a simple interface with a strong identity.

In web design, anyone can become a typographer by devising grids and CSS; CSS defines how to apply the dimensions, values, and proportions necessary for typography in printed materials to different viewports, so that anyone involved in the production of a typographic system Everyone involved in the production of the typographic system will be able to know. One of the achievements of CSS is that it has enabled new collaborations among directors, product managers, and engineers to express their knowledge of typography in a common language, which used to be limited to a few designers in print prototypes. This is one of the achievements of CSS.