Typography
Opal Wongsuwan
Contents
(04-05)
Introduction to type
(06-09)
A Brief History of Type
(10-13)
What is typography?
(14-19)
Type properties
(20-25)
Type Classifications
(26-29)
Type Families
2
(30-34)
Legibility
(35-37)
Readability
(38-41)
Grid and layout
(42-43)
Type in digital age
(44-45)
Famous type designers
(46)
References
3
Aa 4
Typography is the art and technique of arranging type in your designs.
5
A Brief History of Type
6
Text is never simply text—typography, or the way type is arranged on a layout, has a huge influence over the visual impact of a message, setting the tone and mood for the reader. Type design has a long and fascinating history, and the digital fonts we use today often have incredible origin stories. Typography Before ‘Typography’ Typography is the term used to describe how type is arranged on a layout. For most designers now, this refers to how type is formatted for displaying on a page, product (e.g. packaging), signage, or website. Typography as we know it only really came into being with the invention of the printing press, but it actually has deeper origins. Many of the fonts you will see used widely today evolved from much earlier type designs.
In second century BC Mesopotamia, punches and dies were used to stamp letterforms or glyphs onto seals, which makes it a very early form of printing. There is also evidence that similar ‘printing’ techniques were used in Babylon, Crete, and Ancient Greece. Many of the serif fonts we use now can also trace their roots back to Ancient Roman capital lettering, which was used to inscribe monuments and municipal buildings. Trajan Pro and Times New Roman are two examples of typefaces which owe much of their design heritage to these early Roman type styles.
7
Gutenberg’s Blackletter Revolution By the 12th century in Europe, hand-lettering had developed into an incredibly beautiful art form, practiced by monks who created illuminated manuscripts covered in ornate lettering designs. The style of type which was perfected by the monks is now known as blackletter—a Gothic calligraphy script. The downside of this hand-lettering technique was that it was also time-consuming and costly, which made it accessible only to a limited group of people. “Flippin’ eck, this Blackletter’s hard to read!” The sheer blackness of Blackletter never made it the easiest typeface to read, so it was a breath of fresh air when Roman type styles became popularised in the 15th and 16th centuries. In 1470 in Venice, Nicolas Jenson designed a highly legible typeface inspired by Ancient Roman type styles. Jenson is one of the earliest Old Style typefaces, which are defined by low contrast between thick and thin strokes. Old Style Roman typefaces are readable and aesthetically pleasing, which led to them becoming the defining typeface style used throughout this period.
You Old Romantic: 18th Century Serifs Roman typefaces remained enduringly popular for a few centuries, and it wasn’t until the 18th Century that some of the most influential type designers quietly revolutionised the serif as we now know it today. The tide of typographic change was coming thick and fast during the 18th Century, during the Age of Enlightenment. In France, the Didot family designed one of the first Modern serifs, which are defined by very thin serifs and a very high contrast between thick and thin strokes. 8
A Typographic ‘Blip’: The Industrial Revolution After all the sophisticated developments in typography during the 18th century, the 19th century was bound to be a little disappointing. This was the era of the Industrial Revolution, and while incredible progress was made in mechanical and industrial fields, typography suffered from a cluttered approach during this time. Type was condensed or stretched to fit onto advertising materials like posters and newspapers. An eclectic mix of styles was used to fit every available space, which resulted in an eccentric look that ranged from circus-inspired styling to the letterpress-influenced ‘vintage’ styles popular with hip coffee bars today. Thank Goodness, the Modernists Are Here After all the clutter of the Industrial period, typography was badly in need of a refresh. Luckily, there were some very forward-thinking chaps who did just that. William Caslon had a great-grandson, William Caslon IV, who controversially removed the serifs from one of his traditional typefaces in the early 19th century. The style was too ahead of its time and didn’t take off, and it would be another century before the world was ready for the palette-cleansing simplicity of the sans serif. The best-known early sans serif is Futura, which was created by German typographer Paul Renner in 1927. Renner was inspired by simple geometric shapes, which gives Futura and its relations their group name—the Geometric Sans typefaces.
9
what is typography?
10
“Typography is the visual component of the written word.”
Typography is the art and technique of arranging type, type meaning letters and characters. Typography is everywhere we look. It’s in the books we read, on the websites we visit, even in everyday life on street signs, bumper stickers, and product packaging. Is typography an art? That’s like asking if photography is an art. Certainly there are photographers and typographers whose ideas and techniques raise their work to the level of art. But at their core, both photography and typography perform a utilitarian function. The aesthetic component is separate. Being an effective typographer is more about good skills than good taste.
Typography is the visual component of the written word. A text is a sequence of words. A text stays the same no matter how it’s rendered. Consider the sentence “I like pizza.” I can print that text on a piece of paper, or read it aloud, or save it in a file on my laptop. It’ll be the same text, just rendered different ways visually, audibly, digitally. But when “I like pizza” is printed, typography gets involved. All visually displayed text involves typography whether it’s on paper, a computer screen, or a billboard.
11
Why Is Typography Important? Typography is absolutely everywhere. Just look at your phone, a billboard, your coffee cup, or even the different styles used in this blog post. Every font, letter, and character arrangement plays a part in determining how a message is conveyed. Sure, it might seem trivial at times, but even the smallest of type adjustments can impact the look and feel of your work. For example, back in June, Facebook tested a new font on its users called Geneva. While the new font was only slightly thinner and lighter than the original, Helvetica, it made a noticeable difference to some. To understand where the importance of arrangement comes in, I like to think back to Johannes Gutenberg’s printing press. At one point in time, people practiced typography using printed materials -- meaning they were literally taking letters and characters and arranging them in physical space. Today, thanks to computers, open source fonts, and scalable computer typography, it’s a lot easier to arrange letters and characters. But that physical piece remains important, even in the digital sphere.
Why Typography Matters? Because you are a professional writer, you are already a typographer. You may be a reluctant typographer. You may be an unskilled typographer. But every time you put words on a page, you’ve made typography happen. So you are a typographer.
12
“The aim of the game is to make your written language look aesthetically beautiful, and read effectively so your message can be absorbed with impact.� 13
Type Properties
14
Learning and understanding every aspect of the anatomy of typography is essential if you are to become a great typographer. These advanced skills will enable you to clearly communicate complex messages effectively with limited means, especially when the whole design is only using typography, like for example the ‘wordmark’ logo, where you redraw some letters to make them unique. How do you tell one typeface from another? If you’re trying to distinguish Helvetica from Times Roman, the difference is obvious. In other cases, however – especially between text designs having similar characteristics – the differences can be subtle and difficult for the less–experienced eye to see. One important step in training your eye to notice the details that set one design apart from another is to examine the anatomy of the characters that make up our alphabet.
As in any profession, type designers have a specialized vocabulary to talk about the different parts of letters. It isn’t necessary to commit the entire list to memory, but familiarizing yourself with this terminology will make it easier to communicate about typefaces and their characteristics. It will also help educate your eye to recognize the underlying structure of various designs and the differences among them.
15
Leg
Arm
A portion of a letter that extends downwards, attached at one end and free at the other.
A straight or curved portion of a letter that extends upwards or outwards, attached at one end and free at the other.
Ear
Shoulder
The small stroke that extends outwards from a lowercase g in some typeface styles.
The stroke that curves downwards and to the right of the lowercase h, m and n.
Spine
Tail
The spine is the main curved stroke inside the upper and lower case S.
The decorative curved descender of a capital Q, R and K. The descenders of the lower case g, j, p, q, and y are also sometimes called tails.
16
Cap Height Letter-Spacing X-Height Serif Ascendar
Leading
Baseline Descendar Baseline
the invisible line upon which a line of text rests. In Material Design, the baseline is an important specification in measuring the vertical distance between text and an element.
Cap Height
refers to the height of a typeface’s flat capital letters (such as M or I) measured from the baseline. Round and pointed capital letters, such as S and A, are optically adjusted by being drawn with a slight overshoot above the cap height to achieve the effect of being the same size. Every typeface has a unique cap height.
X Height
refers to the height of the lowercase x for a typeface, and it indicates how tall or short each glyph in a typeface will be.
Ascenders and Descenders
Ascenders are an upward vertical stroke found in certain lowercase letters that extend beyond either the cap height or baseline. Descenders are the downward vertical stroke in these letters. In some cases, a collision between these strokes can occur when the line height (the vertical distance between baselines) is too tight.
17
Source Sans Pro Light Source Sans Pro Regular Source Sans Pro Bold Source Sans Pro Black Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights; and four to six weights is a typical number available for a typeface.
Futura Condensed Futura Regular Fut ur a E x t en ded Proportion refers to the relative thickness of a font’s stroke. A typeface can come in many weights; and four to six weights is a typical number available for a typeface.
Sant El i a Ro u g h C halkd u s ter OLD BOB J U NOIR Texture Surface texture is another variant of typeface design. Just a few of the almost limitless surface textures are outline designs, typestyles with the appearance of three dimensionality, incised, stenciled, and Inlined.
18
Weight, proportion and texture are three main characteristics that distinguish typefaces from one another. Stroke widths range from very light to extremely heavy; letter shapes range from very condensed to exceptionally wide. Some typefaces also have distinctive surface textures. Many attempts have been made to standardize weight and proportion terminology for typeface designs. However, none has gained universal acceptance. Commonly used names progress as follow: thin, light, book (as the name implies, a good weight for setting continuous text), medium, demi bold (sometimes just “demi”), bold, extra bold, and black and ultra. To add to the confusion, the medium weight of a typeface is sometimes referred to as Roman or even only as its family name, such as “Baskerville.” Other descriptive names run the weight gamut from hairline and slim, to fat, elephant and massive. Typeface designer, Adrian Frutiger proposed a solution to resolve the confusion over weight names. In the mid-1950s, he developed a numerical system to distinguish typeface weights and proportions. (See Univers Family Page for more details.) Despite its logic, Frutiger’s numerical system has not caught on. Even the Neue Helvetica typeface family, which adheres to Frutiger’s system, uses both the numeral value and the naming convention: for example, Neue Helvetica 56 Italic and Neue Helvetica 55 Roman. With the advent of digital fonts and the proliferation of new typeface designs, the concept of a universal naming system for typeface weights has become an impossibility.
19
Type Classification
20
Serif A serif is a small shape or projection that appears at the beginning or end of a stroke on a letter. Typeface with that have serifs are called a serif typeface. Serif fonts are classified as one of the following:
Bookman Old Style
Bodini Classic
Old Style Serifs
Didone or neoclassical serifs
This category includes the first Roman types, originally created between the late 15th and mid 18th. The axis of curved strokes is normally inclined to the left in these designs. Slanted serifs on lower-case ascenders. The contrast in character stroke weight is not dramatic, and hairlines tend to be on the heavy side.
Contrast between thick and thin strokes is abrupt and dramatic. The axis of curved strokes is vertical, with little or no bracketing. In many cases, stroke terminals are “ball� shapes rather than an evocation of a broad pen effect. These tend to be highly mannered designs, with clearly constructed letters.
Baskerville
Rockwell
Transitional Serifs
Slab serifs
English printer and typographer John Baskerville established this style in the mid 18th century. These typeface represent the transition between old style and neoclassical designs, allowed much finer character strokes. While the axis of curve strokes can be inclined in transitional designs, the strokes normally have a vertical stress. Weight contrast is more pronounced than in old style designs. Serifs are still bracketed and head serifs are oblique.
Slab serif typefaces became popular in the 19th century for advertising display. These typefaces have very heavy serifs with minimal or no bracketing. Generally, changes in stroke weight are imperceptible. To many readers, slab serif type styles look like sans serif designs with the simple addition of heavy (stroke weight) serifs.
21
Serif and sans serif are the two most common typeface classifications. Serif typefaces have a more traditional look. Sans serf typefaces became popularly in the late 19th century and are considered to be more modern. 22
Sans Serif A typeface without serifs is called a sans serif typeface, from the French word “sans” that means “without.” Sans serifs can be classified as one of the following:
Helvetica
SD Gothic Neo
Grotesque Sans Serifs
Square Sans Serifs
These are the first commercially popular sans serif typefaces. Contrast in stroke weight is most apparent in these styles, there is a slight “squared” quality to many of the curves, and several designs have the “bowl and loop” lowercase g common to Roman types. In some cases the R has a curled leg, and the G usually has a spur. This category also includes more modern, sans serif designs patterned after the first grotesques. Stroke contrast is less pronounced than earlier designs, and much of the “squareness” in curved strokes has been rounded. Normally the most obvious distinguishing characteristic of these faces is their single bowl g and more monotone weight stress.
These designs are generally based on grotesque character traits and proportions, but have a definite and, in some instances, dramatic squaring of normally curved strokes. They usually have more latitude in character spacing than their sans serif cousins, and tend to be limited to display designs.
Futura Geometric Sans Serif Simple geometric shapes influence the construction of these typefaces. Strokes have the appearance of being strict monolines and character shapes are made up of geometric forms. Geometric sans tend to be less readable than grotesques.
Gill Sans Humanistic Sans Serif These are based on the proportions of Roman inscriptional letters. Frequently, contrast in stroke weight is readily apparent. Typographic experts claim that these are the most legible and most easily read of the sans serif typefaces. Humanistic sans serif typefaces also closely match the design characteristics and proportions of serif types, often with a strong calligraphic influence.
23
Handwriting Handwriting typefaces are unconventional with a natural, handwritten feel. These typically are used as H1 - H6 in your type scale.
Edwardian Script
Blackletter
Formal Scripts
Blackletter & Lombardic
These typefaces are derived from 17th century formal writing styles. Many characters have strokes that join them to other letters.
These typefaces are patterned on manuscript lettering prior to the invention of movable type.
Bromello
Gabi Sans
Calligraphic Scripts
Decorative Styles
These scripts mimic calligraphic writing. They can be connecting or non-connecting in design. Many appear to have been written with a flat-tipped writing instrument.
This is the largest category and also the most diverse. Rarely used for lengthy blocks of text, decorative typefaces are popular for signage, headlines and similar situations were a strong typographic statement is desired. They frequently reflect an aspect of culture – such as tattoos or graffiti – or evoke a particular state of mind, time period or theme. Many – such as psychedelic or grunge designs – are time-sensitive and fall out of fashion. Some decorative typefaces use unorthodox letter shapes and proportions to achieve distinctive and dramatic results. Some even appear three-dimensional.
Manus Trial Casual Scripts These typefaces are designed to suggest informality, as if they were written quickly. Many times they appear to have been drawn with a brush. Normally, character strokes connect one letter to the next.
24
AAA A A A
AAA A AA
25
Type Families
26
Type families are ranges of typeface designs. Each family is a variation of a basic style of alphabet. There are hundreds or maybe even thousands of typeface families.
Modern Type Families When typefaces were first invented, the notion of having a family of type hadn’t occurred to anyone. All fonts were simply roman designs. In the early 16th century, cursive – or italic (named after Italy, where the idea was popularized) – type was introduced. There were still no typeface families; romans were one style of type and italics were another – much like serif and sans serif. In the late 1700s, foundries began to release fonts in families – pairing roman and italic designs that matched each other in style. Later the concept of typeface weights and proportions was added to the typeface family mix. In the 20th century, type families were enlarged even further with the introduction of different designs such as condensed, expanded and outlined.
The person generally credited with conceiving the modern idea of a typeface family is Morris Fuller Benton, director of typeface development for American Type Founders in the late 19th and early 20th centuries. Benton’s premise was that typefaces within a family would share the basic characteristics of the parent design, but with individual variances. The Cheltenham, Century, Cloister, and Stymie typeface families are just a few of the designs developed under Benton’s watchful eye. Benton’s original vision has been expanded several times over the decades; type families have become larger, more diverse and better thought-out.
27
Extended Type Families
Planning by the Numbers
Some typeface families are made up of two or more sub-families. ITC Stone is a good example. Its sub-groups consist of Serif, Sans, Humanistic and Informal. Each design has roman and italic versions in three weights for a total of 24 individual typefaces. The four designs share the same cap height, lowercase x-height, stem weight and general proportions. Each typeface, however, is designed to stand on its own as a useful, distinctive communication tool. Thesis and ITC Legacy are two other popular typeface families that are made up of sub-families.
In 1957, the Swiss type designer Adrian Frutiger designed a new kind of type family. Because he felt that the traditional system of providing names – “bold,” “semi-bold,” “semi-bold condensed” and so on – was confusing and outdated, he proposed a logical, systematic numbering scheme. In Frutiger’s system, each typeface was given a two-digit suffix. The first digit classified the alphabet weight, with 3 indicating the lightest weight in the family and 9 the boldest. The second digit identified the typeface proportion, with higher numbers for condensed designs and lower numbers for expanded designs. In addition, if the second number was odd, the typeface was a roman design; if it was even, the typeface was italic. Thus Univers 39 is a very light condensed roman, while Univers 56 is a medium-weight italic of normal proportions. Neue Helvetica and Serifa are two other type families that use this numbering system.
Size-specific Families Another kind of type family has different designs for use at different sizes. ITC Bodoni is such a family. It’s comprised of three size-sensitive variants, named Six, Twelve, and Seventy-Two. These were designed to emulate the differences in the progressively-sized metal punches that Giambattista Bodoni created for his original fonts. The numerical designation indicates the optimum point size at which each design should be set – but, as with most typographic decisions, there are no hard and fast rules. FB Californian and ITC Founders Caslon are two newer size-specific typeface families.
28
29
Legibility
30
It’s important to understand what makes one typeface more legible than another. When choosing a typeface, it all depends on how you plan to use it. Ask yourself some basic questions: What size will the text be used at? Will it appear as body copy or a headline? Does it need to be a workhorse or will it be used more as eye candy? Will it be paired with another font? Does the appearance of the typeface complement the subject matter? Another kind of type family has different designs for use at different sizes. ITC Bodoni is such a family. It’s comprised of three size-sensitive variants, named Six, Twelve, and Seventy-Two. These were designed to emulate the differences in the progressively-sized metal punches that Giambattista Bodoni created for his original fonts. The numerical designation indicates the optimum point size at which each design should be set – but, as with most typographic decisions, there are no hard and fast rules. FB Californian and ITC Founders Caslon are two newer size-specific typeface families. In short, it helps to know the intended context of the typeface you are considering using. Some fonts are indeed quite flexible, include several weights and they can be used in several ways. Others are more constrained, designed to be used very specifically.
31
It’s also important to keep in mind that different typefaces were designed for different uses. 32
Display vs. Text Some typefaces were designed to be used large, such as in headlines. Usually these typefaces are less readable at smaller sizes and should not be used for body copy. These are called display faces. Other typefaces are designed specifically to be used in large areas of smaller body copy. These are called text or body faces. Serif vs. Sans Serif History tells us that serif faces have always been regarded as more legible, as they were almost always used in print for large passages of text. The serif faces allow the eye to flow more easily over the text, improving reading speed and decreasing eye fatigue. A Trait, Not Always a Goal not all typefaces are–or should be–created with legibility as a primary design function. Many faces are drawn for the purpose of creating a typographic statement, or for providing a particular spirit or feeling to graphic communication. Some typefaces are just designed to stand out from the crowd. To the degree that a typeface has personality, spirit, or distinction, however, it almost always suffers proportionally on the legibility scale.
What makes a typeface legible? A long-standing typographic maxim is that the most legible typefaces are “transparent” to the reader–that is, they don’t call undue attention to themselves. Additionally, the most legible typefaces contain big features and have restrained design characteristics. While this may seem like a typographic oxymoron, it’s not. “Big features” refers to things such as large, open counters, ample lowercase x-heights, and character shapes that are obvious and easy to recognize. The most legible typefaces are also restrained. They are not excessively light or bold, weight changes within character strokes are subtle, and serifs, if the face has them, do not call attention to themselves.
33
Readablity
34
Readablity refers to how easy it is to read words or blocks of text, which is affected by the style of a type. 35
Readability is about arranging words and groups of words in a way that allows the readers eye to access the content easily and in a way that makes sense. It’s really an art form that is honed over time as successful combinations are found. Letter-spacing
also called tracking, refers to the uniform adjustment of the space between letters in a piece of text. Larger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce space between letters. For smaller type sizes, looser letter spacing can improve readability as more space between letters increases contrast between each letter shape. Text in all caps, even at small type sizes, has improved readability because of its added letter spacing. Line height 18 pt 10 pt
I found a way to immerse myself in a creative environment and learn everything I need to know to incorporate graphic design into my life. Type size 10 pt, Line-height 18 pt
Line height, also known as leading, controls the amount of space between baselines in a block of text. A text’s line height is proportional to its type size. 36
Paragraph spacing Keep paragraph spacing in the range between .75x and 1.25x of the type size.
12 pt 10 pt
Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme. Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text. Type size 10pt, line-height 12dp, paragraph spacing 10pt
Contrast It may sound obvious that good type contrast is essential for readability. The fact of the matter is designers (myself included) are always pushing the boundaries of contrast. It might be that we want a certain section of text to be less prominent, or to create “layers” of hierarchy in our design. Whatever the case, keep in mind that on screen contrast, especially when it comes to small, fine shapes like body text, vary greatly from screen to screen. It’s best to err on the side of a bit “too much” contrast. Hierarchy As we’ve already discussed in this series, hierarchy plays a big part in the readability of content. A successful hierarchy organizes the content into digestible parts and allows the reader to scan and access the text easily. Start thinking about employing these legibility and readability concepts into your projects. The more you do it the better you’ll get.
37
Grid and Layout
38
Grids are the backbone of all layouts and infographics. When starting a design, most designers use some kind of grid to organize the elements. This practice helps maintain a balance from page to page or slide to slide. Layout design involves using one grid or a group of grids, depending on what needs to be achieved. The anatomy of a grid is made up of several parts. Not every part is present in every grid; it depends on the sort of grid. Here we will look at the most important parts of a grid. You might recognize many of these terms from document creation programs like Microsoft Word, Google Docs or Pages. The way your document looks is defined by these sections of a grid, including the margins, the header, the footer and page numbers.
39
Format
The format is the full area where the final design will be laid out. In print design, the format is the page and in web design the format is the browser window. Margin
Margins are the empty spaces between the edges of the format and the content. The size of the margins is what gives the content a general shape, usually a rectangle. Spatial Zones or Regions
Groups of adjacent modules in vertical and horizontal areas create spatial zones or regions. A vertical region can hold a block of text, a horizontal region can hold a video. Regions can be organized proportionally or used to create overlapping zones 40
Columns
Columns are vertical spatial zones or regions that fit fully from the top to the bottom margin. Rows
Rows are horizontal spatial zones that fit fully from the left to right margin. Gutters
The spaces between rows and columns are called gutters. These should always be equal between columns or rows, in order to maintain a visual balance.
41
Type in Digital age
42
The Influence of the Digital Age Modernist sans serifs really broke tradition with all the typographic developments that had come before. But there was one final development that would extend the reach of both serifs and sans serifs, as well as typographic formatting, to an as yet unimaginably large audience. With the invention of computers in the 20th century, fonts—digital versions of typefaces—became the new currency in typography. Despite the exciting possibilities the digital revolution could hold for type, typography as a discipline seemed for a short while a little out of place. With the limitations of screen technology, many fonts were rendered as primitive Pixel Type, and pixel-inspired styles became the trend-leading typefaces for print design too.
Humans have always sought out new and creative ways to communicate with others, and typography is the most visually arresting way that this has been done. As we've explored here, typography didn't simply begin with the invention of the printing press, but has a much deeper history, much of which archaeologists and historians are still only just bringing to light. Typography's evolution also won't stall with the digital age, but in fact has more potential than ever to develop and win over new legions of type enthusiasts.
As computer technology evolved, the field of typography gradually opened up, making more sophisticated fonts available to all computer users. The downside of this was the overuse of ‘bad’ fonts (*cough*, Comic Sans) by every Tom, Dick and Harry. The upside was actually the most revolutionary development in typography, ever—that typeface development could no longer only be accomplished by specialists; but instead anybody with access to vector design software had the potential to design their own fonts. 43
Famous type designers
44
sharptype.co
Sharp Type is a digital type foundry based in New York City. The foundry produces custom & retail typefaces for print, digital, and environmental design– for brands, design houses, and publications. Sharp Type designs typefaces with utility and beauty for the modern era.
45
Sharpype.co for Hillary Clinton
Sharpype.co for Dropbox
46
References https://edu.gcfglobal.org/en/beginning-graphic-design/typography/1/ https://practicaltypography.com/what-is-typography.html https://material.io/design/typography/understanding-typography.html#type-classification https://blog.hubspot.com/marketing/typography-terms-introduction https://visme.co/blog/type-anatomy/ https://design.google/library/choosing-web-fonts-beginners-guide/ https://www.fonts.com/content/learning/fontology/level-2/text-typography https://visme.co/blog/layout-design/ https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211
47