10 Beautiful and free must have Serif Fonts

If you are looking for new interesting fonts, here is a collection of ten beautiful, free and must have serif typefaces for the web and print. This collection includes Medio, Jura, Fontin, Sling, Calluna, Lido STF, Salernomi, Novello Pro, Steinem, TeX Gyre Schola.


1. Medio (download)
Medio is one of my favourite fonts designed by dotcolon (the same authors of Vegur, Tenderness and Ferrum)




2. Jura (download)
Jura is a distinctive yet readable serif typeface, suitable for headings and body content alike. It features 96 of the most commonly used glyphs (characters).





3. Fontin (download)
The Fontin is designed to be used at small sizes. The color is darkish, the spacing loose and the x-height tall. Don't forget to check Fontin Sans!





4. Sling (download)
Sling is a versatile typeface available in bold, normal and light version.





5. Calluna Regular (download)
Calluna regular is a popular typeface designed by Jos Buivenga author the best seller font Museo on myfonts.com.





6. Lido STF (download)
Lido STF is a font designed by František Štorm for the periodical Lidové noviny (People’s Newspaper). This font is a modification of the original Times New Romans font.





7. Salernomi (download)
Salernomi is an elegant typeface designed by Julius B. Thyssen. You can use it with a perfect result for the web and print.





8. Novello Pro (download)
Novello Pro is a moderate Roman typeface with round serifs and modern details designed by Ingo Zimmermann.




9. Steinem (download)




10. TeX Gyre Schola (download)
TeX Gyre Schola is another great serif font especially useful for the print.

 

HTML lists: what's new in HTML 5?

There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of lists in HTML 5.
How you know HTML has three types of lists:

- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list

The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd> tags define a definition term and the related description in a definition list. These tags are all supported in HTML 5 version but there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).

<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav> tag in HTML 5. How you know, unordered lists are commonly used to implement the navigation bar of a website. The typical structure of a navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar

<div id="nav">
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In HTML 5, the structure of a navigation bar is the same illustrated in the previous code. The only thing that changes is the the external "container" of the unordered list. You have to use the new <nav> instead a generic <div> tag

<nav>
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition lists are not frequently used in web design end a lot of people even ignore their existence! In general their use is mainly suggested when you have to represent a list of items with a related description for each item of the list. Here is the code that describes a generic definition list:

<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl> tags (these tag are used to define a term and its description in a definition list) to describe a conversation. Here is an example of dialog structure

<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:

Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.

That's all. If you have some suggestion about this topic, please leave a comment. Thanks!

 

Blogger now supports natively expandable post summaries

Finally! Blogger has introduced After the Jump a feature which lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More.

Creating jump breaks in your blog posts can be easily done right from the post editor, without the need for any HTML changes.

The only thing you have to do is to add this code into the post editor:

<!-- more -->

Take a look at this post that explains in detail how to implement expandable post summaries.

Rediscovering HTML tables

I decided to write this post after several conversations I recently had with some of my readers about the use of HTML tables. In general, I noticed there is a preconceived hate about their use due to misleading information. In fact a lot of people say "I read tables should never be used", but this is absolutely false! This recommendation only regards the use of HTML tables to define the layout of HTML pages, but tables are perfect to arrange easily data into rows and columns and if you have to display tabular data within a web page you have to use them! Why not? So, in this situation, some people ignore the existence of some HTML tags for tables and how to use them properly.


HTML has ten table related tags. Here's the list with indicated if the element is defined in HTML 4.01 and/or HTML 5:

<caption> defines a table caption (4, 5)
<col> defines attributes for table columns (4, 5)
<colgroup> defines groups of table columns (4, 5)
<table> defines a table (4, 5)
<tbody> defines a table body (4, 5)
<td> defines a table cell (4, 5)
<tfoot> defines a table footer (4, 5)
<th> defines a table header (4, 5)
<thead> defines a table header (4, 5)
<tr> defines a table row (4, 5)

A basic table structure is the following:

It contains a caption, header, body and footer. The correct order of HTML elements is:

1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>

According to definition and usage of w3schools, the element <tfoot> must appear before <tbody> within a table definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data (read more).

You can also use <col> and <colgroup> to define attributes for table columns or define group of table columns:

1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

The following code is an example of a correct table structure:

<table border="1">

<caption>Table caption here</caption>

<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<!-- Table Header-->
<thead>

<tr>

<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>

</tr>

</thead>

<!-- Table Footer-->

<tfoot>

<tr>

<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>

</tr>

</tfoot>

<!-- Table Body-->
<tbody>

<tr>

<td>A</td>
<td>B</td>
<td>C</td>

</tr>
<tr>

<td>D</td>
<td>E</td>
<td>F</td>

</tr>

</tbody>

</table>

The result on a browser is the following:

align and bgcolor attributes of the table are deprecated, so in HTML 5 no table attributes are supported. Obviously you can use style sheet to customize the style of each table element.

For a more detailed articles about HTML tables read this interesting post: w3 Introduction to tables

That's all. Do you have any suggestion about this topic? Please leave a comment, thanks.

 

Alessandra Ambrosio

Landscape

HTML 5 Visual Cheat Sheet by Woork

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.
Here's a preview of my cheat sheet:

This is an example of listed tags and attributes:

HTML 5 Cheat Sheet is available in high quality for A3 paper format. Take a look at this link for a preview or download the high quality version (dark or white background):

Dark Background:

- PDF high-quality (new! thanks to Julie Webb)
- JPG high-quality




White Background New!:
I prepared this print-friendly version:

Download this version here:

- PDF Version
- JPG hig-quality




The Flickr version is here.

If you have some suggestion about this cheat sheet please leave a comment or write me to my e-mail address.