Member-only story

Better Web Typography for a Better Web

Rick Nelson

·3k Followers· Follow

Published in Kindle Edition

6 min read · 3 weeks before

51 View Claps

5 Respond

Save

Listen

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing),and letter spacing (tracking),as well as the adjustment of space between pairs of letters (kerning). Proper typography can improve the readability and visual appeal of a website, making it more enjoyable and effective to use.

This book is a comprehensive guide to typography for the web. It covers everything from choosing the right fonts to using CSS to control the appearance of text. Whether you're a beginner or an experienced designer, this book will help you create beautiful and effective typography for your website.

Better Web Typography for a Better Web

4.7 out of 5

Language	:	English
File size	:	6500 KB
Text-to-Speech	:	Enabled
Screen Reader	:	Supported
Enhanced typesetting	:	Enabled
Print length	:	255 pages

Chapter 1: Choosing the Right Fonts

The first step to creating good typography is choosing the right fonts. There are thousands of fonts available, so it can be difficult to know where to start. This chapter will help you narrow down your choices and choose the perfect fonts for your website.

When choosing fonts, there are a few things to keep in mind:

Readability: The most important thing to consider is whether the font is readable. The font should be easy to read, even at small sizes and on different devices.
Style: The font should also match the style of your website. If your website is modern and minimalist, you'll want to choose a font that reflects that style. If your website is more traditional, you'll want to choose a font that is more classic.
Versatility: You'll also want to choose a font that is versatile. You'll want to be able to use the font for a variety of purposes, such as headings, body text, and navigation menus.

Once you've considered these factors, you can start narrowing down your choices. You can use a font directory to browse different fonts and see how they look in different sizes and styles. You can also test out fonts on your own website to see how they look in context.

Chapter 2: Using CSS to Control the Appearance of Text

Once you've chosen your fonts, you can use CSS to control the appearance of text. CSS allows you to control the font size, color, weight, and style. You can also use CSS to control the line height, letter spacing, and text alignment.

Here are a few of the most important CSS properties for controlling the appearance of text:

font-family: This property specifies the font family that you want to use. You can specify multiple font families, in Free Download of preference.
font-size: This property specifies the size of the font. You can specify the font size in pixels, ems, or percentages.
font-weight: This property specifies the weight of the font. You can specify the font weight as normal, bold, or bolder.
font-style: This property specifies the style of the font. You can specify the font style as normal, italic, or oblique.
line-height: This property specifies the line height. The line height is the amount of space between lines of text.
letter-spacing: This property specifies the letter spacing. The letter spacing is the amount of space between letters.
text-align: This property specifies the text alignment. You can specify the text alignment as left, right, center, or justify.

You can use these CSS properties to create a variety of different typographical effects. For example, you can use a large, bold font for headings, and a smaller, lighter font for body text. You can also use different colors and line heights to create a more visually appealing design.

Chapter 3: Advanced Typography Techniques

Once you've mastered the basics of typography, you can start experimenting with more advanced techniques. This chapter will cover topics such as kerning, ligatures, and drop caps.

Kerning is the process of adjusting the spacing between pairs of letters. Kerning can be used to improve the readability and appearance of text. For example, you might kern the letters in a headline to make them more visually appealing.

Ligatures are typographical devices that combine two or more letters into a single glyph. Ligatures can be used to improve the readability and appearance of text. For example, the ligature for the letters "fi" is often used in body text.

Drop caps are large, decorative letters that are used at the beginning of paragraphs. Drop caps can be used to add visual interest to a page and to make it easier to find the beginning of paragraphs.

These are just a few of the advanced typography techniques that you can use to create beautiful and effective typography for your website.

Typography is an essential part of web design. It can make your website more readable, visually appealing, and effective. This book has provided you with a comprehensive guide to typography for the web. Whether you're a beginner or an experienced designer, this book will help you create beautiful and effective typography for your website.

Better Web Typography for a Better Web

4.7 out of 5