Typography in Interface Design Free Essay


Typography can be a complex concept.  Working with text in order to provide a reader with the best possible design and layout to maximize readability can prove difficult for some: choosing the font, sizing, spacing, and various other aspects play into the differences between a well-written article, and something that is passed over due to the reader’s inability to follow the text with ease.  Therefore, this prompts the following research questions; how does typography facilitate reader’s to maximize their reading capacity? What is the significance of typology in displaying and conveying messages? What are the best practices for establishing supplementary reading materials? In this paper, I will endeavour to discuss some of typography’s best practices, as well as terminology, use of text, and instances and practices that are better avoided to make for the best possible experience for the reader. I will also discuss the essential elements of typography and the significance of typology in effectively conveying of messages.

Assisting the User

This segment describes both procedural and references help text as it applies to Microsoft Excel, with a focus on inserting functions to achieve the desired result. First, procedural help is essentially a step-by-step guide aimed solely towards assisting the user in completing a specific task (Heim, 2008).  In this case, when a user selects to insert a function via the toolbar in Microsoft Excel, they are greeted with a pop-up text and option container, complete with the search function, to assist the user in choosing what type of function they want to insert.  Upon ascertaining that function, the user is guided to the next steps but clicking ‘ok’ and is then prompted to complete additional information fields.  Each field and function, when highlighted or selected, is described in basic detail about what it pertains to (i.e. a user selects the function ‘sum’ and is given a description that it adds all the number in a given range of cells).

In addition to this, Excel offers reference help in the form of a hyperlink for each aspect of the function insertion process.  Reference help is defined as a sort of informative dictionary or encyclopedia, with the intent of giving the user a more detailed understanding of the topic they are looking into. Excel references are very important in making a better understanding with the help of the flexible spreadsheet design and the related data under research (Heim, 2008).  Upon clicking this hyperlink, another window will present itself, containing much more detailed information on the topic, as well as in what cases the function would be utilized (i.e. a set of hypothetical examples or syntax).

Essential typography elements

Font and typeface

Currently, several designers utilize the term font and typeface to act as synonyms but literally, they are not. Actually, a typeface is a form of type design which entails a full scope of characters consisting of in various sizes and weight whereas, a font is basically a graphic represented by text character normally introduced in one specific weight, typeface and size. In simple terms, a typeface is basically something that looks like a family while fonts are part of the family (Serafini & Clausen, 2012). These two aspects are the major objects whereby designers, as well as topographers, alter and transform to develop readable and aesthetic typography.

Mean line and baseline

Basically, type characters are put in a straight line forming a straight visual presentation. Key tools that assist designers in the designing processes are the mean line as well as the baseline. The first tool indicates the top while the other indicates a character body’s bottom. Lines of that kind facilitate the creation of fonts to be even in the layout (Serafini & Clausen, 2012). And notably, the lines remain invisible in the interfaces after completion of the design.

Character measurement

This involves the measurement of the character’s weight, size and height. There is need to distinguish various types of information by applying different sizes and weight on the characters (Serafini & Clausen, 2012). The type weight of the font is typically a measurement of the thickness of a character. The sizes are normally measured in terms of inches, pixels or even millimeters. The character’s height is also referred to as x-height since the body of each character in the same size is centred on letter “X”. Such an approach makes them appear to be evener. It is simple to separate copy elements like headings, sub-headings as well as body copy through altering these parameters.

Ascender and Descender

The ascender is the section of a letter which protrudes beyond the mean line for instance in letter “b” or “d” (Serafini & Clausen, 2012). On the other hand, the descender is the opposite of ascender. It is a portion that protrudes below the baseline for instance in the letter “q” or “g”.

White space

White space is also referred to as negative space. This is the spacing between elements in a design structure. Normally, readers are not aware of the significant role that space plays but for the interface designers, they pay more attention to it (Burset, Bosch, & Pujolà, 2016). Suppose the white space is imbalanced, it would be hard to read a copy of it. And for that reason, negative space matters a lot just like any other element of typography.


It is quite difficult to create effective typography since it entails several processes. For instance, an alignment is literally an act of placing as well as justifying text (Burset et al., 2016). In the course of the stage, interface designers focus on transforming pieces of texts that are randomly placed into one integrated composition.


The tracking process entails adjusting space for a composition of type characters forming a word or text block. An interface designer establishes an appropriate spacing for every letter, make the copy to look outstanding and appealing to the eye (Burset et al., 2016). The effective tracking enables easy readability of letters in a word.


Kerning is quite the same with tracking though they are not entirely the same. Tracking refers to the spacing between every character’s fonts whereas kerning is simply the process of regulating the space existing between two characters (Burset et al., 2016). It is normally applied for single cases whereby the interface designer makes a decision to alter the spacing between two particular letters so as to make it appear to be more natural.


Leading is simply the spacing between the copy’s baselines. A universal application of spacing between characters, as opposed to kerning, applies to all text rather than a font. Proper leading assists the reads to transition from one text line to the next with ease thus making is a significant piece of text legibility. Literally, 120% the point size of the font is the standard leading in interface designing though can vary based on the peculiarity of the typeface (Burset et al., 2016).

Typographic hierarchy

Like any other design element, typography needs to be structured. Essentially, the typographic hierarchy is a scheme that arranges copy content in a strategic way for its users’ acuity through combination and modification of fonts as well as typefaces. It is focused on establishing a contrast between eloquent and conspicuous copy elements which is noticeable with ordinary text information. The contrast is established through the regulation of elements such as fonts, colors, typeface, sizes and also their alignments. Typographic hierarchy is projected with corporate forms of copy content utilized in interface design. Typographic hierarchy assists in guiding the eyes of the reader to where the section of information begins to where it ends at the same time enabling the user to differentiate some information based on the constant usage of style all through a body of text (Lee, Forlizzi, & Hudson, 2002). They entail body copy, captions, headlines, sub-headers as well as call-to-action elements. Such copy elements from different layers in design which are primary, secondary and also tertiary. The copy content in the primary stage entails the biggest type such as in headlines. It aims at attracting the attention of the user to the product. At the secondary level, it entails copy elements that can be scanned with ease. They are majorly sub-headers as well as captions which enables users to rapidly go through the content. Also, the tertiary level entails body text including other information. They are normally presented with the small type though still readable. Essentially, the layer of typography helps users to apprehend copy content gradually with ease.

Other important aspects of interface design include; the window which refers to a short line of text at the end of a page or column that leads into the next.  Generally, to improve readability, widows are to be avoided to accommodate a better reading flow for the user (Nikola, 2013). Orphan which refers to a word or two set at the end of a paragraph that ends up being alone on that text line (row).  This created a lot of extra white space and, like windows, breaks up the readers’ ability to follow along with the text (Nikola, 2013). Anti-aliasing; this term should be familiar to almost everyone in graphic design, whether it be art or text: it refers to a smoothing process that alleviates jagged edges by utilizing a shading method around curves and edges (Shen, 2012).

Text layout and Acceptable Practices

There are some constants in the creative world; concepts that are, by consensus, to be followed if a writer wishes to be ‘best in show’ when it comes to their text-based designs.  One of those concepts is alignment.  Justifying a text to fit left and/or right may give the overall text a clean appearance, but that is not the only consideration when you are writing.  A proficient writer must take into consideration their readers (Shen, 2012).  Justified text tends to be harder to follow; there is a ‘flow’ to how most people read, taking on visual cues based on the generally accepted methods of writing.  Justifying lines of text can break up that flow and make lines more difficult to read/follow.

Also, when writing articles or blogs, headings and subheadings are there to capture the reader’s attention, to draw them into the body of the writing.  A poorly written heading may get passed over, or the user may find it misleading, as most in the general populace see in ‘sensationalistic journalism’: a captivating headline that completely misleads the reader about what is really happening in order to garner their initial attention (Sawyer, Dobres, Chahine, & Reimer, 2017).  In web-based writing, this is also known as ‘click-bait’, with the intended purpose of garnering views, no matter the cost.  As far as visuals go, a clear, well-presented heading/subheading is best so as not to get lost in the text throughout the page.  It gives the reader a clear understanding of where one part ends and another begins (Sawyer et al., 2017).

Best practices of utilizing typography in interface design.


Readability is very essential in interface designing. Overdoing the calligraphy fonts has to be avoided since the readers can barely notice the words. Actually, using standard fonts helps in engaging readers’ mind more because many people are familiar with them. Simplicity contributes the websites readability and as well boost its visual appeal. A small amount of fonts has to be used so as to retain the structure as well as professionalism. Overdoing the text to make it sophisticated utilizing fonts can ruin the readability, structure and professionalism turning it into an imperceptible mess (Sawyer et al., 2017). In essence, the typography of the interface significantly relies on the needs of the designer. Also, the device that the users are going to use to access the interface needs to be considered whether smartphones, laptops or tablets as it will assist in choosing fonts which are legible and displayed appropriately on the target devices.

Appropriately Match and Pair the Fonts

System fonts are appropriate and safe for interface designing since they are easy to use as well does not have a complex layout. However, to efficiently utilize the abundant calligraphy fonts present within the text box, it is required that fonts are selected and matched up in pairs that are compatible (Sawyer et al., 2017). A number of calligraphic fonts provide auspicious results when matched with other precise fonts, therefore, it is needed that the fonts are skillfully picked and mixed. Some platforms offer a variety of free fonts though it is essential to check if they are licensed and whether permission is granted to use them.  It is best to find fonts that work best.

Avoid Lengthy Lines

The number of characters on a line of texts significantly determines the ease that the user is capable of reading and apprehending the message. Moreover, short sentences provide better readability as compared to long sentences; therefore, typography needs not to be too wide or narrow. A corporate web typology rule typically is restricting the characters’ range per line up to about 50 to 60 (Sawyer et al., 2017). For an optimal line length of the interface, it is critical to consider fixing the layout’s fixing.

Correct Usage of Vertical White Space

The correct usage of white spaces between lines of text improves visibility and visual appearance and also boosts legibility. Failure to permit the appropriate height measurements is capable of making the interface to appear messy and as well fail to attract the reader’s interest (Sawyer et al., 2017). It is necessary to consider applying the right line height existing between the lines of texts in the interface for improved typography.

Use of appropriate color contrast

Color is very vital in web and interface typography best practice. Use of different colors needs to be used in order to create a proper distinction between various texts (Chacon, 2017). Choosing appropriate colors is important in contrasting texts; therefore, careful contrasting of texts and background colors is important since it boots the texts’ legibility.

Considering the message to be relayed

The manner in which a message is obtained and interpreted by the user significantly relies on the penmanship. To relay a message effectively in design, it needs to be taken into account that the choice of fonts does not alter the intention that the message has (Chacon, 2017). For example, suppose the aim of the message is to establish and communicate a joyful and relaxed atmosphere, formal fonts and screaming fonts will not be appropriate here. Therefore, it is important to follow font best practices so as to attain effective designs.

Identifying the occasion

The occasion that the contented is being crafted for significantly influences typography in interface design. The occasion needs to be considered when making a decision about the fonts to be used for the design (Chacon, 2017). For example, a fun and creative font like Princess Sophia suits a website that sells children ware. Also, when making a design for a wedding, it would be vital to use a sophisticated and romantic font like Coneria Script. In essence, the event that the design is being created for should guide in determining the best font to be used.

Avoid capitalizing all texts

Capitalizing every character in a text makes it look like it is screaming and daunting on the readers. Capitalizing all texts is impressive as it seems to be unpleasing to one’s eyes and worst of it a majority of the readers will not even apprehend the end message since they are likely to be put off by it (Chacon, 2017).

Identify the target audience

For an interface or website to fit well with the target audience, it is critical that the end users are understood by the designer and as well incorporate their needs and also expectations into deliberation when crafting the typographical design. The thing is designed for needs to be identified including their age group. Also, the likes and dislikes of the target audiences need to be considered when designing (Chacon, 2017). Taking into consideration all these aspects helps in choosing the appropriate fonts for the specific message that needs to be conveyed to them. Essentially, to achieve the objectives of interface design, it is essential that the typography content of the interface is well-polished, legible and appropriate (Chacon, 2017). Moreover, creativity plays part in best practice as it encourages exploration of different font collections as well as practising the use of various systemic as well as custom lettering in determining which ones match appropriately.

Legibility, Comprehension, and Recalling

Legibility is determined by aspects such as spacing, font face and also font size. Actually, typeface characters have an impact on legibility by impacting the manner in which readers can differentiate words and letter (Chacon, 2017). Thus, more legibility results in an extensive discern and subsequently, to a bigger capacity of reading the text. The reading speed is a vital aspect to be taken into consideration when dealing with legibility. To be legible, a text has to be read rapidly with ease. Legibility is attributed to the perceiving letters as well as words including rapid text reading with ease and understanding. Nonetheless, optimal legibility is attained suppose the typographical aspects such as the size of type as well as leading, collectively make a reading rapid with ease and comprehension.

    Comprehension only occurs when the reader is interacting with the text. To comprehend a text, the reader needs to read the text first. However, the working memory is limited in capacity.  Giving the opportunity the short term memory in comprehending the text, it needs some automatic decoding. Suppose a lot of energy is required so as to identify the words, minimal mental energy will be available for comprehending. Comprehending a reading is quite a complex process and it is an essential skill for students in facilitating their success. Reading comprehension entails coordination between the text and the reader. This process encompasses decoding the texts then use background knowledge to establish an appropriate understating to the information in the text (Lee, Forlizzi, & Hudson, 2002). Text features impact the interaction between existing between the reader and the text for comprehension. Surface structures such as font type as well as font size which are factors influencing reader-text interaction. Essentially, text features are so essential for readers to be capable of making meaning. For instance, 16 point Serif font is mostly preferred font due to its legibility. A text’s legibility impacts the comprehension of reading and the readability of the text.

In a study undertaken by Chandler (2001) analyzed font size and type as a way of investigating their influences on the capacity to read with speed and onscreen reading comprehension. He utilized Palatino and Helvetica specifically in the following three sizes: 8 points, 10 points and 12 points. It was determined that the type of size has a big impact on reading speed. 12 point is the largest font size was read at a fast pace as compared to other fonts. This demonstrates that large fonts are read faster since they have more present pixels for every letter. In the study, there was no big impact on the font type section with regards to the speed of reading. Also, there was no impact on the type size as well as font selection on the comprehension. Therefore, it is concluded that the legibility of typeface sensitivity is more compared to that of comprehension. Additionally, serif font’s markings set the row of lines to be separable with ease thus making reading become easy. In essence, perceiving text rows bring about less attentional reading resources.


To sum up, typography is very important in interface designing. Typography plays a greater role in ensuring the effectiveness of the interface or website by facilitating an easy way of conveying a message to the target audience whereby the user’s attention is drawn and get to access the message with ease. It is vivid that typography is important in ensuring effective conveying of a message and therefore, elements of typography needs to be taken into consideration during design so as to become a success.