Sans-Serifs: Fonts of The Modern Web by christopherdeang

TABLE OF CONTENTS PART 1: Proposal

PART 2: The History Of Webfonts

PART 3: Typeface Analysis

PART 4: The Importance Of Web Fonts

PART 5: Sans-Serifs On the Web

Part 6: Popular Sans-Serifs

Sources

PART ONE P R O P P O SA L

TOPIC PROPOSAL The Rise of The Sans-Serif I have chosen to study a rather broad topic for this project; websites. Surely, there are various types of websites that were specifically developed to cater towards a certain audience. However, upon my research I’ve noticed a reoccuring theme; sans-serifs.

The Top Choice They’re are simple, modern, and clean. Sans-serifs usually come in a font family of varying weights, which is good for creating a website hierarchy. While still being able to capture a visitors’ eye and hold onto strong readbility,

this is for sure a safe route to go. While this wasn’t the only style of type that I’ve stumbled upon, I can definitely say it was the most common one.

Research I’ve visited different kinds of websites to confirm my research. Whether it’s well-established or a start-up, marketing or informative, desktop or mobile sports related or sells clothes, each of these examples include the primary use of sans-serifs. 7

PART TWO TH E H I S TORY OF WE B FON TS

THE HISTORY OF WEBFONTS From Two, To Too Many Type wasn’t freely explored in our earlier ages of web technology. In the mid 1900’s, Georgia (serif) and veranda (sans-serif) were the main fonts being used along with a few other choices. It wasn’t until 1998 when CSS was introduced, creating the idea of implementing any font onto screen. This wasn’t successfully executed until about 10 years later. Now there are endless amounts of type that can be used for web design.

Sans-Serifs Surround The Web

In today’s websites, sans-serifs are being used more than ever, proving their effectiveness within the world of websites.

UX/UI design is all about creating a usable, accessible, and enjoyable web experience. In order to do that, the type must be executed with great intent. A hierarchy needs to be established and followed through with strong readability, organization, and purpose. Many companies want to stay updated with today’s trends, and sansserifs fonts read more “modern” than serifs.

PART THREE T Y P E FACE A N A LYSI S

WHAT IS A SANS-SERIF? A Modern Day Type Sans-serifs are simply fonts without serifs, or the protruding lines that extend off of single letter. Compared to the traditional style of serif fonts, sans-serifs are known for being more modern. Without the serifs, fonts bring a modernized approach to design.

Simplicity, minimalism, and approachability are all results of using sans-serifs. The lines are complete with a clean finish and sharper edges, which make it easier to read on the web.

PART FOUR T H E I MP ORTA N CE O F W E B F ON TS

THE PURPOSE OF A WEBSITE The Importance of Web Design

The purpose of a website can be a very broad topic. There are over one billion websites that have been created on the web, with only about 17% being active. Whether they are educational, business, entertainment, they were all created to serve a relatively similar purpose. Websites are made to turn visitors into prospects. A good website will be able to guide the visitor with ease.

Each piece of information, every action should be clear for the visitor. The experience that a website gives relies completely on its design, front and back end, which are both equally important. The front end revolves around the interface. Images, buttons, and most importantly type. Without type, it would be extremely difficult for visitors to navigate or receive the information they were seeking. Type plays a major role within websites and should be made with great consideration for the web. 13

THE QUALITIES OF A GOOD WEB DESIGN Readability & Legibility If you cannot read the text, what purpose does it serve? It’s crucial that a font provides a pleasant and easy reading experience for the viewer. Bad use of type would simply push the viewer away. They ‘re one click away from going back to the search page and looking for a new website. A font must be easy on the eyes.

Consistency Professional websites remain consistent. Two, to sometimes three, typefaces are more than enough. Mixing many different fonts together would lead to a

rather messy and unorganized website. It’s easy to spot whether a website is consistent of not from one glance at a website. Good type can help create a lasting first impression.

on the website. Headings, subheadings, body text, buttons, icons, text boxes, and the list goes on. Every word was placed on the website for a reason. Viewers will have a much smoother navigation with the use of excellent hierarchy. This can be performed using fonts of larger sizes, heavy weights, and careful placement.

Hierarchy

Color Color can be used to gain a visitors attention. However, type must be used with caution when applied with color. Type can either be enhanced or impaired depending on how it’s interacting with the color palette of the website

Websites aren’t just a single paragraph. The majority of websites will often contain a lot of information on one page. These pages are usually connected through one another with links provided 15

THE BEST FOR THE WEB

Type for Screens When working with type on the web, it’s crucial to maintain strong legibility and readability. There are many factors that effect both of these on digital screens, such as resolution and screen size. Sans-serifs eliminate the possibility of serifs interfering with the reader, as they may disappear or display too large on digital mediums. Simply eliminating the serifs of the font is very effective and reduces the chance of technical visual impairments.

Good websites will contain text of various sizes. Headings, subheadings, and body text will be displayed in different sizes. While it may appear fine on a laptop, it may not be the same case on a phone. Sans-serifs tend to have a stronger ability to maintain their legibility/ readability while converting through different digital devices.

A Modern Touch Trends are important in the design world. Those who do not keep up are left behind. With the modernization of today’s society, simplicity and minimalism is a big theme. The use of more white space, less text, clean and simple type/text elements have been growing in web design.

Sans-serif have been successfully applied into recent websites to create a modern atmosphere. Many of today’s most visited websites display a dominant use of sans-serifs. Google, Yahoo, Twitter, Reddit, YouTube, and Amazon all center around the use of sans-serif.

PART FIVE S A N S - S ERIF S O N T HE WEB

GOOGLE The World’s Most Used Website Google, the #1 website in the world is a strictly sans-serif based search engine. Originally, its logo was composed with serifs, but in order to keep up with the trend of modern minimalism, it has shifted to a sans-serif. Whether you’re visiting google on your phone or on a computer, the use of sans-serif remains the same. Color and hierarchy is applied to simplify and aid the viewers experience.

Simplicity is Key

of how to operate the website. The modernization of google has influenced many websites to follow the same path.

The use of negative space is utilized very much in Google’s current look. The simple, and clean homepage is complimented by the sans-serif logotype. A textbox is placed below that, followed by two buttons that are made aware by their grey backgrounds. The links are positioned in corners of the website. The hierarchy allows the logotype to stand out, and presents the visitor with a clear understanding 21

YOUTUBE The Go-To Video Streamer YouTube has developed itself into the most used video streaming website. Despite the considerable amount of thumbnails, the typography is just as important. They provide titles, descriptions, links, and direction across the website. Each word within YouTube’s website is displayed in sans-serif.

YouTube was launched in 2015, surfing the Internet for 17 years. It was developed during the beginning stages of techmodernization, and has held on to sans-serifs since then. Today, YouTube can be streamed on phones, tablets, and even TV’s. This entertainment website is ran solely with sans-serifs.

AMAZON Prime Service, Prime Type Amazon has been one of our favorite distributing and entertainment websites. It’s an Internet-based enterprise that sells just about anything; books, music, clothing, movies, electronics, household items, and more. Amazon is filled with thumbnails and links to navigate the user throughout the site. Sans-serifs dominate the text, being the only type of font used.

Sans-Serif Takes Over Amazon

of how to operate the website. The modernization of google has influenced many websites to follow the same path.

Various sizes, weight, styles, and colors indicate a clear hierarchy. The amount of information is organized and positioned with great care. The subheadings can be viewed as the item, price, and or time it takes to get shipped. The body text would be the description that is reached once the visitor clicks on the item. The sans-serif brings everything together to create this modern and approachable website as we know today. 25

REDDIT A Thread of Sans-Serifs Reddit is website that is known as a community based social news platform. It can be seen as an informational or entertainment website. The concept of Reddit involves media, threads, and subthreads, which can be explained as forums and subforums. Either way, reddit is remarkably text-heavy. With the immense amount of text, the type must be presented clearly in order to transfer the information to the visitor.

As you can see, sans-serifs is the only kind of type used throughout the site. The headings, subheadings, and body are composed of sans-serif. It creates a cohesive, modern feel within the site. Reddit is commonly viewed on the phone as well. The text decreases in size when viewed on a phone. However the nature of the sansserif preserves the legibility and readability of its content.

More Websites

• Yahoo • Facebook • Walmart • Zoom • Nike • Pinterest

PART SIX

P O P U LA R S A N S -S ERIFS

POPULAR SANS-SERIFS FOR THE WEB

Helvetica Helvetica is a great safe choice, you virtually cannot go wrong. It’s clean, simple, and gets the job done. Helvetica comes in a large family for clear use of hierarchy. Many big name companies use Helvetica as their primary font. Microsoft, TED, WhatsApp, and target are a few business that depend on Helvetica, and not to mention are also very web-based companies.

Futura Futura is a promising geometric sans-serif, dating back all the way into 1927. It has made a smooth transition into the digital world, showing clearly upon screens. Google, BestBuy, FedEx, are Nike are all successful businesses that were brought up with the use of Futura.

Public Sans Public Sans was developed by the US Government in order to effectively communicate visual language through websites. It was made with the intent of a progressive enhancement webfont. It is not only used by the US government, but web designers of all kind.

Open Sans Open Sans is a very simple and clean font. It comes in ten different styles, ranging from light to extra bold. It’s diversity allows websites to clearly indicate hierarchy. This font looks great large or small and still maintains its clarity when transfered across different screen sizes and resolutions.

Lato Lato is a rather unique sans-serif, but that doesn’t mean it doesn’t work well. Lato was originally designed as a corporate font but has been used widely overtime by web designers. It holds a high level of modernism, simplicity, and professionalism.

Roboto Roboto features similar aspects of some of the most popular sans-serif fonts. It displays a little bit more condensed, however, allowing more characters to fit on a single line. Roboto displays as a very modern and clean font, offering 12 styles.

Best Fonts For The Web With so many fonts being used and developed today, it’s hard to say which ones are the best. However, I am quite confident after conducting some deep research that sans-serifs in general are superior for the web.

Sources Biľak, Peter. “Brief History of Webfonts by Peter Biľak.” Typotheque, https://www.typotheque.com/ articles/brief_history_of_webfonts. Jay Hoffmann , Jay. “The Decade-Long Path to Web Fonts.” The History of the Web, 19 Sept. 2017, https://thehistoryoftheweb.com/web-fonts/. Truong, Donny. “Visualgui.” History | Professional Web Typography by Donny Truong, 2019, https:// prowebtype.com/history/. 30, Justin Morales&nbsp;&nbsp;&nbsp;&nbsp;Sep, et al. “The 7 Best Modern Fonts for Websites: Adobe XD Ideas.” Ideas, https://xd.adobe.com/ideas/principles/web-design/best-modern-fonts-for-websites/. Ilene Strizver 6 15 15 .social-rocket-buttons .social-rocket-button-icon { font-size: 20px; paddingbottom: 8px;}.social-rocket-inline-buttons { margin-top: -25px;}.bSe.podcast .favorites-bookmark { display: none !important;}.sfsi_plus_tool_t, and Ilene Strizver. “What Makes a Good Typeface?” CreativePro Network, 12 Jan. 2021, https://creativepro.com/what-makes-a-good-typeface/. “What Is Serif and sans Serif?” Pluralsight, 1 Sept. 2020, https://www.pluralsight.com/blog/creativeprofessional/meaning-behind-chosen-typeface. 8, Oliver Apr, et al. “22 Most Popular sans Serif Fonts in 2022 for Your Logo and Brand.” Looka, 20 Dec. 2021, https://looka.com/blog/best-sans-serif-fonts/.