I have been playing around with the new Metro Touch skin and having great success.
I am curious as to the font families used, as well as the sizes and any other CSS embellishments. (if any)
I tried to reverse-engineer from Visual Style Builder, but it's apparently too soon to use this skin as a base for a new one, as it is not listed.
Can anybody tell me how to determine the fonts used by this or any other skin?
I don't see any options in Style Builder, so maybe all of the attributes are inherited from the base CSS that I would define.
Basically what I want to do is to make sure that my menus and other controls match the text fonts in the site.
The solution may be obvious to many, but I don't see where I should look...
I am curious as to the font families used, as well as the sizes and any other CSS embellishments. (if any)
I tried to reverse-engineer from Visual Style Builder, but it's apparently too soon to use this skin as a base for a new one, as it is not listed.
Can anybody tell me how to determine the fonts used by this or any other skin?
I don't see any options in Style Builder, so maybe all of the attributes are inherited from the base CSS that I would define.
Basically what I want to do is to make sure that my menus and other controls match the text fonts in the site.
The solution may be obvious to many, but I don't see where I should look...
2 Answers, 1 is accepted
0
Accepted
Hello, Thomas.
The Metro Touch skin, as well as most of the other skins uses Segoe UI font as default, then Arial then a generic font.
The only difference between the Metro Touch and other skins, in terms of fonts, is that Metro Touch is using slightly thinner font weight e.g. 100 instead of 400 and slightly taller fonts e.g. 16 instead of 12 pixels.
The final snippet looks like this:
As for determining the fonts, just use any console / inspector tool you like -- F12 (developer tools) for IE, Web Inspector for Chrome / Safari, DragonFly for Opera, FireBug for FireFox. Then find your way to the font styles and you have it.
Alternatively, you may use services like What the Font by taking a screenshot and uploading it there.
And of course, you may ask here in the forums, or the support threads.
All the best,
Ivan Zhekov
the Telerik team
The Metro Touch skin, as well as most of the other skins uses Segoe UI font as default, then Arial then a generic font.
The only difference between the Metro Touch and other skins, in terms of fonts, is that Metro Touch is using slightly thinner font weight e.g. 100 instead of 400 and slightly taller fonts e.g. 16 instead of 12 pixels.
The final snippet looks like this:
selector { font: 100 16px/20px "Segoe UI", Arial, sans-serif;}/** Or longer version */selector { font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 20px; font-weight: 100;}As for determining the fonts, just use any console / inspector tool you like -- F12 (developer tools) for IE, Web Inspector for Chrome / Safari, DragonFly for Opera, FireBug for FireFox. Then find your way to the font styles and you have it.
Alternatively, you may use services like What the Font by taking a screenshot and uploading it there.
And of course, you may ask here in the forums, or the support threads.
All the best,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tomica
Top achievements
Rank 2
Rank 2
answered on 18 Sep 2012, 03:50 PM
Ivan, you are absolutely correct, all I needed was a few pointers on where to look.
I am a programmer, not a web designer, so these things were often a mystery to me.
The good news is that the RAD controls do almost all of that for me, most of the time, one of the great reasons to use them!
I am a programmer, not a web designer, so these things were often a mystery to me.
The good news is that the RAD controls do almost all of that for me, most of the time, one of the great reasons to use them!