Typography - CSS applied

Question 1

How can you change the baseline of a font with CSS?

Answer 1

You can change the baseline of a font using the vertical-align CSS property. Here’s how:

1.- Select the element you want to modify the font baseline for.
2.- Set the vertical-align property to the desired value. For example, if you want to lower the baseline of the font, you can set vertical-align: sub;. If you want to raise the baseline of the font, you can set vertical-align: super;.

Here’s an example of how you can use vertical-align to lower the baseline of a font:

<p style="font-size: 24px; vertical-align: sub;">This text has a lowered baseline.</p>

In this example, the text in the paragraph element will appear slightly lower than the default baseline for the font. You can experiment with different values for vertical-align to achieve the desired effect.

Note: vertical-align CSS property only works on inline, inline-block or table-cell box formatting contexts.

“vertical-align - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved March 31, 2023.

Question 2

How can you change the cap height of a font face with CSS?

Answer 2

You can’t directly change the cap height of a font face using CSS, as it’s a property of the font itself. You can only choose a font that has your desired cap height.

“Material Design”. Retrieved April 3, 2023.

Question 3

How can you simulate cap height change with CSS?

Answer 3

You can’t directly change the cap height of a font face using CSS but, you can use a combination of CSS properties to scale and position the text to create a similar effect. Here’s a workaround that involves transforming the text:

1. Choose a font that has a similar cap height to your desired cap height.
2. Scale the font-size to match your desired cap height.
3. Adjust the line-height and vertical-align properties to position the text correctly.

Example

.adjusted-cap-height {
  font-size: 24px; /* Set your desired font-size */
  line-height: 1; /* Adjust line-height to fit the new cap height */
  display: inline-block;
  vertical-align: middle; /* Center the text vertically */
  transform-origin: bottom; /* Set the transform origin to the bottom */
  transform: scaleY(0.8); /* Set the scaleY property to scale the text vertically */
}

It’s important to note that this method doesn’t directly change the font’s cap height, but rather, it scales and positions the text to create a similar effect. Here’s a detailed explanation of the CSS properties used in this ruleset:

1. font-size: 24px;: This sets the desired font size for the text. You can change this value to adjust the overall size of the text.
2. line-height: 1;: This sets the line-height of the text. By using a unitless value, the line height is calculated as a multiple of the font size. In this case, we set it to 1 so the line height is equal to the font size, which helps accommodate the adjusted cap height.
3. display: inline-block;: By setting the display to inline-block, the text element can have a width and height determined by its content, and it will be placed inline with the surrounding text. This also allows us to use the vertical-align property.
4. vertical-align: middle;: This vertically aligns the text within the .adjusted-cap-height element relative to the surrounding content. In this case, it centers the text vertically.
5. transform-origin: bottom;: The transform-origin property sets the origin for the transformation applied to the element. In this case, it’s

Question 4

How can you change the x-height of a font with CSS?

Answer 4

You can’t directly change the x-height of a font face using CSS, as it’s a property of the font itself. You can only choose a font that has your desired x-height.

“Material Design”. Retrieved April 3, 2023.

Question 5

is it possible to change the ascenders and descenders of a font?

Answer 5

Changing the ascenders and descenders of a font is not directly possible using CSS, as these are properties of the font’s design.

“Material Design”. Retrieved April 3, 2023.

Question 6

How can you change the weight of a font with CSS?

Answer 6

With the font-weight property. This property allows you to set the weight, or boldness, of the text. The values for font-weight can be either keywords or numeric values.

Example:

/* Using a keyword value */
p {
  font-weight: bold;
}

/* Using a numeric value (100 to 900, in increments of 100) */
h1 {
  font-weight: 700;
}

The most common keyword values are:

• thin: equivalent to 100
• normal: equivalent to 400
• bold: equivalent to 700
• heavy: equivalent to 900

Keep in mind that for a specific font weight to be displayed, the font family you’re using should include that specific weight. If it doesn’t, the browser will try to mimic the desired weight, which may not produce the best result visually.

“font-weight - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 11, 2023.

Question 7

How can you change the font type (serif, sans-serif) with CSS?

Answer 7

With the font-family property. This property allows you to specify a prioritized list of font family names and/or generic family names. The browser will use the first available font in the specified list.

Here’s an example of how to change the font type using CSS:

@font-face {
  font-family: "MyCustomFont";
  src: url("path/to/your/font-file.woff2") format("woff2"),
       url("path/to/your/font-file.woff") format("woff");
}

p {
  font-family: "MyCustomFont", Arial, sans-serif;
}

In this example, "MyCustomFont" will be used for <p> elements if the font files are available; otherwise, the browser will fall back to "Arial" or the default sans-serif font.

“font-family - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 11, 2023.

Question 8

How can you change the letter-spacing with CSS?

Answer 8

With letter-spacing property. This property allows you to control the amount of space between individual characters in a text element. The value can be set using various units, such as px, em, rem, or %. Positive values will increase the space between characters, while negative values will decrease it.

Example:

p {
  letter-spacing: 2px;
}

h1 {
  letter-spacing: 0.1em;
}

In this example, the <p> elements will have a letter-spacing of 2 pixels, and the <h1> elements will have a letter-spacing of 0.1 times the font size (due to the use of em).

“letter-spacing - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 11, 2023.

Question 9

How can you create tabular figures with CSS?

Answer 9

With the font-variant-numeric property with the tabular-nums value. This value forces the numbers to use a fixed width, allowing them to align properly in tabular contexts.

Example:

table {
  font-variant-numeric: tabular-nums;
}

Keep in mind that this property relies on the font family supporting tabular figures. If the font you’re using doesn’t support them, the property won’t have any effect.

As a fallback you can use a monospaced font family to set your tabular figures.

Example:

table {
  font-family: "Courier New", Courier, monospace;
}

Keep in mind that using a monospaced font family will make all characters have the same width, not just the numbers.

“font-variant-numeric - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 11, 2023.

Question 10

How can you change the line height of a font with CSS

Answer 10

You can change the line height of a font using the line-height CSS property. This property sets the distance between lines of text within an element, making it more readable and visually balanced.

You can set line-height using different units such as a number (unitless), pixels (px), ems (em), or percentages (%).

Examples:

p {
  line-height: 1.5; /* unitless */
}

p {
  line-height: 24px; /* pixels */
}

p {
  line-height: 1.5em; /* ems */
}

p {
  line-height: 150%; /* percentage */
}

In this example, the p element will have its line height adjusted according to the specified value.

“line-height - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 11

How can you change the paragraph spacing with CSS?

Answer 11

You can change the paragraph spacing with CSS by adjusting the margin or padding properties of the paragraph elements. Typically, you would modify the margin-top and margin-bottom properties to control the spacing between paragraphs.

For example:

p {
  margin-top: 16px; /* spacing above the paragraph */
  margin-bottom: 16px; /* spacing below the paragraph */
}

Alternatively, you can use the shorthand margin property:

p {
  margin: 16px 0; /* top and bottom margins are 16px, left and right margins are 0 */
}

In these examples, the p elements will have a 16-pixel spacing above and below each paragraph. Note that padding can also be used to create spacing within the paragraph element’s boundaries, but it’s more common to use margin for spacing between paragraphs.

“margin - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). and “padding - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 12, 2023.

Question 12

How can you change the type alignment of a font with CSS?

Answer 12

You can change the type alignment of a font with CSS using the text-align property. The possible values are left, right, center, and justify. For example:

p {
  text-align: start | center | left | right | justify;
}

“text-align - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 13, 2023.