# 03.27.2022 - Typography/Respect user's default font size

When working with text and CSS, we usually assume that the default font size of the browser is always a fixed number (for example, 16px), therefore, we don't think much when setting the base font size in the `html` or `body` tags to a particular pixel value, for example:

```css
html {
    font-size: 16px;
}
```

This is fine with web applications, but for content-oriented websites (like news sites, blogs, or other forms of content), this could lead to usability problems. Not everyone has the same preference for the default font size, and users can change their browser's default font size to any number. For example, in Chrome, it can be changed in [chrome://settings/fonts](chrome://settings/fonts).

It's a good practice to respect the user's preferences by setting your document's font size to a relative unit, for example:

```css
html {
    font-size: 100%;
}
```

And then, use `em` or `rem` values accordingly for the inner elements.

You can check sites like [Wikipedia](https://wikipedia.com), [The Economist](https://economist.com), [NYTimes](https://nytimes.com),... and see that they do respect the browser's default font size. While there are a lot of other well-known websites that set their own font size in pixels.

Respect default font size

# 03.26.2022 - Typography/Hanging Punctuation

Hanging punctuation is the practice of pulling the punctuation marks into the margin of a text so that it does not disturb the _vertical [reading flow](https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/)_.

![](_meta/hanging-punctuation.png)

It was first introduced by Gutenberg in the [Gutenberg Bible](https://en.wikipedia.org/wiki/Gutenberg_Bible), the first book printed in Europe.

This practice should be applied to text that starts with a punctuation mark, for example, *quotations*, or *lists*,... and can be applied on both the left and right margin.

![](_meta/list-markers-to-margin.png)

In CSS, there are different ways to implement hanging punctuation, for example, using the `hanging-punctuation` for body text or `list-style-position` for list items, or you can remove the padding, margin, depending on your HTML structure.

When using this style, pay attention to the mobile view or other small screen devices, because the punctuations might get overlapped to the edge of the screen.

**References**

- https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/#hanging-punctuation
- https://en.wikipedia.org/wiki/Hanging_punctuation
- https://www.artlebedev.com/mandership/120/
- https://www.fonts.com/content/learning/fontology/level-4/fine-typography/hanging-punctuation
- https://fonts.google.com/knowledge/using_type/working_with_hanging_punctuation
- https://css-tricks.com/almanac/properties/h/hanging-punctuation/

Hanging Punctuation

# 02.03.2022 - Typography/Faux Bold and Faux Italic

When you load custom web fonts with just the regular font-weight, no bold or italic styles, the browser tries its best to render them in bold and italic style by **faking** it.

These styles are called **faux** weights and styles.

Faux bold is made by **stretching the vertical strokes** of the original font.

![](_meta/faux-font-details.png)
Source: https://graphicdesign.stackexchange.com/a/76034

Faux italic is made by **slanting** the original font at an angle. Some fonts actually use the same technique, and it's called **oblique**.

This makes some fonts look bad, especially for serif fonts, where all the strokes are precisely well made, and usually have **true italic** styles.

![](_meta/faux-italic.png)
Source: https://graphicdesign.stackexchange.com/a/76034

Generally, all designers hate faux styles. But as front-end developers, we should try our best to balance between the performance of the web page and the high standard of our fellow designers. And it's not an easy job, trust me.

If loading different font styles actually bring down your site's performance, you should consider using faux styles. Of course, this should come with the agreement from your designers and carefully test the difference between real and faux styles.

Here is the comparison of the styles between some commonly used web fonts from Google Fonts.

![](_meta/faux-real-comparision.png)

You can see the high-resolution version of the image [here](https://raw.githubusercontent.com/huytd/everyday/master/_meta/faux-real-comparision.png), or see it directly in your browser [here](https://codepen.io/huytd/pen/LYOZqwo) and [here](https://codepen.io/huytd/pen/podbYbV).

**What's next?**

- https://alistapart.com/article/say-no-to-faux-bold/
- https://www.smashingmagazine.com/2012/07/avoiding-faux-weights-styles-google-web-fonts/