FlowType.JSを使用した適切なアダプティブタイポグラフィ

タイポグラフィの規則に従って、ページの内容は、行に45〜75文字が含まれている場合によく読み取られます。 レスポンシブデザインを開発する場合、メディアクエリを使用してのみレスポンシブデザインを実装することは困難です。 jQuery FlowTypeプラグインが登場しました 。これにより、あらゆる画面サイズとウィンドウ幅でこの比率を実現できます。



FlowTypeは、コンテンツブロックの幅に合わせてフォントサイズと行間隔を変更します。 さらに、FlowTypeが機能する最大および最小ウィンドウ幅などのプラグインパラメーターを指定できます。

$('body').flowtype({ minimum : 500, maximum : 1200 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、ページのフォントサイズの制限：

 $('body').flowtype({ minFont : 12, maxFont : 40 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのフォントが異なるため、読みやすくするためにページ上のフォントと行間隔をスケーリングする特定の係数を設定することが推奨される場合があります。

 $('body').flowtype({ fontRatio : 30, lineRatio : 1.45 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FlowTypeは、MITライセンスの下で配布されるオープンソースプロジェクト（ GitHubのページ ）です。 すべてのコンテンツがプラグインによってスケーリングされるデモ 。