Fuente tipo Metro para uso del sitio web

Question

¿Qué tipo de letra le recomendaría (gratis para uso comercial) a un sitio web con el estilo de Metro Windows 8? Sería mejor si está en Google Fonts, etc.

Answer 1

Si quiere que sea exactamente como el metro, podría usar http://www.fontsquirrel.com/ y cargar una fuente.

NOTA: Asegúrese de tener una licencia para la fuente si utiliza fontsquirrel, como se menciona en los comentarios.

De lo contrario, tal vez Helvetica o Arial. Esos son los armarios de fuentes Web Safe que se me ocurren.

La nueva fuente metro es una fuente Sans Serif y Arial siempre ha sido la fuente Sans Serif más estrechamente relacionada con Windows.

También estoy usando esta fuente de Google con un logotipo de fuente metro y creo que son bastante similares.

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css"> 

Consulte también el sitio web de Microsoft. Están utilizando esta familia de fuentes .. font-family: segoe ui, verdana, arial, sans-serif;

http://windows.microsoft.com/en-US/windows/home

También puedes ver este post, parece ser muy similar. https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7

Answer 2

La fuente utilizada con la marca 'Metro' es Segoe UI. Desafortunadamente, como han mencionado otros, no está disponible como descarga gratuita.

Aunque, incluso si tiene Segoe, es posible que otros usuarios de su aplicación web no lo hagan. En consecuencia, para que se muestre constantemente a sus usuarios, necesitará @font-face. Pero, por desgracia, debido a la licencia, sería contra la ley simplemente alojarlo en su servidor y hacerlo de frente. La única forma legal de usar Segoe UI es purchase a license para usarlo.

Pero usted quiere una opción gratuita, así que echemos un vistazo a algunos looks de Segoe.

Segoe UI es increíblemente similar a Frutiger - tan similar, de hecho, que Microsoft was taken to court by Linotype over it - pero, por supuesto, esa fuente tampoco es gratuita.

Si específicamente desea utilizar una fuente de Google, la popular Open Sans podría ser su mejor opción, aunque hay algunas diferencias notables entre ella y Segoe.

Puede que tenga más suerte encontrando fuentes que no son muy conocidas pero que están muy inspiradas en las famosas y costosas (algunas podrían llamarlas estafadores desvergonzados). Dos ejemplos son CartoGothic Std y WeblySleek UI. Para la mayoría de los usuarios, descubrirá que las diferencias entre estas fuentes son imperceptibles. Y tiene suerte, ya que, en el momento de escribir esto, sucede que puede alojar estas fuentes usted mismo para proporcionarlas a través del @font-face (Descargo de responsabilidad: le recomiendo que lea las licencias para obtener más detalles antes de hacer esto. sujeto a cambios).

¿Quiere una comparación rápida? Aquí hay algunas imágenes, tal como se representan en Photoshop en OSX. Los tamaños de letra son todos aproximadamente 10pt. Y todos están configurados en peso normal o de libro.Como puede ver, la mayor diferencia entre las primeras tres fuentes y Open Sans es la minúscula g. Estoy seguro de que hay más diferencias entre las letras mayúsculas, y te animo a explorar esos detalles.

Segoe UI

Segoe UI http://jmeas.com/stackoverflow/segoe.jpg

Frutiger

Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg

CartoGothic STD

Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek UI

Cartogothic STD http://so.jmeas.com/weblysleek.jpg

Open Sans

Open Sans http://jmeas.com/stackoverflow/open-sans.jpg

espero que uno de los adapte a sus necesidades.