Дмитрий Пыткин

Нужно использовать symbol, вот статьи с описанием методологии:
https://css-tricks.com/svg-sprites-use-better-icon...
https://css-tricks.com/svg-symbol-good-choice-icons/

В кратце, у нас есть один большой SVG со всеми изображениями в виде символов:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

Подключаем картинки на странице:

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

Всё картинки можно стилизовать через CSS (например задать заливку fill: black и т. д.). Замечу, что атрибут viewBox для символов нужно задавать обязательно, что-бы картинки правильно масштабировались (например если вы будете изменять их размеры).
Если вы используете grunt, взгляните в сторону grunt-svgstore: https://github.com/FWeinb/grunt-svgstore для автоматизации сборки картинок и обётки оных в один SVG контейнер.

Сделайте макет адаптивным под 3 разрешения с использованием media-queries, что-бы можно было просматривать в том числе на "старых моделях" с разрешением в 320px, 640px и 750px (www.iphoneresolution.com). Но перед этим желательно проконсультироваться с заказчиком, что-бы не делать лишнюю работу или если и делать, что-бы это было оплачено.

Или можете воспользоваться старым добрым масштабированием при этом сверстав только макет шириной в 750px, задав метатэг:

<meta name="viewport" content="width=750px, initial-scale=1">

1) Попробуйте добавить:

-webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

для body
2) Подключите шрифты через Google fonts (до закрывающего тэга </head>):

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet">

3) Нужно обязательно задать корректный font-family и font-weight: 300; для тех мест, где вам нужно отобразить шрифт:

.cite {
  font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
  font-weight: 300;
}

Можно это сделать глобально (для всего сайта), в том же body:

body {
  font-family: "Open Sans", Helvetica, Arial, Sans-sarif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Откройте исходный код любого сайта с кастомными шрифтами (через веб инспектор/панель разработчика), посмотрите как сделано у них (можно посмотреть на том же тостере).

Решение с использованием Flexbox: cssdesk.com/BFj4R
То-же самое, только с display: table cssdesk.com/gqRQz

flickity.metafizzy.co