En Internet podemos encontrar miles de tipos de letras gratuitas del tipo OpenType o TrueType, de mayor o menos calidad que se pueden utilizar en nuestros proyectos de diseño. Pero por otro lado, hay muy pocas fuentes libres en formatos vectoriales.

Las diferentes maneras en que las utilicemos está en nuestras mano, en el artículo 19 Creative And Free Fonts In Vector Formats, de WebResourcesDepot, nos deja una selección de 19 tipografía de calidad y gratuitas en formato vectorial, como AI, EPS o PDF, que podemos escalar a voluntad, especialmente cuando se desea modificar o agregar un toque extra a ellas.

Algunas de ellas son decorativas y otras no, en el artículo encontramos una vista previa de cada una de ellas y su enlace a su descarga.

Un uso que se me ocurre que podemos darle a este tipo de letras es como letra capital, en donde puede estar apoyada en el mismo renglón que la primera línea del texto, con el mismo márgen. Este es uno de los tipos más fáciles de colocar en una computadora, incluido en HTML. Un ejemplo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Podemos crear una letra capital —si interesa en algún tipo de trabajo— me refiero a la primera letra de un párrafo que destaca al ser más grande, de una manera muy sencilla, con el pseudo elemento incluido en CSS 1, por lo que los navegadores lo soportan bien.

Lamentablemente sólo se puede aplicar una cantidad limitada de propiedades a ese efecto, según w3schools (tipo de letra, color, fondo, margen, el relleno, etc.) y alguna que otras propiedades más.

Otra manera es realizar esa letra capital de modo gráfico, colocando una imagen sin más al principio, a la izquierda, pero podemos conseguir ese efecto, también colocando un gráfico, pero con más control, utilizando CSS tal y como lo muestran en ONYX DESIGN, con el siguiente código:

p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}

Puedes ver en este enlace un ejemplo del resultado que se puede conseguir.