font-size: 100%;
In most browsers, this defaults to 16 pixels. Inheriting the base font size from browsers allow users to use browser preference to set their comfortable font size.em
or rem
) to set font sizes for other elements. This is crucial because it means that changing the base font size will also change all other font sizes.The fixed restrictions of the UI metrics was the primary, non-negotiable term in the Nirmala UI design brief: whatever we did had to fit within the vertical metrics of the Segoe UI and other UI fonts. The core target size for UI use, despite the increase in screen resolutions on many Win8 devices, is still 9pt at 96ppi, i.e. 12 ppem, with some Office UI items displaying at 8pt (with further restrictions on ppi height through VDMX adjustments at some sizes). At 12 ppem, we have exactly 3 pixels below the baseline before we hit the OS/2 WinDescent limit, beyond which glyphs will be clipped. Many of the Indian writing systems make significant use of the space below the baseline, so we had to employ a number of strategies to squeeze subjoined letters and other descending shapes into the UI metrics. The results are not all pleasant, and some contravene the norms of these writing systems, achieving only a legible decipherability, rather than true readability.
lang
attribute. Then use the following css:0x00AD
) but that is not always optimal. Several scripts prefere non-visible hyphenation character at the place of word break. This can be controlled by hyphenate-character
CSS property. But not widely implemented. -webkit-hyphenate-character: '';
works for webkit browsersmalayalam
that use Malayalam numberals, but they are almost never used. Devanagari counter styles are not used by all languages that use Devanagari. For example, Hindi prefers default 1,2,3 style. This is not without debates. For example, Hindi wikipedia has a top prominent dropdown to choose the preferred number style(this makes the interface quite bad in my opinion)font-feature-settings: "tnum";
. Enabling this for tables is recommended. A good quality typeface will have this implemented and it helps a lot for fast scanning and analysing data.font-feature-settings: "frac";
font-smoothing
- badly speced and unxpected results depending background and foreground color. Pick a good font instead.font-stretch
- Don't override the designer of the font. The results won't be pretty, especially for complex scriptsfont-size-adjust
- Don't override the designer of the font. The results won't be pretty, especially for complex scripts:dir()
The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them. Be aware that the behavior of the :dir()
pseudo-class is not equivalent to the [dir=…]
attribute selectors. The latter match the HTML dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, [dir=rtl]
and [dir=ltr]
won't match the auto value.) In contrast, :dir()
will match the value calculated by the user agent, even if inherited. it doesn’t have great support, is considered experimentaldirection
The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl
for languages written from right to left (like Hebrew or Arabic), and ltr
for those written from left to right (like English and most other languages). Note that text direction is usually defined within a document (e.g., with HTML's dir
attribute) rather than through direct use of the direction
property.letter-spacing
Don't change this to support complex scripts. Just use defaultsfont-kerning
By default kerning is enabled by browsers. Don't play with it.text-decoration-skip: ink
; can be used to skip glyphs that cross that underline. MDN documentation