How to create a Metro UI with fonts that look good at any resolution?

When you look at Recommendations for fonts , we see that fonts are indicated in dots. The point is 1/72 of an inch, so it is an absolute measure: the symbol of 10 points should be displayed with the same absolute size on any monitor at any resolution. That would make sense to me, because I want to be able to read text - the same size - whether itโ€™s on tablet 10 or on monitor 23. In other words, I want my text to be readable on the tablet, but I donโ€™t want so that it is too big on the monitor.

On the other hand, I can understand that some user interface elements can be specified in pixels, as in the Page Layout Guide .

However, in XAML, the font size is indicated in pixels, which are device dependent (to my understanding). Consequently, the font size will look tiny on a higher resolution monitor! See more details. The response in this post reads: โ€œThis way you get a consistent font size.โ€ I donโ€™t see how I get a consistent size when it changes when the resolution changes?!?

Do I have to download a different font size programmatically depending on the resolution of the device? I see here that Windows does some scaling adjustment based on DPI. Will this setting be sufficient for my users to have a lot of experience on a tablet and, say, on a 20-inch monitor (or should I programmatically change the font size depending on the resolution of the device)?

Bonus question: WHY Fonts written with glasses when the software does not use dots (for example, what do they think)?

+4
source share
1 answer

"What they think" is widely covered in this blog post .

You will also see how pixel density scaling happens automatically:

For those who buy these screens with a higher pixel density, we want their applications, text and images to look both beautiful and convenient on these devices. In the beginning, we examined continuous pixel density scaling that would support the size of an object in inches, but we found that most applications use bitmap images that may appear blurry when zoomed in or out to an unpredictable size. Instead, Windows 8 uses a predictable scale to ensure that Windows will look great on these devices. Windows 8 has a three percent scale:

100% when no scaling is applied 140% for HD tablets 180% for quad-XGA tablets 

Percentages are optimized for real devices in the ecosystem. 140% and 180% may seem strange samples on a scale, but they make sense when you think about how it will work on real equipment.

For example, a scale of 140% is optimized for tablets HD 1920x1080, which has 140% of the base tablet with a resolution of 1366x768. These optimized scale factors support consistent layouts between the base tablet and HD tablets, as the effective resolution is the same on both devices. Each zoom percentage was chosen to ensure that a layout that was designed for 100% 1366x768 tablets has content that has the same physical size and layout on 140% HD tablets or 180 percent Quad-XGA tablets.

enter image description here

+5
source

All Articles