Skip to main content

Typography

Table of Contents​

font smoothing anti aliasing​

html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

why use web fonts?

NERD FONTS​

InconsolataGo NFM MesloLGS NFM

Cool fonts​

https://www.1001fonts.com/neversaydie-font.html https://www.dafont.com/cyberway-riders.font?text=BUILD+then+MARKET

Filetypes​

Fonts​

  • EOT was created by Microsoft and only is supported by Internet Explorer.
  • TTF is the basic type font created by Microsoft and Apple, and it works almost perfectly everywhere.
  • SVG is based on image replacement techniques and is only suitable for the Web.
  • Finally, WOFF and WOFF2 were also created exclusively for the Web and are basically TTF files with extra compression.

SASS Fluid Typography Mixin​

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Clamp​

min(), max(), and clamp() can be used to make sure a value doesn't exceed a "safe" limit: For example, "responsive type" that sets font-size with viewport units might still want a minimum size to ensure readability:

https://www.w3.org/TR/css-values-4/

.type {
  /\* Force the font-size to stay between 12px and 100px \*/
  font-size: clamp(12px, 10 \* (1vw + 1vh) / 2, 100px);
}

Note that clamp(), matching CSS conventions elsewhere, has its minimum value "win" over its maximum value if the two are in the "wrong order". That is, clamp(100px, ..., 50px) will resolve to 100px, exceeding its stated "max" value.

CSS Text-Wrap Property​

The CSS text-wrap property controls how text wraps around elements, such as images or other inline elements, within a container. It's designed to improve the readability and appearance of text by determining how it should break and wrap onto the next line. The text-wrap property can take several values, including balance, pretty, and wrap. Each of these values offers a different approach to handling text wrapping in a web page.

Balance​

The balance value aims to distribute lines of text evenly. It tries to ensure that the text is balanced across lines, making each line roughly the same length. This can help create a more aesthetically pleasing block of text, as it avoids large gaps and uneven line lengths that can occur with default wrapping behavior.

Pretty​

The pretty value is similar to balance but takes additional steps to enhance the visual appeal of the text. It not only balances the line lengths but also considers the placement of punctuation and the avoidance of widows and orphans (single words or short lines at the beginning or end of a paragraph). The pretty value is more sophisticated, aiming for an optimal reading experience by improving the overall look of the text block.

Wrap​

The wrap value is the default behavior of text wrapping, where lines break at the container's edge without any specific effort to balance or beautify the text block. The text simply flows naturally, wrapping onto the next line wherever it needs to based on the container's width. This method is straightforward but can sometimes result in less visually appealing text, with uneven line lengths and awkward breaks.

In summary, while the wrap value provides a basic method of handling text wrapping, the balance and pretty values offer more refined approaches. Balance focuses on creating evenly distributed lines, and pretty goes a step further by enhancing the visual quality of the text block, making both excellent choices for improving the readability and appearance of web content.