Syncotype your baselines
¿Qué significa el título? Se refiere a ajustar el alto de líneas de tu texto para que concuerde en las diferentes cajas o divs aunque tengan diferentes tamaños de letra. ¿Confuso? esta captura lo explica mejor.
Se ve bien a primera vista, incluso el autor del post usa este recurso en su blog y se ve bien, pero... es engañoso.
Como pueden veer el diseño termina muy rígido a mi parecer, otro detalle es que si bien funciona con ciertos tamaños de letra, cuando la diferencia se agranda comienza a descomponerse la cosa. Cada tamaño de texto tiene una altura de línea óptima (en la teoría y en la práctica), y este recurso llamado Syncotype lo pasa por alto.
Visualmente los textos más pequeños necesitan menos altura de línea de otro modo se vuelve dificil la lectura. Syncotype, una solución para tomarse en cuenta y tenerla en nuestro abanico de herramientas pero hay que tener cuidado con su uso.
Soulfighter el día 9 de Agosto de 2007 a las 7:46 pm escribió:
La cuestion con este tipo de alineacion, es que tienes que calcular el tamaño del renglon basado en los tamaños de letra que se van a usar en el diseño, y las cajas de texto tienen que tener congruencia con esta. Ese tipo de alineacion es utilizado en diseño editorial para mantener los contenidos organizados y congruentes.
Por otro lado en web las cosas funcionan distinto y las cajas y los textos no se ajustan igual. Seria interesante crear algunas plantillas para alinear los textos de ese modo en web…
Droid el día 10 de Agosto de 2007 a las 3:40 am escribió:
Últimamente están saliendo varios de estos, aquí está otro.
http://bjorkoy.com/blueprint/
victor el día 10 de Agosto de 2007 a las 10:05 am escribió:
Esta curado ese CSS framework , Droid lo has usado?
lo voy a probar en el proyecto que ando si me gusta lo voy a usar de base para mi php+css framework que quiero hacer
Droid el día 10 de Agosto de 2007 a las 12:27 pm escribió:
Ya vi con detenimiento el framework, si está chido en algunas cosas, el grid por ejem.
Pero estaba viendo el css que trae y sus páginas de ejemplo y el markup está mal.
Por ejem. en vez de usar un
#headerusan.span-14, estoy hablando de un bloque de 960 px de ancho que servirá como header.Lo mismo pasa con otros elementos del framework, en vez de hacer un uso semántico en el código todo viene con etiquetas de
.span-1, .span-2, .span3, etc. Yo se que esto se puede modificar y ajustarlo a tus necesidades, pero de entrada ellos te ofrecen tamaños predeterminados para headers, footers pero que no se usan con el markup correcto.Axel Valdez el día 14 de Agosto de 2007 a las 9:59 am escribió:
Droid: El markup que genera son divs, y cuando lo estás definiendo puedes agregarle ids, de manera que el header te puede quedar [div id="header" class="column span-14"][/div]. Con eso generas el grid rapidito y tienes ids para hacer lo que quieras con cada bloque.
No se si te refieras a eso, yo lo bajé y lo estuve checando como por 20 minutos, igual y no le alcancé a encontrar algunas broncas.
Droid el día 14 de Agosto de 2007 a las 11:55 am escribió:
Tienes razón Axel, ignorante yo que no lo vi así.
Dije mi comentario basado totalmente en el ejemplo que tienen en línea, en ese doc es donde usan sólo los span y por eso lo que escribí, pero el uso que tu propones es semanticamente correcto y aplica perfectamente para el caso.
Vamos a darle una segunda revisada, porque de entrada soluciona varias rutinas que siempre hacemos al iniciar un sitio.
Gracias por iluminarnos je.