nicoshaggy

Una tipografía legible es fundamental para todo sitio, ya que si tenemos un buen contenido pero no se puede leer correctamente, es muy probable que nuestro visitante decida irse. Tipografía: Estilos y tamaños Habiendo dicho esto, lo recomendable para una lectura apropiada es tener una fuente clara (del tipo Serif o Sans Serif), tamaño grande, con interlineado amplio y un color de fondo que no canse la vista. Es conveniente emplear un tono claro y calmado para el fondo que no interrumpa la lectura. #contenido {font: normal 14px Arial, Helvetica, sans serif; line-height: 140%; background-color: #FDFDF;} Nociones básicas de estilos de fuentes Las tres familias recomendadas para trabajar en nuestro contenido son: Serif, Sans Serif y Slab Serif. Serif es el vocablo en inglés que define los adornos o remates adicionales en los extremos de las letras, y la denominación para una familia de tipografías que presentan esa clase de terminación. Además de su clara aplicación en los sitios web, las fuentes de este estilo han sido parte de innumerables libros, diarios y revistas. - Las siguientes son fuentes Serif muy utilizadas, y recomendadas para páginas web: Georgia, Garamond, Calluna, Museo La familia Sans Serif recibe su nombre del francés, donde “sans” significa “sin”; sin remates. Es un estilo más moderno, con lineas simples; que también ha sido popularizado en el medio impreso y se ha extendido al formato digital. Algunos ejemplares de esta familia son: Helvetica, Arial, Tahoma, Verdana, Lucida Sans, Droid Sans Las fuentes de esta familia se caracterizan por adornos (serif) de apariencia cuadrada, o de bloque. El grosor de los trazos destina a las fuentes Slab Serif, generalmente, a encabezados de gran tamaño. Hay quienes las consideran una variante contemporánea de las Serif. Las siguientes son ejemplares de esta familia: Rockwell, Courier, Museo Slab Tamaño e interlineado Tamaño de la fuente: Actualmente, en los sitios se esta empezando a adoptar tamaños de fuente grandes para el contenido. El estándar sería de 14px a 16px para obtener una lectura clara y que no canse a la vista en las diferentes resoluciones de pantalla. #ejemplo {font-size: 16px;} Interlineado: El interlineado es la distancia que tenemos entre una linea de texto y otra en nuestro párrafo. Para seguir cumpliendo la premisa de claridad en nuestro sitio, debemos darle a nuestro texto un interlineado acorde al tamaño de la fuente. En el caso de que el texto tenga un tamaño de 14px el interlineado podría ser de 140%. Para asignar nuestro interlineado en el css solo debemos colocar: #ejemplo {line-height: 140%;} ¿Dónde puedo conseguir fuentes? Actualmente si queremos colocar fuentes directamente en nuestro sitio tenemos dos opciones populares: Google WebFonts : Google ofrece una gran variedad de fuentes en la que podremos encontrar un estilo que se adecue a nuestras necesidades. Este servicio que ofrece Google es totalmente gratuito e inclusive podremos añadir las fuentes que queramos a nuestra colección para luego descargarlas. FontSquirrel : este sitio más que nada ofrece descargas de hermosas fuentes profesionales y absolutamente gratuitas para poder utilizar en nuestros diseños. También cuenta con un servicio para crear “Font-face” kits que nos servirá para colocar fuentes personalizadas en nuestro sitio.

Estas páginas tienen listados de páginas web muy bien confeccionadas, con interesantes e innovadores detalles. Inspírate antes de comenzar con tu nuevo proyecto, estando al tanto de las tendencias 2012. Dribbble Dribbble es una comunidad creada por y para diseñadores, crea tu cuenta y comienza a compartir con tus colegas los avances de tus últimos páginas web, UI kits, aplicaciones y demás diseños. Si eres diseñador web, gráfico, ilustrador, artista de íconos, logos o tipografías siéntete cómodo. Unmatched Style Es una galería de diseños web realizados con CSS, que además tiene como cometido entablar ricas conversaciones y fomentar crítica constructiva. Unmatched Style muestra buenas prácticas en CSS y diseño que son ejemplo y fuente de inspiración. Creattica Una rica galería que muestra diseños hermosos e inspiradores en diferentes categorías: páginas web y aplicaciones, CSS, diseño de logos e íconos, publicidades, botones y demás elementos UI. Busca inspiración en Creattica y descarga algunos “freebies” que los diseñadores han realizado para compartir con la comunidad. UI Parade UI Parade tiene como objetivo mostrar diseños de user interface, o elementos UI que han creado los diseñadores más talentosos. Desde botones, paginaciones y navegación hasta slideshows y perfiles de usuarios. Encuentra en este sitio el estilo que deseas que tenga tu página y toma como ejemplo las técnicas empleadas. Grid Assault Escoge una grid para tu próximo diseño, tomando como inspiración sitios exitosos y bien diseñados que presentan grids complejas y bien ensambladas en Grid Assault. Perfecto si tu sitio web será rico en imágenes y/o videos. Media Queries En esta era del responsive design, los monitores tienen resoluciones variadas y los móviles tienen un papel importante por eso necesitamos un diseño que se adapte a la computadora y a mobile. Media Queries nos muestra screenshots en diferentes resoluciones (y dispositivos: smartphones, tablets, netbooks, y computadoras de escritorio) de una misma página web, muy útil para tener en cuenta las técnicas más usadas en nuestros propios diseños.