A Practical Guide On Typography For Complete Newbies

Must Read

How To Learn 🐍 Python: A Complete Plan From Beginner To Advanced | Phleebs

The Complete Guide To Learning Python And Beyond One of the hottest and...

A Practical Guide On Typography For Complete Newbies

What Is The Difference Between Fonts, Typefaces, And Typography Text and images are...

Which Programming Language πŸ‘¨β€πŸ’» A Human Should Learn First?

Which Should Be My First Programming Language And From Where To Learn It

Resume Writing Manual For Cool Developers [2020]

How To Craft The Perfect RΓ©sume And Get Hired By Your Dream Company

The Surface Web, Deep Web, And The Dark Web Explained

Disclosing The Different Internet Layers And The Reality Behind Dark Web The internet...

What Is The Difference Between Fonts, Typefaces, And Typography

Text and images are what constitutes design, not just on our screens but all throughout. If you remove them from perspective, there isn’t anything left. Having an understanding of typefaces and fonts is very important for everyone whether you are a designer or a developer or a human, just for instance. No matter what you do, you should have at least the clear insights of typography.

In this article, we will embrace the basics of typography and fonts, what comprises them, how we classify them, and most importantly, which font is the best suitable for your work.

An Introduction To Typography And Fonts

Take typography as the work of art and font as the original form of that artwork. Famous designer Nick Sherman summed this very well as-

A typeface is to a font as the song is to an MP3 file.

Same as we have genres of music, we have families of typefaces as well, such as serif, sans-serif, monospace, etc. Typography is nothing else than the overall look and feel of the final text; it encompasses all the considerations about the visual appearance of type (the font is a part of them).

Typefaces vs Fonts

Both of them are the same. Pretty surprisingly, the answer is no, typefaces, and fonts are not the same things, but the terms are employed interchangeably quite often. The words are used conversely at times, but the fact is that both of them are very different from one another.

A typeface is a family of many similar fonts (such as Times New Roman).

Fonts are different, take them as the adjectives of typefaces as you may have many attributes such as curiosity or fat (wait, how fat is an adjective!). In the same way, fonts are the adjectives of typefaces and include things such as height, weights, widths, and styles.

Classification Of Typefaces

Serifs

These typefaces have a slight finishing stoke at the end, which makes them more readable even from a distance. The words appear well separated from one another. They were used hugely in printing works such as in newspapers or magazines.

Sans-Serifs

The meaning of Sans in Latin is “without”, hence the definition of sans-serifs compiles to without serifs as they don’t have the ending strokes. Because of this, Sans-Serifs appeal more modern and minimalistic, making them more suitable for digital screens.

Scripts

Script typefaces contain a continuous cursive type feel in them, often resembling fluid strokes created from pen ink while writing. They can differ from formal to very casual. Because of having that hand touch in them, they are perfect for invitations, headlines, descriptive texts, or display use (or even signatures and autographs!)

Monospaced

Mono means having the same frequency, throughout. Monospaced typefaces have a consistent amount of horizontal space between them, which makes every letter take the exact amount of space. Making it easier to find words in hundreds of lines and is the reason why they are the typefaces of choice for developers. All the modern IDEs use monospace typefaces to retain the readability of code.

Display

A Display typeface is designed for sizeable heading text, not as the main body text. Display typefaces vary widely in their appearance and include both practical and novelty fonts.

Anatomy Of Typefaces

All letterforms have different parts, and there are names for those parts. As chemists have weird naming conventions, in the same way, designers as well like to name things to have a gap of separation.

There is a massive list of these naming conventions. We aren’t going to cover everything in this article. If you need a list of them, please check out this.

Naming Conventions In Fonts

Effects

Inline, Outline, Shadow, Fill, Bevel.

Optical sizes

Caption, Text, Subhead, Display, Deck, Poster.

Styles

Roman, Italic, Cursive, Oblique (a slanted roman), Small Caps (usually included as an OpenType feature rather than a digital font), Petite Caps (rare), Upright Italic (rare), Swash (often an OpenType feature rather than a font).

Weights

Hairline, Thin, Ultra Light, Extra Light, Light, Book, Regular/Roman, Medium, Semibold, Bold, Extra Bold, Ultra Bold, Black, Ultra Black.

Widths

Compressed, Condensed, Semi Condensed, Narrow, Normal, Extended, Extra Extended, Expanded.

Choosing A Font

After so much practical theory, it’s time for some practical stuff! Which font to use and for which purpose. With the design trend changing with time, it’s tough to answer this question in a few words, but some considerations can be taken at the time of choosing the right font for your project.

Is the load size of the font nominal?

If the font has too many typefaces, it is undoubtedly going to take much time for the file to load. By choosing a font having a limited number of typefaces or by limiting the number of typefaces getting load when someone opens the website would surely make the web page faster to load.

Will the font work great with other fonts you are using?

Every font doesn’t work well with other families of fonts and can make a design look ugly. To address this issue, always make sure to check the combination of fonts working together.

Does that font have enough styles?

Fonts usually offer three different styles in general. A font with less than three styles limits the forms.

Closure

Wow. That was long, congratulations on making this to the end! Read more development related articles on Phleebs!

- Medium-

Latest News

How To Learn 🐍 Python: A Complete Plan From Beginner To Advanced | Phleebs

The Complete Guide To Learning Python And Beyond One of the hottest and...

A Practical Guide On Typography For Complete Newbies

What Is The Difference Between Fonts, Typefaces, And Typography Text and images are what constitutes design, not just...

Which Programming Language πŸ‘¨β€πŸ’» A Human Should Learn First?

Which Should Be My First Programming Language And From Where To Learn It Which programming language a human...

Resume Writing Manual For Cool Developers [2020]

How To Craft The Perfect RΓ©sume And Get Hired By Your Dream Company A functional rΓ©sumΓ© is what...

The Surface Web, Deep Web, And The Dark Web Explained

Disclosing The Different Internet Layers And The Reality Behind Dark Web The internet is far more extensive than...
- Community-

More Articles Like This