Los Angeles

Расстояние между элементами списка задается с помощью margin применённого к тегу
Позиционирование всего списка реализуется применением необходимых стилей к тегу

Если интересует, ты можешь просто зайти вот сюда materializecss.com тут скачать этотфреймворк, и посидеть потупить в код. Я думаю многие вещи тебе проясняться. Он написан как раз с применением принципов material от google. + там на сайте есть ещё и демки посмотреть по всем компонентам как работают.

Шрифты устанавливаются, грубо говоря в операционную систему, если этого шрифта в системе нет, то в скачаном макета, фотошоп ругнется на отсутствие, и предложит отобразить этот текст другим шрифтом. Следственно, если в системе нет нужного шрифта, то его придётся качать. И тогда и в фш будет все норм, и в браузере. Только подключить не забудь шрифт к верстке.