CSS Typography

Page Bookmarks

• Typography/Font
• Text formatting
• Measurement unit
• Evolution of fonts
• Unicode fonts
• Font performance

Typography/Font

Typography refers to the art and techniques of arranging type and choosing fonts to make written language legible, readable, and appealing when displayed. Simply put, typography is the styling of text on a webpage. Good typography enhances the readability and overall aesthetic of the content. The typeface, font size, font weight, line height, and spacing between letters and words all make up typography.

Typography Attributes

CSS Example

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
}
h1 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
}
p {
    font-size: 18px;
    line-height: 1.5;
}

Best Practices

Choosing Typography Attributes for a Technical Website.

1. Choose legible fonts: When choosing a font for your website, prioritize legibility over novelty. Stick to common, readable fonts like Arial, Helvetica, and Times New Roman.
2. Keep it simple: Avoid using too many different fonts on your website, and stick to a maximum of two or three. This will help maintain coherence and clarity of your content.
3. Use a hierarchy: A clear hierarchy will ensure that visitors to your website can easily find and navigate your content. Use size, weight, and spacing to create a visual hierarchy within your text.
4. Balance line length: Keep your lines of text at a reasonable length for optimal readability. Aim for around 50 to 75 characters per line to avoid eye strain.
5. Choose appropriate sizes: Choose font sizes based on the importance and context of your content. Use larger sizes for headings and smaller sizes for body text.
6. Adjust letter-spacing: Adjusting the letter-spacing can increase the legibility of your text. Try adding a little bit of space between each letter for better readability.
7. Use text-transform: Use text-transform to format your text in a way that is appropriate for the context. For example, use uppercase for headings and title case for sentence case for body text.

Text formatting

Text formatting, refers to the process of manipulating text to affect its appearance and presentation. It includes techniques such as using bold or italics to emphasize certain words, underlining text to indicate hyperlinks, and centering text to create emphasis. Text formatting can be done in CSS using various properties to change the style of text, such as font-weight, text-transform, text-decoration, text-align, letter-spacing, line-height, and more.

CSS Example

/* Target all paragraphs on the page */
p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  text-align: justify;
}

/* Target headings on the page */
h1, h2, h3, h4, h5, h6 {
  font-family: Times New Roman, serif;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Target links on the page */
a {
  color: #0077cc;
  text-decoration: none;
}

/* Target the first letter of all paragraphs */
p:first-of-type:first-letter {
  font-size: larger;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

Best Practices

When it comes to text formatting on a technical website, it's important to strike a balance between readability and visual appeal. Here are some best practices to follow:

• Use a readable font: Stick to web-safe fonts like Arial, Helvetica, and Georgia. Avoid using decorative fonts that are difficult to read.
• Choose an appropriate font size: Use a font size of at least 16px to ensure that your text is easily readable, even on smaller screens.
• Set line-height and spacing: Adequate spacing between lines and paragraphs can improve readability. Line-height between 1.3 and 1.5 is commonly used.
• Use headings: Use properly-structured HTML headings (h1, h2, etc.) to organize content into sections and help the user quickly locate what they're looking for.
• Break up text: Use lists, tables, and images to break up large blocks of text into smaller, more manageable pieces.
• Use bold and italics sparingly: Bold and italicized text can be effective for highlighting keywords or phrases, but using them too often can make the text difficult to read.
• Use color with care: Use color to make important bits of information stand out, but avoid using too many different colors as it can be overwhelming.

CSS Measurement Units

When it comes to CSS text formatting and typography, there are several different measurement units you can use. Here's an overview of the most common units:

• px: This stands for pixels and is the most commonly used unit for text. It's an absolute length measurement and produces consistent results across devices with the same screen resolution.
• em: This is a relative length unit that's based on the font-size of the parent element. 1em is equal to the font-size of the parent element.
• rem: This is a relative length unit that's based on the font-size of the root element (html element). 1rem is equal to the font-size of the root element.
• %: This is another relative unit that's based on the font-size of the parent element. For example, 150% is equal to the 1.5 times the parent element's font-size.
• vh: This is a relative length unit that's based on the viewport height. 1vh is equal to 1% of the viewport height.
• vw: This is a relative length unit that's based on the viewport width. 1vw is equal to 1% of the viewport width.

When it comes to choosing which unit to use, it depends on the context and objectives of the website. However, em and rem units are recommended for responsive design because they adjust the text size according to the user's font size preferences.

Evolution of Fonts

Fonts have come a long way since the early days of the web, when designers were limited to a handful of safe, standard fonts. Today, there are thousands of fonts available for use on the web, and designers have embraced the opportunity to use typography as a key element of their designs.

One of the most exciting aspects of modern web design is the sheer variety of fonts available. Websites like Google Fonts, Adobe Fonts, and Typekit offer thousands of high-quality, easy-to-use fonts for free or for a fee. Designers can now choose from a vast range of options, from classic serifs to modern sans-serifs and everything in between.

But with all this choice comes some challenges, too. Designers need to think carefully about pairing fonts, ensuring that they work well together and communicate the right message. They also need to consider the readability of fonts, especially on smaller screens or devices like smartphones.

In addition to these visual considerations, there are some technical aspects to font usage that designers need to understand. For example, the use of Unicode can affect how fonts are displayed, and designers need to ensure that they're using the right encoding to ensure that their fonts display correctly across different devices and platforms.

One important consideration when using fonts is their impact on website performance. With so many fonts available, it can be tempting to use multiple fonts on a single page, but this can slow down page load times and hurt overall performance. Therefore, it's important to choose fonts carefully and use them judiciously to ensure the best possible user experience.

Despite these challenges, fonts are an essential element of modern web design, and designers have a wealth of options to choose from. Whether you're looking for a classic, elegant serif or a bold, modern sans-serif, you're sure to find a font that's perfect for your project.

Font Resources

Here are some websites where you can find interesitn fonts. You can download the fonts and install them on your website or you can include in your website using a CSS.

• Google Fonts
• Adobe Fonts
• Typekit

Google Fonts

To include a Google font in your CSS style file, you need to first find the font you want to use. You can do this by visiting the Google Fonts website. Once you've found the font you want follow these steps:

• Click the "Select This Font" button to add it to your collection.
• Next, click the "Embed" tab to view the code you need to add to your CSS style file.
• Copy the @font-face rule from the code and paste it into your CSS style file.
• Finally, specify the font family and style you want to use in your CSS style rules.

Here is an example of how to include a Google font in your CSS style file:

@font-face {
  font-family: 'Roboto';
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
}

body {
  font-family: Roboto, sans-serif;
}

UNICODE Fonts

Unicode is a character encoding standard that enables different devices and platforms to display the same characters and symbols. When it comes to fonts, Unicode determines how characters are mapped to specific glyphs or shapes.

In practice, this means that different fonts can display the same text in slightly different ways, depending on how their glyphs are designed. To ensure that text displays correctly across different devices and platforms, it's important to use Unicode consistently and to choose fonts that support the characters you need.

Performance

While fonts are an essential element of modern web design, they can also have a significant impact on overall website performance. Each additional font requires a separate HTTP request, which can slow down page load times and reduce the site's overall speed and performance.

To minimize the impact of fonts on performance, designers should use only the fonts that are necessary for the site's design and avoid using too many different fonts on a single page. Additionally, designers can use techniques like font subsetting, which only includes the characters that are necessary for the site's content, to minimize file size and improve performance.