web design inspiration examples

typography. it’s everywhere we look. in the books we read, on the websites we visit—evenin everyday life, on street signs, bumper stickers, and product packaging. simply put, typography is the style or appearanceof text. it can also refer to the art of working withtext—something you probably do all the time if you create documents or other projectsfor work, school, or yourself. typography can be an intimidating subject,but it doesn’t have to be. you only need to know a little to make a bigdifference in the stuff you do every day.

so let’s get started. first: some common types of fonts, and whatyou need to know about them. serif fonts have little strokes called serifsattached to the main part of the letter. because of their classic look, they’re a goodchoice for more traditional projects. they’re also common in print publications,like magazines and newspapers. sans serif fonts don’t have that extra stroke—hencethe name, which is french for "without serif." this style is considered more clean and modernthan serif fonts. also, it tends to be easier to read on computerscreens, including smartphones and tablets. display fonts come in many different styles,like script, blackletter, all-caps, and just

plain fancy. because of their decorative nature, displayfonts are best for small amounts of text; for example, titles and headers, and moregraphic-heavy designs. in a way, fonts have their own language. they all have something to say, beyond thewords on the page. they can come across as casual or neutral;exotic or… graphic. that’s why it’s important to think about yourmessage, and pick a font that fits. some fonts come with a extra baggage, likecomic sans, curlz, papyrus, and many more. there’s nothing particularly wrong with thesefonts—they just have a certain reputation

for being outdated and overused. if you find yourself tempted by them, thinktwice and consider using something else. there are many fonts with a similar look andfeel that are less likely to detract from your message. when deciding which fonts to use, less ismore. it’s best to limit yourself to one or twoper project. if you need more contrast, try repeating oneof your fonts in a different size, weight, or style. this trick is practically foolproof for creatinginteresting combinations that work.

you’ve probably heard the saying "oppositesattract." well, the same is true for fonts. don’t be afraid to combine font styles thatare different but complementary, like sans serif with serif… short with tall… ordecorative with simple. this can be challenging at first, but don’tdespair. look to other designs for inspiration, andsoon you’ll get the hang of it. maybe you’ve heard terms like kerning, leading,tracking, and hierarchy. for those with more experience, these conceptsare essential for creating professional-looking designs.

as a beginner, you don’t need to know everythingabout these terms—just enough to inform your work and help you talk about design withmore confidence. hierarchy is used to guide the reader’s eyeto whatever is most important. in other words, it shows them where to beginand where to go next, using different levels of emphasis. establishing hierarchy is simple: just decidewhich elements you want the reader to notice first, then make them stand out. high-level items are usually larger, bolder,or different in some way. remember to keep it simple and stick to justa few complementary styles.

leading is the space between lines of text,also known as line spacing. if you’re not sure how much line spacing touse, don’t fret—the default is usually fine. the goal is to make your text as comfortableto read as possible. too much or too little spacing can make itunpleasant for the reader. tracking is the overall space between characters,sometimes called character spacing. most programs let you condense or expand thisdepending on your needs. in some designs, you might adjust your trackingto create a certain artistic effect. it can also help you fix fonts that are poorlyspaced to begin with. kerning is the space between specific characters.

unlike tracking, it varies over the courseof the word, because each letter fits together differently. some fonts have what we call "bad kerning,"making certain letters look improperly spaced. if a font you’re using has bad kerning, it’sbest to cut your losses and choose something else. well-crafted text can mean the differencebetween an ordinary project… and an extraordinary project—even if you’re just getting startedwith design. all it takes is an interest in typography,and you’ll start to notice more, see more, and be able to do more in your own work.

we hope you enjoyed learning the basics oftypography. don’t forget to check out the rest of ourdesign topics, including color, images, and composition.

Freebies Collection for Designer and Developers Edition #2

Leave a comment